微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機號

更新時間：2022年07月24日 11:44:40 作者：癡心阿文

最近改了一個公司項目,新增加了一個獲取用戶手機號功能,里面用到了關于獲取用戶信息和用戶手機號的功能,下面這篇文章主要給大家介紹了關于微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機號的相關資料,需要的朋友可以參考下

先看一下小程序的登陸流程
第一步，調(diào)用微信登陸方法 wx.login() 獲取臨時登錄憑證code ，并回傳到開發(fā)者服務器。
?????第二步，獲取用戶信息，點擊事件，獲取用戶授權(quán)，用戶同意后然后返回信息
??第三步，獲取用戶手機號
結(jié)束語

先看一下小程序的登陸流程

使用說明注意：

調(diào)用 auth.code2Session 接口，換取用戶唯一標識 OpenID 、用戶在微信開放平臺帳號下的唯一標識UnionID（若當前小程序已綁定到微信開放平臺帳號）和會話密鑰 session_key。

之后開發(fā)者服務器可以根據(jù)用戶標識來生成自定義登錄態(tài)，用于后續(xù)業(yè)務邏輯中前后端交互時識別用戶身份。

注意事項

會話密鑰 session_key 是對用戶數(shù)據(jù)進行加密簽名的密鑰。為了應用自身的數(shù)據(jù)安全，開發(fā)者服務器不應該把會話密鑰下發(fā)到小程序，也不應該對外提供這個密鑰。

臨時登錄憑證 code 只能使用一次

第一步，調(diào)用微信登陸方法 wx.login() 獲取臨時登錄憑證code ，并回傳到開發(fā)者服務器。

//微信登錄方法 wx.login()
 
//調(diào)用微信登錄方法 wx.login() 獲取臨時登錄憑證code ，并回傳到開發(fā)者服務器。
 
login() {
    wx.login({
        success: (ress) => {
            wx.request({
                url: '服務器后端接口',
                data: {
                    code: ress.code
                },
                success: (result) => {
                    console.log(result.data.openId); //獲取到openid
                }
            })
        }, fail: (error) => {
            console.log('登錄失??！' + error);
        }
    })
}

微信登錄的一些參數(shù)

?????第二步，獲取用戶信息，點擊事件，獲取用戶授權(quán)，用戶同意后然后返回信息

//利用后端接口獲取openid,獲取到自己系統(tǒng)賬號的id，當前小程序已綁定到微信開放平臺帳號,與微信號綁定，使得下次登錄微信賬號就跟小程序系統(tǒng)的賬號綁定。
 
//getUserProfile 方法
 
getUserProfile() {
    var that = this
    wx.getUserProfile({
        desc: '用于獲取用戶微信個人信息',// 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
        success: (res) => {
            wx.login({
                success: (ress) => {
                    wx.request({
                        url: '服務器后端接口',
                        data:{
                            code:ress.code,
                        },
                        success: (result) => {
                            console.log(result.data.openId); //獲取到openid
                            wx.request({
                                url: '服務器后端接口',
                                data:{
                                    openId:result.data.openId,
                                },
                                success: (results) => {
                                    console.log(results.data.session_key);//拿到自己的系統(tǒng)賬號
                                },
                                fail: (errors) => {
                                    console.log(errors);
                                }
                            })
 
                        },
                        fail: (error) => {
                            console.log(error);
                        }
                    })
                }
            })
        },
        fail: (err) => {
            console.log(err)
        }
 
    })
}

??第三步，獲取用戶手機號

獲取用戶手機號流程如下：

wx.Login()方法 → 獲取登錄憑證(code)→將code發(fā)送到后端 → 后端拿到openid和session_key → 調(diào)用getPhoneNumber 方法 → 將 encryptedData 和 iv 傳給后端 → 后端獲得json

下面是官方獲取手機號介紹截圖

//獲取手機號 html代碼
 
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
 
//獲取微信用戶手機號方法  
 
getPhoneNumber (e) {
    console.log(e.detail.code)
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    wx.login({
        success:res =>{
            console.log(res.code);
            wx.request({
                url:'服務器后端接口',
                data:{
                   'encryptedData':e.detail.encryptedData,
                   'iv':e.detail.iv,
                   'codes':e.detail.code
                },
                method:'GET',
                header:{
                    'content-type':'application/json'
                },
                success:function(res){
                    wx.setStorageSync('PhoneNumber',res.data.phoneNumber);
                    console.log("手機號為" + res.data.phoneNumber)
                },
                fail:function(err){
                    console.log(err);
                }
            })
    })
  }

獲取手機號方法可選參數(shù)

參數(shù)	類型	說明
phoneNumber	String	用戶綁定的手機號（國外手機號會有區(qū)號）
purePhoneNumber	String	沒有區(qū)號的手機號
countryCode	String	區(qū)號

后端返回的數(shù)據(jù)

獲取得到的開放數(shù)據(jù)為以下 json 結(jié)構(gòu)：

{
    "phoneNumber": "13580006666",
    "purePhoneNumber": "13580006666",
    "countryCode": "86",
    "watermark":
    {
        "appid":"APPID",
        "timestamp": TIMESTAMP
    }
}