功能描述：微信小程序，點擊微信第三方登錄，獲取到當前用戶綁定的手機號與openId（或unionid），請求后端接口實現登錄。
功能拆分邏輯：
1、 點擊某個按鈕，彈出請求微信授權界面。
2、點擊允許按鈕，獲取用戶微信綁定的手機號與openId
3、 請求后端接口，實現登錄。
- 主要重點還是在前兩步。我們來看一下實際的實現
uniapp 的寫法
<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">喚起授權</button>
微信小程序的官方寫法
- 但我們在uniapp想要觸發按鈕點擊，并進行后續操作的話，建議使用上面的寫法。
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
調用 wx.login 接口,獲取code
- 根據官方文檔描述，要想獲取加密的手機號碼，必須要先登錄，所以我們在頁面的 onload 中調用微信登錄接口,并獲取code。
onload(){
wx.login({
success: (res) => {
if (res.code) { //微信登錄成功 已拿到code
// ...doSomething
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
})
}
用 code 換取 session 和 openId
1、不借助后端獲取
- 不借助后端獲取，就是你必須知道你小程序的 APPID 和 secret，這個可以在 小程序控制臺->開發->開發設置 中看到，然后用 APPID secret 以及上一步獲取到的 code 請求微信的 auth.code2Session 接口，獲取 session 和 openid
onload(){
wx.login({
success: (res) => {
if (res.code) { //微信登錄成功 已拿到code
this.jsCode=res.code //保存獲取到的code
uni.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
method:'GET',
data: {
appid: 'wx********', //你的小程序的APPID
secret: 'xxxxxxxxxx', //你的小程序的secret,
code: res.code //wx.login 登錄成功后的code
},
success: (cts) => {
// 換取成功后 暫存這些數據 留作后續操作
this.openid=cts.data.openid //openid 用戶唯一標識
this.unionid=cts.data.unionid //unionid 開放平臺唯一標識
this.session_key=cts.data.session_key //session_key 會話密鑰
}
});
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
})
}
2.借助后端獲取
- 借助后端獲取實際上就是讓后端給你一個接口，你請求后端的接口，后端再去請求微信的 jscode2session,這樣你前端只需要提交code 就可以。APPID和secret都是保存在后端，不容易泄漏。
例如，我的后端開發了個接口 https://www.xx123.com//common/unionId.do,我只需要把上面代碼中的請求的地址和參數換一下就可以了。
onload(){
wx.login({
success: (res) => {
if (res.code) { //微信登錄成功 已拿到code
uni.request({
url: 'https://www.xx123.com//common/unionId.do', //演示地址，請以你的后端接口為準
method:'POST',
data: {
code: res.code //wx.login 登錄成功后的code
},
success: (cts) => {
// 換取成功后 暫存這些數據 留作后續操作
this.openid=cts.data.openid //openid 用戶唯一標識
this.unionid=cts.data.unionid //unionid 開放平臺唯一標識
this.session_key=cts.data.session_key //session_key 會話密鑰
}
});
} else {
console.log('登錄失??！' + res.errMsg)
}
}
})
}
按鈕點擊觸發事件 onGetPhoneNumber
做完以上幾個步驟后，我們終于可以拿到加密的用戶信息了，在頁面的 methods 中創建點擊觸發事件，注意判斷一下用戶是否拒絕授權
methods:{
onGetPhoneNumber(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用戶決絕授權
//拒絕授權后彈出一些提示
}else{
//允許授權
console.log(e.detail.encryptedData)
e.detail.encryptedData //加密的用戶信息
e.detail.iv //加密算法的初始向量 時要用到
}
}
}
解密用戶信息
1、前端解密
( 1 ) 使用npm 安裝 crypto-js
npm install crypto-js
（2）下載 WXBizDataCrypt.js 文件(百度微信官方網站下載)
image.png
打開Node文件夾，把 WXBizDataCrypt.js 文件放入你的項目中。（比如我是放在我的common文件夾下）
在需要解密的頁面引用該文件
import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
（3）調用解密
改造 onGetPhoneNumber 方法，注意此處還是要用到小程序的APPID
methods:{
onGetPhoneNumber(e){
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用戶決絕授權
//拒絕授權后彈出一些提示
}else{ //允許授權
let pc = new WXBizDataCrypt('wxXXXXXXX',this.session_key); //wxXXXXXXX為你的小程序APPID
let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);
console.log(data) //data就是最終解密的用戶信息
//后續操作。。。
}
}
}
（4）解密后的信息
image.png
