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

1. 小程序登錄機制

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

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

小程序登錄時序圖

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

簡單的說核心步驟有兩點：

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

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

注意事項：

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

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

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

通常小程序登錄都是在放在app實例中進行，我們的眼查查小程序也不例外。

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