概述當(dāng)你開(kāi)發(fā)完了一個(gè)小程序并部署上線后,某個(gè)微信用戶第一次訪問(wèn)這個(gè)小程序的時(shí)候,會(huì)彈出一個(gè)授權(quán)界面,用戶可以選擇是否使用微信登錄,如果選擇是,則直接進(jìn)入到小程序。當(dāng)你第二次進(jìn)入該小程序的時(shí)候,你會(huì)發(fā)現(xiàn)授權(quán)界面不會(huì)彈出來(lái)了,直接就進(jìn)入小程序了。 這個(gè)過(guò)程看起來(lái)非常的簡(jiǎn)單,但其實(shí)實(shí)現(xiàn)起來(lái)相當(dāng)?shù)穆闊┖头爆崱I婕暗綍?huì)話、安全、驗(yàn)證等各種各樣的問(wèn)題。下面筆者介紹一下實(shí)現(xiàn)這個(gè)登錄過(guò)程的思路。 微信提供小程序登錄流程圖我們可以從 登錄流程時(shí)序 找到這張圖。想完全看懂張圖,需要了解很多東西。我們先來(lái)看看微信提供的幾個(gè)接口。 小程序接口介紹wx.login()這個(gè)方法是 小程序端 發(fā)起的,如果是使用騰訊團(tuán)隊(duì)推出的小程序組件化開(kāi)發(fā)框架的wepy的話,偽代碼如下:
wepy.login()
.then(res => {
const code = res.code
})
這樣子就可以從微信平臺(tái)獲取一個(gè)code,這個(gè)code是 臨時(shí)登錄憑證 ,用于獲取 openid 的。 wx.request()這個(gè)也是 小程序端 發(fā)起的,用于請(qǐng)求開(kāi)發(fā)者服務(wù)器(也即是我們的應(yīng)用服務(wù)器)上的接口,調(diào)用的偽代碼如下:
wepy.request({
url: `xxurl`,
data: {
//入?yún)?
},
})
.then(res => {
//從res中獲取應(yīng)用服務(wù)器返回的數(shù)據(jù)
})
獲取openid的接口當(dāng)某個(gè)開(kāi)發(fā)主體開(kāi)發(fā)了一個(gè)小程序后,當(dāng)用戶訪問(wèn)這個(gè)小程序的時(shí)候,微信平臺(tái)會(huì)為這個(gè)用戶分配一個(gè)openid。如下接口: 這個(gè)微信接口一般是我們的應(yīng)用服務(wù)器發(fā)起調(diào)用的,而不是小程序端發(fā)起的。 wx.getUserInfo這個(gè)四個(gè)接口在使用微信訪問(wèn)小程序的時(shí)候都會(huì)用到的。 基于token保持會(huì)話和登錄認(rèn)證小程序雖然不支持cookie的機(jī)制,但是支持在header里設(shè)置token。 這個(gè)token是應(yīng)用服務(wù)器生成的。
header: {
'xxxxtoken': token,
}
當(dāng)小程序調(diào)用應(yīng)用服務(wù)器接口的時(shí)候,必須帶上這個(gè)token,應(yīng)用服務(wù)端則對(duì)這個(gè)token進(jìn)行解析和認(rèn)證。 當(dāng)然如果是第一次訪問(wèn)小程序,只能由應(yīng)用服務(wù)器先生成token。 筆者打算用偽代碼來(lái)表達(dá)使用token后,整個(gè)登錄的過(guò)程,因?yàn)橛梦淖只蛘邎D比較難表達(dá)。
const code = wx.login();
if (code ) {//code存在
//從小程序的本地中獲取toten
const token = wx.getStorageSync('xxxxxtoken')
if (token ) {//小程序本地存有token,無(wú)需彈出授權(quán)界面
//直接傳入code字段,調(diào)用應(yīng)用服務(wù)器的驗(yàn)證token的方法,如果校驗(yàn)成功,需要返回用戶信息。
const userinfo = wx.request(http://xxxxxValidateToken(code ));
if (userinfo) {
//說(shuō)明登錄成功,直接進(jìn)入小程序的主界面。
}
}
else {
//說(shuō)明小程序本地沒(méi)有token,這個(gè)時(shí)候需要彈出授權(quán)界面,讓微信用戶決定是否訪問(wèn)小程序,如果用戶選擇是的話。
const weixinuserinfo = wx.getUserInfo();//會(huì)彈出授權(quán)界面,微信提供的
if (weixinuserinfo ){
//生成或者驗(yàn)證token
const userinfo = wx.request(http://xxxxxValidateToken(code ));
const token = userinfo.getToken();
//將token存儲(chǔ)到小程序本地
wx.setStorageSync('xxxxxtoken', token )
}
}
}
上面的偽代碼中,會(huì)調(diào)用應(yīng)用服務(wù)器(我們的應(yīng)用服務(wù)器)的 http://xxxxxValidateToken(code ) 方法。這個(gè)方法的實(shí)現(xiàn)邏輯大概如下: 1、先驗(yàn)證這個(gè)微信用戶是否存在,可以調(diào)用微信提供的 jscode2session 方法,該方法會(huì)返回一個(gè)openid。我們必須在業(yè)務(wù)代碼里,將這個(gè)openid保存到數(shù)據(jù)庫(kù),并和userid關(guān)聯(lián)起來(lái)。 2、判斷是否是新的用戶,如果是,則生成token和生成新的一個(gè)用戶信息存儲(chǔ)到數(shù)據(jù)庫(kù)。如果不是新的用戶,則驗(yàn)證token。 這個(gè)流程走完后,小程序就可以通過(guò) wx.request 方法,帶上token,真正的訪問(wèn)應(yīng)用服務(wù)器的業(yè)務(wù)方法,獲取業(yè)務(wù)數(shù)據(jù)。 token的生成和校驗(yàn)見(jiàn)過(guò)有些公司是直接將userid和openid,加密后返回給小程序。也見(jiàn)過(guò)用userid和password加密后返回給小程序。如果是選擇第二種方式的話,驗(yàn)證token的邏輯大概如下: 先解密,獲取userid和password,并根據(jù)userid從數(shù)據(jù)庫(kù)中獲取到用戶密碼,跟從token中解密出來(lái)的password進(jìn)行比對(duì),如果相等,則校驗(yàn)通過(guò)。 總結(jié)現(xiàn)在再回頭看看微信提供登錄路程圖,是否好理解一些了。 |