2018年9月27日星期四
小程序獲取用戶手機號登錄
使用方法
需要將< button >組件open-type的值設置為getPhoneNumber,當用戶點擊并同意之后,可以通過bindgetphonenumber事件回調獲取到微信服務器返回的加密數據, 然后在第三方服務端結合session_key以及app_id進行解密獲取手機號。
<button open-type=“getPhoneNumber” bindgetphonenumber=“getPhoneNumber”>
注意:獲取微信用戶綁定的手機號,需先調用login接口。
在回調中調用 wx.login 登錄,可能會刷新登錄態。此時服務器使用 code 換取的 sessionKey 不是加密時使用的 sessionKey,導致解密失敗。建議開發者提前進行 login;或者在回調中先使用 checkSession 進行登錄態檢查,避免login 刷新登錄態。
通過bindgetphonenumber綁定的事件來獲取回調。回調的參數有三個,
errMsg:用戶點擊取消或授權的信息回調。
iv:加密算法的初始向量(如果用戶沒有同意授權則為undefined)。
encryptedData: 用戶信息的加密數據(如果用戶沒有同意授權同樣返回undefined)
encryptedData 解密后為以下 json 結構
App({
? ? onLaunch: function () {
? ? // 登錄
? ? wx.login({
? ? success: function (res) {
? ? var code = res.code;
? ? wx.request({
? ? url: 'https://*****.com',
? ? method: 'POST',
? ? data: {
? ? js_code: code
? ? }, //傳遞后臺code值
? ? header: {
? ? 'Accept': "*/*"
? ? },
? ? success: function (res) {
? ? var wechat = {
? ? openid: res.data.openid,
? ? thirdkey: res.data.session_key
? ? }
? ? wx.setStorage({? //返回openid session_key? 本地緩存
? ? key: 'wechat',
? ? data: wechat
? ? })
? ? }
? ? })
? ? },
? ? fail: function (res) {
? ? console.log("登陸失敗")
? ? }
? ? })
? ? }
})
//login.wxml
<button hover-class='btn_hover' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登錄</button>
// login.js
getPhoneNumber: function (e) {
? ? var that = this;
? ? // 拒絕授權
? ? if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
? ? wx.showModal({
? ? title: '提示',
? ? showCancel: false,
? ? content: '未授權您將無法登陸',
? ? success: function (res) { }
? ? })
? ? } else {
? ? // 接受授權
? ? wx.getStorage({
? ? key: 'wechat',
? ? success: function (res) {
? ? var openid = res.data.openid; //openid
? ? var thirdkey = res.data.thirdkey; //session_key
? ? wx.request({
? ? url: 'https://www.*****.com',
? ? method: 'POST',
? ? data: {
? ? encryptedData: e.detail.encryptedData,
? ? iv: e.detail.iv,
? ? openid: openid,
? ? thirdkey: thirdkey
? ? },
? ? header: {'Accept': "*/*"},
? ? success: function (res) {
? ? console.log("提交到服務器成功了~~~~手機號登錄")
? ? console.log(res.data)
? ? },
? ? fail: function (res) {
? ? console.log("提交到服務器失敗了")
? ? }
? ? })//end of wx.request
? ? }
? ? })
? ? }
}