柚子快報(bào)邀請碼778899分享：微信小程序 實(shí)現(xiàn)登錄流程

http://yzkb.51969.com/

一、背景

開發(fā)微信小程序時(shí)，用戶登錄是很重要的一個(gè)環(huán)節(jié)，記錄下微信小程序登錄流程

二、登錄流程

2.1、微信官方文檔登錄流程圖

官網(wǎng)地址??：小程序登錄 | 微信開放文檔

說明

1、調(diào)用?wx.login()?獲取?臨時(shí)登錄憑證code?，并回傳到開發(fā)者服務(wù)器。

2、調(diào)用?auth.code2Session?接口，換取?用戶唯一標(biāo)識 OpenID?、 用戶在微信開放平臺賬號下的唯一標(biāo)識UnionID（若當(dāng)前小程序已綁定到微信開放平臺賬號） 和?會話密鑰 session_key。

之后開發(fā)者服務(wù)器可以根據(jù)用戶標(biāo)識來生成自定義登錄態(tài)，用于后續(xù)業(yè)務(wù)邏輯中前后端交互時(shí)識別用戶身份。

2.2、認(rèn)識code，OpenID，UnionID

①code

臨時(shí)登錄憑證 code：用戶使用微信登錄小程序時(shí)，小程序后臺會生成一個(gè)臨時(shí)登錄憑證 code。

注意：每個(gè)code只能使用一次，具有一定的有效期，一般為5分鐘左右。需要將該憑證發(fā)送到微信服務(wù)器進(jìn)行驗(yàn)證和換取用戶唯一標(biāo)識。

②OpenID

用戶唯一標(biāo)識 OpenID：用戶唯一標(biāo)識 OpenID 是在用戶授權(quán)登錄后，通過臨時(shí)登錄憑證 code 換取的。

注意：每個(gè)微信用戶在同一個(gè)小程序中的 OpenID 是唯一的，不同的小程序之間的 OpenID 是不同的?？梢愿鶕?jù)用戶的 OpenID 進(jìn)行用戶數(shù)據(jù)的存儲和管理。

③UnionID

唯一標(biāo)識 UnionID：UnionID 是一個(gè)在同一個(gè)開放平臺賬號下的多個(gè)關(guān)聯(lián)公眾號、小程序和移動(dòng)應(yīng)用中，對一個(gè)用戶的唯一標(biāo)識。

注意：如果一個(gè)用戶在多個(gè)公眾號、小程序和移動(dòng)應(yīng)用中都授權(quán)登錄過，并且在開放平臺賬號中將這些應(yīng)用綁定到同一個(gè)開放平臺賬號下，那么這些應(yīng)用就可以通過 UnionID 來進(jìn)行用戶數(shù)據(jù)的互通與關(guān)聯(lián)。

三、具體實(shí)現(xiàn)

3.1、獲取code

在登錄頁面點(diǎn)擊按鈕，利用wx.login()獲得code

3.2、將code傳遞給服務(wù)器

備注：

getBindSocial()是封裝的api接口，將code傳遞給接口之后，會得到openid，unionid，phone等。如下圖?

3.3、將獲得的unionid傳遞給接口獲得token

備注：

wxLogin_api()是封裝的api接口，傳遞unionid之后后端會返回一個(gè)token，這個(gè)token將作為身份的唯一標(biāo)識。如下圖?

3.4、存儲token，跳轉(zhuǎn)到首頁

login(unionid, openid){

wxLogin_api({

openId: unionid,

projectId: ''

}).then(respon =>{

//如果返回的token不是undefined

if(respon.access_token != 'undefined'){

//整理接口返回的數(shù)據(jù)

let loginInfo = {

access_token: respon.access_token,

expires_in: respon.expires_in,

phone: this.phone,

projectIndex: 0,

houseIndex: 0,

houseData: [],

openid: openid,

unionid: unionid,

refresh_token: respon.refresh_token,

userId: respon.user_id

};

//持久化存儲

wx.setStorageSync('loginInfo', loginInfo);

wx.showToast({

title: '授權(quán)成功',

icon: 'success',

duration: 3000,

})

//跳轉(zhuǎn)到首頁

setTimeout(() => {

wx.reLaunch({

url:'/pages/index/index'

})

}, 2000);

}

})

}

3.5、登錄流程總結(jié)

1、獲得code：通過wx.login()獲取code

2、獲得token：將code傳遞給后端接口獲得openid和unionid，再將unionid傳遞給后端接口獲得token

3、本地存儲token：將token通過wx.setStorageSync()保存在本地存儲

4、用戶進(jìn)入頁面判斷token值：用戶下次進(jìn)入頁面時(shí)，會先通過wx.getStorageSync() 方法判斷token是否有值；如果有值，則可以請求其它數(shù)據(jù)，如果沒有值，則進(jìn)行登錄操作。

最后，?? ??? ??????

柚子快報(bào)邀請碼778899分享：微信小程序 實(shí)現(xiàn)登錄流程

http://yzkb.51969.com/

文章鏈接