一、登錄原理
1、調(diào)用wx.login獲得 code
- WXML
<view> <text>第1步：</text> <button type="primary" bindtap="wxlogin" size="mini">微信登錄</button> </view>
- JS
// 第1步：微信登錄, 得到code
wxlogin() {
wx.login({
success: (res) => {
console.log("微信登錄", res);
this.setData({
code: res.code
})
},
fail(err) {
console.log(err);
}
})
},
2、獲取客戶信息,wx.getUserInfo (要先授權(quán)), 獲得 encryptedData,iv
官方文檔說明
（因?yàn)槲⑿殴俜娇紤]到用戶隱私，所以關(guān)閉了用戶進(jìn)入小程序時自動彈出獲取用戶信息的接口，只能通過button綁定getuserinfo事件來獲取用戶信息）
- WXML
<view> <text>第2步：</text> <button type="warn" open-type="getUserInfo" bindgetuserinfo="getUserInfo" size="mini"> 獲取用戶授權(quán)信息 </button> </view>
- JS
// 第2步： 獲取用戶授權(quán)信息，得到encryptedData，iv
getUserInfo(event) {
console.log("用戶授權(quán)信息", event.detail);
let detail = event.detail;
this.setData({
encryptedData: detail.encryptedData,
iv: detail.iv
})
},
3、調(diào)用login接口,傳入code,encryptedData,iv, 后臺返回獲得token
- WXML
<view> <text>第3步：</text> <button type="primary" bindtap="login" size="mini">登錄（我們自己的服務(wù)器）</button> </view>
- JS
// 第3步：登錄（我們自己的服務(wù)器）
login() {
let url = "/user/login";
let data = {
code: this.data.code,
encryptedData: this.data.encryptedData,
iv: this.data.iv
}
App.$http.post(url, data, true).then(res => {
console.log("登錄", res);
// 第4步，把后臺返回的token存到本地緩存
try {
wx.setStorageSync('token', res.user.token)
} catch (e) { }
})
},
二、一鍵登錄（三合一）
- XML
<button open-type="getUserInfo" bindgetuserinfo="login" type="default" size="mini" class='f14 ml-10'> 立即登入 </button>
- JS
// 一鍵登錄
login(event) {
// 1、獲取 encryptedData, iv
let { encryptedData, iv } = event.detail;
// 微信登錄
wx.login({
success: (res) => {
// 2、獲取code
let code = res.code;
// 3、登錄后臺服務(wù)器
let url = "/user/login";
let data = { encryptedData, iv, code }
app.$http.post(url, data, true).then(res => {
console.log("登錄成功", res);
this.setData({
token: res.user.token
})
// 4、把token存到本地緩存
try {
wx.setStorageSync('token', res.user.token)
} catch (e) { }
})
}
})
},
三、授權(quán)
wx.authorize()
- 舉個栗子
onLoad: function (options) {
// 查看用戶是否授權(quán)
wx.getSetting({
success(res) {
console.log("錄音授權(quán)", res.authSetting['scope.record'])
let record = res.authSetting['scope.record'];
if (!record) {
wx.authorize({
scope: 'scope.record',
success() {
// 用戶已經(jīng)同意小程序使用錄音功能，后續(xù)調(diào)用 wx.startRecord 接口不會彈窗詢問
wx.startRecord()
}
})
}
}
})
},
