微信小程序中做用戶登錄與登錄態維護的實現詳解
讓用戶登錄,標識用戶和獲取用戶信息,以用戶爲核心提供服務,是大部分小程序都會做的事情。我們今天就來了解下在小程序中,如何做用戶登錄,以及如何去維護這個登錄後的會話(Session)狀態。下面來看看詳細的介紹:
小程序的登陸流程
微信小程序的登陸涉及到的有三劍客有: 小程序客戶端 微信服務器 自己的服務器
下面我們就來逐步分解一下這個流程圖:
- 步驟一:在小程序客戶端獲取當前登陸微信用戶的憑證(code)
在小程序中登錄的第一步,就是先獲取登錄憑證。我們可以使用wx.login()方法並得到一個登錄憑證。
我們可以在小程序的App代碼中發起登錄憑證請求,也可以在其他任何Page頁面代碼中發起登錄憑證請求,主要根據你小程序的實際需要。
前臺js:
- 步驟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);
// --------- 發送憑證 ------------------
wx.request({
url: 你的域名',
data: { code: code }
})
// ------------------------------------
} else {
console.log('獲取用戶登錄態失敗:' + res.errMsg);
}
}
});
}
})
後臺php:
你的後臺服務(/wx/onlogin)接着需要使用這個傳遞過來的登錄憑證,去調用微信接口換取openid和session_key,接口地址格式如下所示:
<?php
//聲明CODE,獲取小程序傳過來的CODE
$code = htmlspecialchars($_GET["js_code"]);
// var_dump($code);
//配置appid
$appid = "你的appid";
//配置appscret
$secret = "你的secret";
//api接口
$api = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code";
//獲取GET請求
//echo $api;
$result = file_get_contents($api);
echo json_encode($result);
//return json_encode($result);
這段後臺代碼成功執行的話,就可以得到openid和session_key。這個信息就是當前微信賬戶在微信服務器那邊的登錄態了。
但是,爲了安全方面的原因,請不要直接使用這些信息作爲你小程序的用戶標識和session標識回傳到小程序客戶端中去
我們應該在服務器端做一層自己的session,將這個微信賬號登錄態生成一個sessionid並維護在我們自己的session機制中,然後把這個session id派發到小程序客戶端作爲session標識來使用。
關於如何在服務器端做這個session機制,我們現在一般採用鍵值對存儲工具來做,比如redis。我們爲每個session生成一個唯一的字符串作爲鍵,然後可以將session_key和openid作爲值,存入redis中,爲了安全,存入的時候還應設置一個超時的時間。
步驟3:在客戶端保存sessionid
開發Web應用的時候,在客戶端(瀏覽器)中,我們通常將sessionid存放在cookie中,但是小程序沒有cookie機制,所以不能採用cookie了,但是小程序有本地的storage,所以我們可以使用storage來保存sessionid,以供後續的後臺API調用所使用。
在之後,調用那些需要登錄後纔有權限的訪問的後臺服務時,你可以將保存在storage中的sessionid取出並攜帶在請求中(可以放在header中攜帶,也可以放在querystring中,或是放在body中,根據你自己的需要來使用),傳遞到後臺服務,後臺代碼中獲取到該sessionid後,從redis中查找是否有該sessionid存在,存在的話,即確認該session是有效的,繼續後續的代碼執行,否則進行錯誤處理。
這是一個需要session驗證的後臺服務示例,我的sessionid是放在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 {
// 執行錯誤處理
}
})
總結
以上就是這篇文章的全部內容,如果您覺得文章有用,對自己工作學習有幫助。