微信小程序授权手机号登录

一、获取手机号

1、授权登录

调用 wx.login 接口,获取code

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

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                // ...doSomething  
            } else {  
                console.log('登录失败！' + res.errMsg)  
            }  
        }  
    })  
}

2、code 换取 session 和 openId

改步骤现在需要在后端实现

必须知道你小程序的 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     //  会话密钥  
                    }  
                });  
            } else {  
                console.log('登录失败！' + res.errMsg)  
            }  
        }  
    })  
}

3、授权获取按钮

因微信官方要求，此类授权操作必须要按钮，由用户主动点击授权

uniapp写法

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权获取手机号</button>

微信官方写法

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

4、按钮点击触发事件

做完以上几个步骤后，我们终于可以拿到加密的用户信息了，在页面的 methods 中创建点击触发事件，注意判断一下用户是否拒绝授权

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
            //拒绝授权后弹出一些提示  
        }else{   
              //允许授权  
            console.log(e.detail.encryptedData)  
            e.detail.encryptedData      //加密的用户信息  
            e.detail.iv     //加密算法的初始向量  时要用到  
        }  
    }  
}

5、解密

下载 WXBizDataCrypt.js 文件(百度微信官方网站下载)

打开Node文件夹，把 WXBizDataCrypt.js 文件放入你的项目中。（比如我是放在我的common文件夹下）

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

注意：此处还是要用到小程序的APPID

// 注意：此处还是要用到小程序的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就是最终解密的用户信息  

            //后续操作。。。  

        }  
    }  
}