總結(jié)

大家都知道，在開(kāi)發(fā)中提供用戶(hù)登錄以及維護(hù)用戶(hù)的登錄狀態(tài)，是一個(gè)擁有用戶(hù)系統(tǒng)的軟件應(yīng)用普遍需要做的事情。像微信這樣的一個(gè)社交平臺(tái)，如果做一個(gè)小程序應(yīng)用，我們可能很少會(huì)去做一個(gè)完全脫離和舍棄連接用戶(hù)信息的純工具軟件。

讓用戶(hù)登錄，標(biāo)識(shí)用戶(hù)和獲取用戶(hù)信息，以用戶(hù)為核心提供服務(wù)，是大部分小程序都會(huì)做的事情。我們今天就來(lái)了解下在小程序中，如何做用戶(hù)登錄，以及如何去維護(hù)這個(gè)登錄后的會(huì)話(huà)(Session)狀態(tài)。下面來(lái)看看詳細(xì)的介紹：

在微信小程序中，我們大致會(huì)涉及到以下三類(lèi)登錄方式：

• 自有的賬號(hào)注冊(cè)和登錄
• 使用其他第三方平臺(tái)賬號(hào)登錄
• 使用微信賬號(hào)登錄（即直接使用當(dāng)前已登錄的微信賬號(hào)來(lái)作為小程序的用戶(hù)進(jìn)行登錄）
  

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

我們今天主要來(lái)討論一下第三種方式，即如何使用微信賬號(hào)進(jìn)行登錄，因?yàn)檫@種方式和微信平臺(tái)結(jié)合最緊密，用戶(hù)體驗(yàn)比較好。

登錄流程

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

登錄流程圖

該圖中，“小程序”指的就是我們使用小程序框架寫(xiě)的代碼部分，“第三方服務(wù)器”一般就是我們自己的后臺(tái)服務(wù)程序，“微信服務(wù)器”是微信官方的API服務(wù)器。

下面我們來(lái)逐步分解一下這個(gè)流程圖。

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

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

我們可以在小程序的App代碼中發(fā)起登錄憑證請(qǐng)求，也可以在其他任何Page頁(yè)面代碼中發(fā)起登錄憑證請(qǐng)求，主要根據(jù)你小程序的實(shí)際需要。

App({ onLaunch: function() { wx.login({  success: function(res) {  var code = res.code;  if (code) {   console.log('獲取用戶(hù)登錄憑證：' + code);  } else {   console.log('獲取用戶(hù)登錄態(tài)失敗：' + res.errMsg);  }  } }); }})

步驟2：將登錄憑證發(fā)往你的服務(wù)端，并在你的服務(wù)端使用該憑證向微信服務(wù)器換取該微信用戶(hù)的唯一標(biāo)識(shí)(openid)和會(huì)話(huà)密鑰(session_key)

首先，我們使用wx.request()方法，請(qǐng)求我們自己實(shí)現(xiàn)的一個(gè)后臺(tái)API，并將登錄憑證(code)攜帶過(guò)去，例如在我們前面代碼的基礎(chǔ)上增加：

App({ onLaunch: function() { wx.login({  success: function(res) {  var code = res.code;  if (code) {   console.log('獲取用戶(hù)登錄憑證：' + code);   // --------- 發(fā)送憑證 ------------------   wx.request({   url: 'https://www.my-domain.com/wx/onlogin',   data: { code: code }   })   // ------------------------------------  } else {   console.log('獲取用戶(hù)登錄態(tài)失敗：' + res.errMsg);  }  } }); }})

你的后臺(tái)服務(wù)(/wx/onlogin)接著需要使用這個(gè)傳遞過(guò)來(lái)的登錄憑證，去調(diào)用微信接口換取openid和session_key，接口地址格式如下所示：

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

這里是我使用了Node.js Express構(gòu)建的后臺(tái)服務(wù)的代碼，僅供參考：

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)  //TODO: 生成一個(gè)唯一字符串sessionid作為鍵，將openid和session_key作為值，存入redis，超時(shí)時(shí)間設(shè)置為2小時(shí)  //偽代碼: redisStore.set(sessionid, openid + session_key, 7200)  res.json({ sessionid: sessionid }) } else {  console.log("[error]", err)  res.json(err) } })})

這段后臺(tái)代碼成功執(zhí)行的話(huà)，就可以得到openid和session_key。這個(gè)信息就是當(dāng)前微信賬戶(hù)在微信服務(wù)器那邊的登錄態(tài)了。

但是，為了安全方面的原因，請(qǐng)不要直接使用這些信息作為你小程序的用戶(hù)標(biāo)識(shí)和session標(biāo)識(shí)回傳到小程序客戶(hù)端中去，我們應(yīng)該在服務(wù)器端做一層自己的session，將這個(gè)微信賬號(hào)登錄態(tài)生成一個(gè)session id并維護(hù)在我們自己的session機(jī)制中，然后把這個(gè)session id派發(fā)到小程序客戶(hù)端作為session標(biāo)識(shí)來(lái)使用。

關(guān)于如何在服務(wù)器端做這個(gè)session機(jī)制，我們現(xiàn)在一般采用鍵值對(duì)存儲(chǔ)工具來(lái)做，比如redis。我們?yōu)槊總€(gè)session生成一個(gè)唯一的字符串作為鍵，然后可以將session_key和openid作為值，存入redis中，為了安全，存入的時(shí)候還應(yīng)設(shè)置一個(gè)超時(shí)的時(shí)間。

步驟3：在客戶(hù)端保存sessionid

開(kāi)發(fā)Web應(yīng)用的時(shí)候，在客戶(hù)端（瀏覽器）中，我們通常將session id存放在cookie中，但是小程序沒(méi)有cookie機(jī)制，所以不能采用cookie了，但是小程序有本地的storage，所以我們可以使用storage來(lái)保存sessionid，以供后續(xù)的后臺(tái)API調(diào)用所使用。

在之后，調(diào)用那些需要登錄后才有權(quán)限的訪問(wèn)的后臺(tái)服務(wù)時(shí)，你可以將保存在storage中的sessionid取出并攜帶在請(qǐng)求中（可以放在header中攜帶，也可以放在querystring中，或是放在body中，根據(jù)你自己的需要來(lái)使用），傳遞到后臺(tái)服務(wù)，后臺(tái)代碼中獲取到該sessionid后，從redis中查找是否有該sessionid存在，存在的話(huà)，即確認(rèn)該session是有效的，繼續(xù)后續(xù)的代碼執(zhí)行，否則進(jìn)行錯(cuò)誤處理。

這是一個(gè)需要session驗(yàn)證的后臺(tái)服務(wù)示例，我的sessionid是放在header中傳遞的，所以在這個(gè)示例中，是從請(qǐng)求的header中獲取sessionid：

router.get('/wx/products/list', function (req, res, next) { let sessionid = req.header("sessionid") let sessionVal = redisStore.get(sessionid) if (sessionVal) { // 執(zhí)行其他業(yè)務(wù)代碼 } else { // 執(zhí)行錯(cuò)誤處理 }})

好了，通過(guò)微信賬號(hào)進(jìn)行小程序登錄和狀態(tài)維護(hù)的簡(jiǎn)單流程就是這樣，了解這些知識(shí)點(diǎn)之后，再基于此進(jìn)行后續(xù)的開(kāi)發(fā)就會(huì)變得更容易了。

另外，騰訊前端團(tuán)隊(duì)也開(kāi)源了他們封裝的相關(guān)庫(kù)，可以借鑒和使用。

服務(wù)器端庫(kù) weapp-session

小程序端庫(kù) weapp-session-client

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。