? ? ? ? * 源碼已經上傳到資源處，需要的話點擊跳轉下載 |? 源碼下載
????????用戶登錄是微信小程序的重要內容，那么今天就講用戶登錄的一個流程，當然微信官方文檔也有相關的一個登錄流程圖，這里也給大家附上地址：官方 | 小程序登錄?。
用戶登錄流程
? ? ? 用戶登錄流程可以用這一句話簡單概括：" 3個角色，4個步驟?"，3個角色就是" 小程序 ，開發(fā)者服務器 ，微信接口服務??"，4個步驟就是：其一小程序獲取code，其二將code發(fā)送到開發(fā)者服務器，其三開發(fā)者服務器通過微信接口服務校驗登錄憑證?，其四開發(fā)者服務自定義登錄的狀態(tài)。
? ? ? ? 知道了對應的三個角色，同時要對四個步驟有一個基本的認識，那么上面提供了官方文檔的鏈接，可以自己看文檔也可以，看我的一個淺薄見解也行；首先小程序通過wx.login()獲取登錄憑證code，每次調用code均不同，有效時間是5分鐘，該code被微信接口服務驗證一次就會失效了，小程序獲取到code之后，通過wx.request()將code發(fā)送到開發(fā)者服務器，開發(fā)者服務器將appid，appSecret（密鑰），和code發(fā)送給微信接口服務去校驗登錄憑證，成功會返回session_key(會話信息記錄)和openid(用戶唯一標識)，用戶登錄成功后，開發(fā)者服務器可以將openid和session_key保存，生成一個自定義登錄態(tài)的token(令牌)響應回去給小程序，通過token可以查詢openid和session_key，小程序下次請求只要攜帶著token就可以證明已經登錄。
搭建開發(fā)者服務器?
? ? ? ? 在實際開發(fā)中是去購買服務器的，那么這里僅限了解和搭建，那么就用本地localhost:3000作為服務器的端口，選用node.js來搭建開發(fā)者服務器?，如何搭建大家可以看一下這篇內容學習如何搭建，這里就將初步搭建的代碼放在這里，不過多的來介紹；
微信小程序搭載node.js服務器 (簡)https://blog.csdn.net/weixin_52203618/article/details/124225264index.js 文件代碼
const express = require('express')
const bodyParser = require('body-parser')
const request = require('request')
const app = express()
app.use(bodyParser.json())
app.listen(3000, () => {
console.log('server running ...');
})
????????這里暫時不將所有的接口寫完，等用到的時候我們再寫，內容是一個循序漸進的過程。
步驟1：獲取code
? ? ? ? ?小程序通過wx.login()獲取登錄憑證code，那么在微信開發(fā)者工具中創(chuàng)建一個名為Login的小程序，在這里要實現一個小程序啟動時自動執(zhí)行登錄的操作，在app.js文件中來編寫代碼，可以在onLaunch中進行觸發(fā)；
App({
onLaunch:function(){
this.login() // 調用
},
login:function(){
// wx.login()獲取code
wx.login({
success:(res)=>{
console.log("code: " + res.code);
}
})
}
})?以上就是獲取code，此時可以在控制臺上看到打印出來的code；
步驟二：將code發(fā)送到開發(fā)者服務器
通過wx.request()將code發(fā)送到開發(fā)者服務器
login:function(){
// wx.login()獲取code
wx.login({
success:(res)=>{
console.log("code: " + res.code);
wx.request({
url:'http://127.0.0.1:3000/login',
method:'POST',
data:{
code : res.code
}
})
}
})
}????????在開發(fā)者服務器當中來個響應請求接口，請求的方式是post，那可以在index.js文件當中編寫代碼，這里如果你安裝了nodemon的話可以不用重新啟動，如果沒有，則需要命令行重新輸出node index.js重新運行。
// 寫在app.listen即可
// '/login'即響應在小程序中的請求http://127.0.0.1:3000/login
app.post('/login',(req,res)=>{
console.log('code: '+req.body.code) // 打印一下code
})
app.listen(3000, () => {
console.log('server running...');
})
?可以看到小程序通過wx.request()的方式成功將code發(fā)送到開發(fā)者服務器上；
步驟三：通過微信接口服務校驗
????????開發(fā)者服務器將appid，appSecret（密鑰），和code發(fā)送給微信接口服務去校驗登錄憑證，成功會返回session_key(會話信息記錄)和openid(用戶唯一標識)；這時主要是編寫開發(fā)者服務器當中的代碼，在此之間需要開發(fā)者將自己的appid和appSecret密鑰準備好，這里也給大家將如何獲取到；
如何獲取 appid(用戶唯一標識)，appSecret(用戶密鑰)？
登錄微信小程序后臺，登錄之后，點擊【開發(fā)】選項中的【開發(fā)管理】就可以看到；?微信公眾平臺 (qq.com)https://mp.weixin.qq.com/
?????????現在編寫開發(fā)者服務器當中的代碼；有了code，appid，appsecret就可以進行微信接口服務校驗了，附上這個官方鏈接用到復制即可，以防自己打錯?auth.code2Session | 微信開放文檔
// 開發(fā)者信息
const wx = {
// appid:' ', // 填寫用戶自己的appid
// secret:' ' // 填寫用戶自己的密鑰
}
// 寫在app.listen即可
// '/login'即響應在小程序中的請求http://127.0.0.1:3000/login
app.post('/login',(req,res)=>{
console.log('code: '+req.body.code) // 打印一下code
// code,appid,secret都有了就發(fā)起請求到微信接口服務校驗
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code + '&grant_type=authorization_code'
request(url, (err, response, body) => {
// 可以獲取到 session_key(會話信息) 、 openid(用戶唯一標識)
console.log('session: ' + body)
// 上面的session信息是字符串數據，通過JSON.parse()轉成js對象
// var session = JSON.parse(body)
console.log(session);
})
app.listen(3000, () => {
console.log('server running...');
})????????成功之后會返回openid和session_key，openid是用戶在這個小程序上唯一的id，不同小程序用戶的id都不一樣，session_key是用戶的會話信息記錄；將結果打印出來，可以在開發(fā)者服務器當中看到如下：
? ? ? ? 以上就是校驗成功之后所返回的session_key和openid；這里注意的是賬戶不得是測試的賬戶，否則獲取不到code，獲取不到code，則校驗不能通過；
步驟四：開發(fā)者服務器自定義登錄態(tài)
? ? ? ? 通過校驗成功后返回的session_key和openid進行保存，實際開發(fā)中，通常會使用數據庫來保存數據，比如可以用MongoDB，這里就不搭建數據庫來存數據，將其作為數據保存到我們的變量當中，如果后續(xù)有機會會專門做一期；openid是用戶的唯一標識，所以可以判斷session中是否存有openid，如果有我們才返回一個token回去，返回去的token不能是固定的，固定存在一定的分析，這時可以用這個時間戳生成token，當然再實際開發(fā)中是推薦使用比較成熟模塊生成token，避免token被偽造帶來不好的影響，這里我們就通過時間戳的方式來生成token給大家演示這個過程；
// 開發(fā)者信息
const wx = {
appid:'',
secret:''
}
// 模擬數據庫存放數據
var db = {
user: {}, // userInfo
session: {} // 保存 openid 和session_key會話信息
}
app.post('/login', (req, res) => {
// 注意：小程序端的appid必須使用真實賬號，如果使用測試賬號，會出現login code錯誤
console.log('code: ' + req.body.code)
// 接收code參數(req.body.code)
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code + '&grant_type=authorization_code'
request(url, (err, response, body) => {
var session = JSON.parse(body)
// 將openid和session_key保存后響應token回去,openid是用戶的唯一標識
// if(session.openid) {
// 時間戳來生成token
var token = 'token_' + new Date().getTime()
db.session[token] = session
console.log(db);
if(!db.user[session.openid]) {
db.user[session.openid] = {
state:1 // 成功登錄可以獲取
}
}
}
res.json({
token: token // 返回token
})
})
})
????????成功之后返回token，可以在小程序當中的wx.request()請求校驗當中添加請求成功之后將返回的數據進行打印到小程序的控制臺上；
login:function(){
...代碼省略...
wx.request({
url: 'http://127.0.0.1:3000/login',
method:'POST',
data:{ code:res.code },
success:(res)=>{
// 將請求成功的token打印
console.log("token : " + res.data.token);
}
})
...代碼省略...
},
將返回到小程序的token進行一個緩存，小程序的下次請求時只要攜帶token，就可以證明用戶已經登錄，那么我們在進入小程序之前就需要將檢查是否登錄。
檢查用戶是否登錄
? ? ? ? ?在檢查用戶登錄之前，將返回的token進行數據緩存，token是公共數據，是多個頁面當中需要用到的，可以定義為全局的globalData；數據緩存可以用wx.setStorage()，如果沒用過的，這里提供官方文檔，以及簡單講一下，主要是兩個參數，一個是key，一個是data，這里不適用加密手段，了解基礎使用，再琢磨加密吧。附上開發(fā)者文檔的地址：wx.setStorage() | 微信開發(fā)文檔
login:function(){
// 1.wx.login()獲取code
wx.login({
success:(res)=>{
....省略...
success:(res)=>{
console.log("token : " + res.data.token);
// 將token保存為公共數據（多頁面使用->全局globalData）
this.globalData.token = res.data.token
// 將token保存在數據緩存中（下次無需重新獲取token）
wx.setStorage({
key:'token',
data:res.data.token
})
...省略...
},
globalData:{
token:null
}
})
可以查看是否已經緩存下來，打開控制臺查看，如下圖
檢查用戶登錄
? ? ? ? 上述內容將返回token緩存下來，那么檢查的是否需要先從緩存當中看是否有token，如果有則可以請求服務器去檢驗token是否有效，如果沒有token，則按照原來的方式去調用login()來獲取token；
App({
onLaunch:function(){
// 檢測用戶是否登錄
this.checkLogin(res=>{
console.log('is_login : ',res.is_login);
// 未登錄 -> login()
if(!res.is_login){
// 調用Login
this.login();
}
})
},
// checkLogin()
checkLogin:function(callback){
var token = this.globalData.token
if(!token){
// 從緩存中獲取token
token = wx.getStorageSync('token')
if(token){
this.globalData.token = token
}else{
callback({ is_login : false })
}
}
// 發(fā)送請求檢驗token是否存在
wx.request({
url: 'http://127.0.0.1:3000/checklogin',
data:{
token : token
},
success:(res)=>{
console.log(res);
callback({
is_login:res.data.is_login
})
}
})
},
....省略....開發(fā)者服務器代碼編寫 index.js
????????響應接口請求，查詢保存的數據庫當中是否有該token的存在，判斷取出的session是否為undefined，如是則表示token值已經失效了，如有緩存token且token有效則表示用戶已經登錄；
// index.js
...省略...
// 檢查用戶是否已經登錄
app.get('/checklogin', (req, res) => {
var session = db.session[req.query.token]
console.log('checklogin: ', session)
// 將用戶是否已經登錄的布爾值返回給客戶端
res.json({
is_login: session !== undefined
})
})
app.listen(3000, () => {
console.log('server running...');
})
?????????現在緩存當中有了token值，我們重新編譯一下，此時緩存當中是有token值的，is_login的值為 true ，證明用戶已經登錄；
????????以上就是這篇文章的內容，講述微信小程序當中的一個重要環(huán)節(jié)用戶登錄的流程，小白和較為初級的比較適合，篇幅可能長了一些，感謝大家的支持！文章來源：http://www.zghlxwxcb.cn/news/detail-777654.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-777654.html
到了這里，關于微信小程序實現用戶登錄（詳）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
