功能描述：微信小程序，点击微信第三方登录，获取到当前用户绑定的手机号与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
网友评论