微信小程序開(kāi)發(fā)之登錄（微信小程序開(kāi)發(fā)登錄界面代碼）

1. 小程序登錄機(jī)制

若需要通過(guò)小程序獲取用戶的個(gè)人信息必須執(zhí)行小程序的登錄，通常做法是除了小程序登錄憑證外，開(kāi)發(fā)者為了安全會(huì)帶上自己的token來(lái)進(jìn)行開(kāi)發(fā)，以保證數(shù)據(jù)交互安全。

下圖是小程序官方提供的登錄流程時(shí)序圖：

小程序登錄時(shí)序圖

從上圖可以看出小程序的登錄是一個(gè)需要小程序前端開(kāi)發(fā)和后端開(kāi)發(fā)協(xié)同的一個(gè)過(guò)程。

簡(jiǎn)單的說(shuō)核心步驟有兩點(diǎn)：

1. 小程序調(diào)用wx.login()或者wepy.login()獲取登錄憑證code，并回傳給開(kāi)發(fā)者后臺(tái)

2. 開(kāi)發(fā)者后臺(tái)調(diào)用auth.code2Session接口，換取用戶信息。

注意事項(xiàng)：

1. 當(dāng)一次交互失敗后，小程序端必須重新全部執(zhí)行，不能拿上次的wx.login()返回的code繼續(xù)使用，這個(gè)code是一次性的。

2. 眼查查小程序登錄流程

目前我們有兩個(gè)小程序，眼查查小程序和員工版，其中員工版由于不跟微信進(jìn)行交互，無(wú)需記錄openId之類的數(shù)據(jù)，所以在實(shí)際開(kāi)發(fā)過(guò)程中，我們直接省略了小程序登錄這個(gè)步驟，使用的是用戶名和密碼換取token。而眼查查小程序則由于需要接入微信的其他能力，并需要進(jìn)行數(shù)據(jù)打通所以必須要進(jìn)行小程序登錄。

通常小程序登錄都是在放在app實(shí)例中進(jìn)行，我們的眼查查小程序也不例外。

async loginToServer() {

let res = await wepy.login();

let that = this

if (res.code) {

await api.getTokenNew({

auth: true,

method: ‘POST’,

query: {

grant_type: ‘weixin’,

wxcode: res.code

},

success: function (params) {

if (params.access_token) {

StorageUtils.getInstance().saveToken(params.access_token)

if (that.globalData.userInfo) {

that.updateNickNameAndAvatar()

}

that.queryDictionary()

}

},

fail: function (params) {

console.log(params)

}

})

}

}

3. 參考資料

1. https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html