微信小程序獲取手機號授權用戶登錄功能的案例

小編給大家分享一下微信小程序獲取手機號授權用戶登錄功能的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

小程序中有很多地方都會用到注冊用戶信息的地方，用戶需要填寫手機號等，有了這個組件可以快速獲取微信綁定手機號碼，無須用戶填寫。

1.getPhoneNumber這個組件通過button來實現(xiàn)（別的標簽無效）。將button中的open-type=“getPhoneNumber”,并且綁定bindgetphonenumber事件獲取回調。

<span style="font-size:14px;"><button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button></span>

2.在使用這個組件之前必須先調用login接口，如果沒有調用login點擊button時會提示先調用login。

App({  
  onLaunch: function () {  
    wx.login({  
      success: function (res) {  
        if (res.code) {  
          //發(fā)起網(wǎng)絡請求  
          console.log(res.code)  
        } else {  
          console.log('獲取用戶登錄態(tài)失?。?#39; + res.errMsg)  
        }  
      }  
    });  
  }  
})

3.通過bindgetphonenumber綁定的事件來獲取回調。回調的參數(shù)有三個，

errMsg：用戶點擊取消或授權的信息回調。

iv：加密算法的初始向量（如果用戶沒有同意授權則為undefined）。

encryptedData： 用戶信息的加密數(shù)據(jù)（如果用戶沒有同意授權同樣返回undefined）

getPhoneNumber: function(e) {   
  console.log(e.detail.errMsg)   
  console.log(e.detail.iv)   
  console.log(e.detail.encryptedData)   
  if (e.detail.errMsg == 'getPhoneNumber:fail user deny'){  
   wx.showModal({  
     title: '提示',  
     showCancel: false,  
     content: '未授權',  
     success: function (res) { }  
   })  
  } else {  
   wx.showModal({  
     title: '提示',  
     showCancel: false,  
     content: '同意授權',  
     success: function (res) { }  
   })  
  }  
 }

4.最后我們需要根據(jù)自己的業(yè)務邏輯來進行處理，如果用戶不同意授權的話可能我們會有一個讓他手動輸入的界面，如果不是強制獲取手機號的話可以直接跳轉頁面進行下一步。（用戶不同意授權errMsg返回‘getPhoneNumber:fail user deny'）

5.用戶同意授權，我們可以根據(jù)login時獲取到的code來通過后臺以及微信處理拿到session_key，最后通過app_id，session_key,iv,encryptedData（用戶同意授權errMsg返回‘getPhoneNumber:ok'）

又學會一種小程序功能，希望能幫助到大家。

以上是“微信小程序獲取手機號授權用戶登錄功能的案例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！