更新說明：
由于微信小程序官方對相關(guān)API的改版，所以登錄這塊功能流程有一些變動，因此最近再次更新了另一篇文章（附視頻說明和完整示例代碼），大家可與本文一起進(jìn)行閱讀參考：
微信小程序接口改版后的登錄和會話保持流程提供用戶登錄以及維護(hù)用戶的登錄狀態(tài)，是一個(gè)擁有用戶系統(tǒng)的軟件應(yīng)用普遍需要做的事情。
像微信這樣的一個(gè)社交平臺，如果做一個(gè)小程序應(yīng)用，我們可能很少會去做一個(gè)完全脫離和舍棄連接用戶信息的純工具軟件。
讓用戶登錄，標(biāo)識用戶和獲取用戶信息，以用戶為核心提供服務(wù)，是大部分小程序都會做的事情。
我們今天就來了解下在小程序中，如何做用戶登錄，以及如何去維護(hù)這個(gè)登錄后的會話(Session)狀態(tài)。
在微信小程序中，我們大致會涉及到以下三類登錄方式：
自有的賬號注冊和登錄使用其他第三方平臺賬號登錄使用微信賬號登錄（即直接使用當(dāng)前已登錄的微信賬號來作為小程序的用戶進(jìn)行登錄）第一和第二種方式是目前Web應(yīng)用中最常見的兩種方式，在微信小程序中同樣可以使用，但是需要值的注意的是，小程序中沒有Cookie的機(jī)制，所以在使用這2種方式前，請確認(rèn)你們或第三方的API是否需要依賴Cookie；還有小程序中也不支持HTML頁面，那些需要使用頁面重定向來進(jìn)行登錄的第三方API就需要改造，或不能用了。
我們今天主要來討論一下第三種方式，即如何使用微信賬號進(jìn)行登錄，因?yàn)檫@種方式和微信平臺結(jié)合最緊密，用戶體驗(yàn)比較好。
登錄流程引用小程序官方文檔的登錄流程圖，整個(gè)登錄流程基本如下圖所示：
該圖中，“小程序”指的就是我們使用小程序框架寫的代碼部分，“第三方服務(wù)器”一般就是我們自己的后臺服務(wù)程序，“微信服務(wù)器”是微信官方的API服務(wù)器。
下面我們來逐步分解一下這個(gè)流程圖。
步驟1：
在客戶端獲取當(dāng)前登錄微信用戶的登錄憑證(code)在小程序中登錄的第一步，就是先獲取登錄憑證。
我們可以使用wx.login()方法并得到一個(gè)登錄憑證。
我們可以在小程序的App代碼中發(fā)起登錄憑證請求，也可以在其他任何Page頁面代碼中發(fā)起登錄憑證請求，主要根據(jù)你小程序的實(shí)際需要。
App({
onLaunch: function() {
wx.login({
success: function(res) {
var code = res.code;
if (code) {
console.log('
獲取用戶登錄憑證：
'
+ code);
}
else {
console.log('
獲取用戶登錄態(tài)失?。?br>'
+ res.errMsg);
}
}
}
);
}
}
)步驟2：
將登錄憑證發(fā)往你的服務(wù)端，并在你的服務(wù)端使用該憑證向微信服務(wù)器換取該微信用戶的唯一標(biāo)識(openid)和會話密鑰(session_key)首先，我們使用wx.request()方法，請求我們自己實(shí)現(xiàn)的一個(gè)后臺API，并將登錄憑證(code)攜帶過去，例如在我們前面代碼的基礎(chǔ)上增加：
App({
onLaunch: function() {
wx.login({
success: function(res) {
var code = res.code;
if (code) {
console.log('
獲取用戶登錄憑證：
'
+ code);
// --------- 發(fā)送憑證 ------------------ wx.request({
url: '
https://www.my-domain.com/wx/onlogin'
, data: {
code: code }
}
) // ------------------------------------ }
else {
console.log('
獲取用戶登錄態(tài)失?。?br>'
+ res.errMsg);
}
}
}
);
}
}
)你的后臺服務(wù)(/wx/onlogin)接著需要使用這個(gè)傳遞過來的登錄憑證，去調(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)建的后臺服務(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) }
}
) }
)這段后臺代碼成功執(zhí)行的話，就可以得到openid和session_key。
這個(gè)信息就是當(dāng)前微信賬戶在微信服務(wù)器那邊的登錄態(tài)了。
但是，為了安全方面的原因，請不要直接使用這些信息作為你小程序的用戶標(biāo)識和session標(biāo)識回傳到小程序客戶端中去，我們應(yīng)該在服務(wù)器端做一層自己的session，將這個(gè)微信賬號登錄態(tài)生成一個(gè)session id并維護(hù)在我們自己的session機(jī)制中，然后把這個(gè)session id派發(fā)到小程序客戶端作為session標(biāo)識來使用。
關(guān)于如何在服務(wù)器端做這個(gè)session機(jī)制，我們現(xiàn)在一般采用鍵值對存儲工具來做，比如redis。
我們?yōu)槊總€(gè)session生成一個(gè)唯一的字符串作為鍵，然后可以將session_key和openid作為值，存入redis中，為了安全，存入的時(shí)候還應(yīng)設(shè)置一個(gè)超時(shí)的時(shí)間。
步驟3：
在客戶端保存sessionid開發(fā)Web應(yīng)用的時(shí)候，在客戶端（瀏覽器）中，我們通常將session id存放在cookie中，但是小程序沒有cookie機(jī)制，所以不能采用cookie了，但是小程序有本地的storage，所以我們可以使用storage來保存sessionid，以供后續(xù)的后臺API調(diào)用所使用。
在之后，調(diào)用那些需要登錄后才有權(quán)限的訪問的后臺服務(wù)時(shí)，你可以將保存在storage中的sessionid取出并攜帶在請求中（可以放在header中攜帶，也可以放在querystring中，或是放在body中，根據(jù)你自己的需要來使用），傳遞到后臺服務(wù)，后臺代碼中獲取到該sessionid后，從redis中查找是否有該sessionid存在，存在的話，即確認(rèn)該session是有效的，繼續(xù)后續(xù)的代碼執(zhí)行，否則進(jìn)行錯誤處理。
這是一個(gè)需要session驗(yàn)證的后臺服務(wù)示例，我的sessionid是放在header中傳遞的，所以在這個(gè)示例中，是從請求的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í)行錯誤處理 }
}
)好了，通過微信賬號進(jìn)行小程序登錄和狀態(tài)維護(hù)的簡單流程就是這樣，了解這些知識點(diǎn)之后，再基于此進(jìn)行后續(xù)的開發(fā)就會變得更容易了。
另外，騰訊前端團(tuán)隊(duì)也開源了他們封裝的相關(guān)庫Wafer，可以借鑒和使用。
服務(wù)端SDK：
wafer-node-session小程序端SDK：
wafer-client-sdk感謝閱讀我的文章，如有疑問或?qū)戝e的地方請不吝留言賜教。
一斤代碼的《微信小程序》相關(guān)教程文章一斤代碼的《從編程小白到全棧開發(fā)》系列教程文章推薦教程：
《Vue.js教程推薦：
最新的5個(gè)vue.js視頻教程精選》以上就是在微信小程序中用戶登錄和登錄狀態(tài)維護(hù)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序本文轉(zhuǎn)載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序轉(zhuǎn)發(fā)好友的功能
下一篇：
電腦微信小程序設(shè)置全屏的方法是什么？相關(guān)文章相關(guān)視頻微信小程序怎么使用車牌號輸入法記一次微信小程序在安卓手機(jī)上的白屏問題新手必備的微信小程序開發(fā)指南微信小程序省市聯(lián)動功能在微信小程序中用戶登錄和登錄狀態(tài)維護(hù)微信小程序事件 以及事件對象初識微信小程序(2)初識微信小程序(3) [溫州做小程序]