uni-app 微信小程序获取手机号并解密

功能拆分逻辑：

1、 点击某个按钮，弹出请求微信授权界面。
2、点击允许按钮，获取用户微信绑定的手机号与openId
3、 请求后端接口，实现登录。

• 主要重点还是在前两步。我们来看一下实际的实现

uniapp 的写法

1:调用 uni.login 接口,获取

• 根据官方文档描述，要想获取加密的手机号码，必须要先登录，所以我们在页面的 onload 中调用微信登录接口,并获取code。

uni.login({
    provider:'weixin',
    success(data) {
        console.log(data);
        const code = data.code  
    },
    fail(err) {
        console.log(err);
    }
})

2:通过code获取session_key (https://mp.weixin.qq.com/)

微信公众平台--->登陆--->开发--->开发管理--->开发设置 查看APPID、secret

uni.request({
    url: 'https://api.weixin.qq.com/sns/jscode2session',
    method:'GET',
    data: {
    appid: '你的小程序的APPID',        //你的小程序的APPID
    secret: '你的小程序秘钥secret',    //你的小程序秘钥secret,  
    js_code: code,    //wx.login 登录成功后的code
    grant_type:'authorization_code'
    },
    success: (cts) => {
        console.log('获取信息',cts);  // 换取成功后 暂存这些数据 留作后续操作
        this.openid=cts.data.openid    //openid 用户唯一标识
        this.session_key=cts.data.session_key    //session_key  会话密钥
    }
});

3:得到以下必须参数

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">唤起授权</button>

onGetPhoneNumber(e){
    if(e.detail.errMsg == "getPhoneNumber:ok"){
        console.log("用户点击了接受")
        console.log(e.detail);
        let encryptedData = e.detail.encryptedData
        let errMsg = e.detail.errMsg
        let iv = e.detail.iv        
    }else{
        console.log("用户点击了拒绝")
    }   
}

4:下载WXBizDataCrypt.js文件https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

image.png

import WXBizDataCrypt from "@/common/WXBizDataCrypt.js"

在把上面获取的appid session_key encryptedData iv传入以下方法中，得到最后解密的信息

let pc = new WXBizDataCrypt('wx7d24281f633476fb',this.session_key);
let data = pc.decryptData(encryptedData , iv);  
console.log(data)       //data就是最终解密的用户信息  

解密后的信息

image.png