微信小程序中用戶登錄和登錄態維護

讓用戶登錄，標識用戶和獲取用戶信息，以用戶爲核心提供服務，是大部分小程序都會做的事情。我們今天就來了解下在小程序中，如何做用戶登錄，以及如何去維護這個登錄後的會話（Session）狀態。

在微信小程序中，我們大致會涉及到以下三類登錄方式：

• 自有的賬號註冊和登錄；
• 使用其他第三方平臺賬號登錄；
• 使用微信賬號登錄（即直接使用當前已登錄的微信賬號來作爲小程序的用戶進行登錄）。

第一和第二種方式是目前Web應用中最常見的兩種方式，在微信小程序中同樣可以使用，但是需要值的注意的是，小程序中沒有Cookie的機制，所以在使用這2種方式前，請確認你們或第三方的API是否需要依賴Cookie；還有小程序中也不支持HTML頁面，那些需要使用頁面重定向來進行登錄的第三方API就需要改造，或不能用了。

我們今天主要來討論一下第三種方式，即如何使用微信賬號進行登錄，因爲這種方式和微信平臺結合最緊密，用戶體驗比較好。

登錄流程

引用小程序官方文檔的登錄流程圖，整個登錄流程基本如下圖所示：

登錄流程圖

該圖中，“小程序”指的就是我們使用小程序框架寫的代碼部分，“第三方服務器”一般就是我們自己的後臺服務程序，“微信服務器”是微信官方的API服務器。

下面我們來逐步分解一下這個流程圖。

步驟1：在客戶端獲取當前登錄微信用戶的登錄憑證(code)

在小程序中登錄的第一步，就是先獲取登錄憑證。我們可以使用wx.login()方法並得到一個登錄憑證。

我們可以在小程序的App代碼中發起登錄憑證請求，也可以在其他任何Page頁面代碼中發起登錄憑證請求，主要根據你小程序的實際需要。

App({ 

  onLaunch: function() { 

    wx.login({ 

      success: function(res) { 

        var code = res.code; 

        if (code) { 

          console.log('獲取用戶登錄憑證：' + code); 

        } else { 

          console.log('獲取用戶登錄態失敗：' + res.errMsg); 

        } 

      } 

    }); 

  } 

})

步驟2：將登錄憑證發往你的服務端，並在你的服務端使用該憑證向微信服務器換取該微信用戶的唯一標識(openid)和會話密鑰(session_key)

首先，我們使用wx.request()方法，請求我們自己實現的一個後臺API，並將登錄憑證（code）攜帶過去，例如在我們前面代碼的基礎上增加：

App({ 

  onLaunch: function() { 

    wx.login({ 

      success: function(res) { 

        var code = res.code; 

        if (code) { 

          console.log('獲取用戶登錄憑證：' + code);

      <span class="hljs-comment">// --------- 發送憑證 ------------------</span>
      wx.request({
        url: <span class="hljs-string">&#039;https://www.my-domain.com/wx/onlogin&#039;</span>,
        data: { code: code }
      })
      <span class="hljs-comment">// ------------------------------------</span>

    } <span class="hljs-keyword">else</span> {
      console.log(<span class="hljs-string">&#039;獲取用戶登錄態失敗：&#039;</span> + res.errMsg);
    }
  }
});


} 

})

你的後臺服務(/wx/onlogin)接着需要使用這個傳遞過來的登錄憑證，去調用微信接口換取openid和session_key，接口地址格式如下所示：

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

這裏是我使用了Node.js Express構建的後臺服務的代碼，僅供參考：

router.get('/wx/onlogin', function (req, res, next) { 

  let code = req.query.code

request.get({ 

    uri: 'https://api.weixin.qq.com/sns/jscode2session', 

    json: true, 

    qs: { 

      grant_type: 'authorization_code', 

      appid: '你小程序的APPID', 

      secret: '你小程序的SECRET', 

      js_code: code 

    } 

  }, (err, response, data) => { 

    if (response.statusCode === 200) { 

      console.log("[openid]", data.openid) 

      console.log("[session_key]", data.session_key)

 <span class="hljs-comment"> //TODO: 生成一個唯一字符串sessionid作爲鍵，將openid和session_key作爲值，存入redis，超時時間設置爲2小時</span>
 <span class="hljs-comment"> //僞代碼: redisStore.set(sessionid, openid + session_key, 7200)</span>

  res.json({ sessionid: sessionid })
} <span class="hljs-keyword">else</span> {
  console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"[error]"</span>, err)
  res.json(err)
}


}) 

})

這段後臺代碼成功執行的話，就可以得到openid和session_key。這個信息就是當前微信賬戶在微信服務器那邊的登錄態了。

但是，爲了安全方面的原因，請不要直接使用這些信息作爲你小程序的用戶標識和session標識回傳到小程序客戶端中去，我們應該在服務器端做一層自己的session，將這個微信賬號登錄態生成一個session id並維護在我們自己的session機制中，然後把這個session id派發到小程序客戶端作爲session標識來使用。

關於如何在服務器端做這個session機制，我們現在一般採用鍵值對存儲工具來做，比如redis。我們爲每個session生成一個唯一的字符串作爲鍵，然後可以將session_key和openid作爲值，存入redis中，爲了安全，存入的時候還應設置一個超時的時間。

步驟3：在客戶端保存Session ID

開發Web應用的時候，在客戶端（瀏覽器）中，我們通常將Session ID存放在cookie中，但是小程序沒有cookie機制，所以不能採用cookie了，但是小程序有本地的storage，所以我們可以使用storage來保存Session ID，以供後續的後臺API調用所使用。

在之後，調用那些需要登錄後纔有權限訪問的後臺服務時，你可以將保存在storage中的Session ID取出並攜帶在請求中（可以放在header中攜帶，也可以放在querystring中，或是放在body中，根據你自己的需要來使用），傳遞到後臺服務，後臺代碼中獲取到該Session ID後，從redis中查找是否有該Session ID存在，存在的話，即確認該session是有效的，繼續後續的代碼執行，否則進行錯誤處理。

這是一個需要session驗證的後臺服務示例，我的Session ID是放在header中傳遞的，所以在這個示例中，是從請求的header中獲取sessionid：

router.get('/wx/products/list', function (req, res, next) { 

  let sessionid = req.header("sessionid") 

  let sessionVal = redisStore.get(sessionid)

if (sessionVal) { 

    // 執行其他業務代碼 

  } else { 

    // 執行錯誤處理 

  } 

})