1. 程式人生 > >微信小程序登錄授權並獲取手機號

微信小程序登錄授權並獲取手機號

後臺 內容 vertica 9.png phone 事件 vertical 請求 src

一、請求發送 攜帶 code 到後臺換取 openid

var that = this;
    wx.login({
      success(res) {
        console.log(res);
        var code = res.code
        wx.request({
          url: ‘http://localhost/index/users/code2seesion‘,
          method: "post",
          data: {
            code
          },
          success: 
function (res) { console.log(res.data.openid); that.setData(res.data); } }) } })

解析:
1、第一步打印出 wx.login 成功回調後的res console.log(res),下面是打印出的內容

技術分享圖片

2、提取 code
var code = res.code;

3、發送 post 請求到後臺換取 openid 攜帶參數 data:{code} 打印成功回調console.log(res),下面是打印出的部分內容:

技術分享圖片

可以清楚的看到session_key、openid、errMsg;這些參數在接下來的操作中有著重要的作用;

4、保存data內容 裏面包含 openid 和 session_key :that.setData(res.data);

技術分享圖片

image.png

二、以上操作完成並將參數保存下來之後,就可以開始獲取手機號了:
~獲取手機號是有特殊按鈕類型

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號</button>

類型和點擊事件都是指定了


open-type="getPhoneNumber" "bindgetphonenumber="getPhoneNumber"

getPhoneNumber: function (e) {
    var that = this;
    console.log(e.detail.errMsg == "getPhoneNumber:ok");
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      wx.request({
        url: ‘http://localhost/index/users/decodePhone‘,
        data: {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          sessionKey: that.data.session_key,
          uid: "",
        },
        method: "post",
        success: function (res) {
          console.log(res);
        }
      })
    }
  },

1、可以打印出 自己是否允許授權 console.log(e.detail.errMsg == "getPhoneNumber:ok");

技術分享圖片

如果允許:true 如果拒絕:false

2、判斷用戶是點擊允許還是拒絕 這裏的請求 需求攜帶四個必備參數 ,可以打印出e.detail ~console.log(e.detail)

技術分享圖片

可以看到 encryptedData 、iv 接下來可以繼續了

if (e.detail.errMsg == "getPhoneNumber:ok")

如果為 true 就開始 post 請求後臺 攜帶上 encryptedData 、iv 、sessionKey 、uid

data: {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          sessionKey: that.data.session_key,
          uid: "",
        },

3、打印出成功的回調函數 success: function (res) {console.log(res);} 可以看到裏面有了~phoneNumber 手機號了

技術分享圖片

一、請求發送 攜帶 code 到後臺換取 openid

var that = this;
    wx.login({
      success(res) {
        console.log(res);
        var code = res.code
        wx.request({
          url: ‘http://localhost/index/users/code2seesion‘,
          method: "post",
          data: {
            code
          },
          success: function (res) {
            console.log(res.data.openid);
            that.setData(res.data);
          }
        })
      }
    })

解析:
1、第一步打印出 wx.login 成功回調後的res console.log(res),下面是打印出的內容


技術分享圖片 image.png

2、提取 code
var code = res.code;

3、發送 post 請求到後臺換取 openid 攜帶參數 data:{code} 打印成功回調console.log(res),下面是打印出的部分內容:


技術分享圖片 image.png

可以清楚的看到session_key、openid、errMsg;這些參數在接下來的操作中有著重要的作用;

4、保存data內容 裏面包含 openid 和 session_key :that.setData(res.data);


技術分享圖片 image.png

二、以上操作完成並將參數保存下來之後,就可以開始獲取手機號了:
~獲取手機號是有特殊按鈕類型

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號</button>

類型和點擊事件都是指定了
open-type="getPhoneNumber" "bindgetphonenumber="getPhoneNumber"

getPhoneNumber: function (e) {
    var that = this;
    console.log(e.detail.errMsg == "getPhoneNumber:ok");
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      wx.request({
        url: ‘http://localhost/index/users/decodePhone‘,
        data: {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          sessionKey: that.data.session_key,
          uid: "",
        },
        method: "post",
        success: function (res) {
          console.log(res);
        }
      })
    }
  },

1、可以打印出 自己是否允許授權 console.log(e.detail.errMsg == "getPhoneNumber:ok");


技術分享圖片 image.png

如果允許:true 如果拒絕:false

2、判斷用戶是點擊允許還是拒絕 這裏的請求 需求攜帶四個必備參數 ,可以打印出e.detail ~console.log(e.detail)


技術分享圖片 image.png

可以看到 encryptedData 、iv 接下來可以繼續了

if (e.detail.errMsg == "getPhoneNumber:ok")

如果為 true 就開始 post 請求後臺 攜帶上 encryptedData 、iv 、sessionKey 、uid

data: {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
          sessionKey: that.data.session_key,
          uid: "",
        },

3、打印出成功的回調函數 success: function (res) {console.log(res);} 可以看到裏面有了~phoneNumber 手機號了


技術分享圖片 image.png

作者:MicaSnaker
鏈接:https://www.jianshu.com/p/3d6c3c80813f
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並註明出處。

微信小程序登錄授權並獲取手機號