HawkLu92
HawkLu92
  • 发布:2020-06-19 16:13
  • 更新:2024-02-20 15:40
  • 阅读:48904

uniapp开发微信小程序获取用户手机号

分类:uni-app

uniapp开发微信小程序获取用户手机号

功能描述:微信小程序,点击微信第三方登录,获取到当前用户绑定的手机号与openId(或unionid),请求后端接口实现登录。

功能拆分逻辑:

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

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


创建getPhoneNumber按钮

依据微信小程序开发文档描述,小程序官方文档,先写一个button按钮,open-type 设为 getPhoneNumber,在uniapp页面中创建按钮:

代码示例

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

:warning:注意:
小程序官方的写法如下,但我们在uniapp想要触发按钮点击,并进行后续操作的话,建议使用上面的写法。

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

调用 wx.login 接口,获取code

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

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

code 换取 sessionopenId

在获取到登录成功后微信返回的 code 后,我们要用 code 换取 sessionopenid/unionid
换取方式有两种:

  1. 第一种不借助后端(不推荐)
  2. 第二种借助后端

1.不借助后端获取

不借助后端获取,就是你必须知道你小程序的 APPIDsecret,这个可以在 小程序控制台->开发->开发设置 中看到,然后用 APPID secret 以及上一步获取到的 code 请求微信的 auth.code2Session 接口,获取 sessionopenid auth.code2Session文档

:warning:这样做的话你的小程序的 APPID 和 secret会明文出现在前端代码中,有泄漏风险

改造上面的onload事件
代码示例:

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)  
            }  
        }  
    })  
}

:warning:注意:
1.如果请求 jscode2session 接口失败,请在你的 小程序后台【request合法域名】中添加https://api.weixin.qq.com
2. unionid 并不是每个账号都会返回,必须要在满足 UnionID 下发条件的情况下会返回,详见 UnionID 机制说明

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     //加密算法的初始向量  时要用到  
        }  
    }  
}

控制台打印出来的加密信息:
image

解密用户信息

用户信息我们拿到了,加密的,接下来我们如何解密呢?
解密方式主要有3种,第三种因为条件有限,我暂时无法尝试。主要还是讲讲前两种

  1. 前端解密
  2. 后端解密
  3. 云开发解密(只适用于开通云开发的小程序)

1.前端解密

(1) 安装 crypto-js

使用npm 安装 crypto-js

安装命令:

npm install crypto-js

(2)下载 WXBizDataCrypt.js 文件

WXBizDataCrypt.js微信官方下载地址

下载解压后你会发现原来是后端文件:grin::grin::grin:,没关系。
image

打开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就是最终解密的用户信息  
  
            //后续操作。。。  
              
        }  
    }  
}

解密后的用户信息:
image

前端解密会在前端有泄漏小程序APPID的风险
(因为我们的后端是java,官方没有dome文件,所以只能前端解密了) :sob::sob:

2.后端解密

后端解密就是同样的让后端创建一个接口,前端请求这个接口,提交 encryptedData ivsession_key 让后端给你返回解密后的信息。

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  
              
            //拒绝授权后弹出一些提示  
  
        }else{      //允许授权  
            uni.request({  
                url: 'https://www.xx123.com//common/decode.do',        //演示地址,请以你的后端接口为准  
                method:'POST',  
                data: {  
                    iv:e.detail.iv,  
                    encryptedData: e.detail.encryptedData ,             
                    session:this.session_key,         
                },  
                success: (res) => {  
                    console.log(res.data)       //res.data 即为后端返回的解密数据  
                }  
            });  
              
        }  
    }  
}

完整代码示例下载

index 页面为前端处理 ,page2 页面为后端处理

21 关注 分享
昨夜悟空 1***@qq.com 4***@qq.com g***@foxmail.com QiuFel 5***@qq.com 2***@qq.com 苛学加 unicorn_up WJL kuload 老火 上官伊萱 天腾 2***@qq.com 1***@qq.com asprain t***@yeah.net 外星人都夸我 786395613 1***@qq.com

要回复文章请先登录注册

jasonDev

jasonDev

谢谢大佬指点。用python代码,顺利解密出手机号明文了。前端请求https://api.weixin.qq.com的方法,失效了。在小程序后台无法配置这个白名单
2024-02-20 15:40
bigworms

bigworms

您好,您能把帖子《uniapp开发微信小程序获取用户手机号》中的完整代码发我一下吗?链接失效了
2023-04-20 12:47
5***@qq.com

5***@qq.com

正式需要的教程。
2023-03-28 13:07
1***@qq.com

1***@qq.com

回复 s***@163.com :
我也是这样的情况
2022-07-25 17:50
1***@qq.com

1***@qq.com

跟着一步一步走,为啥点击button直接就跳出来个unfined? 这是什么原因
2022-07-25 17:49
此地无银三百两

此地无银三百两

回复 此地无银三百两 :
前端处理的方法别试了,request合法域名,不允许你添加的,白搭
2022-06-15 11:50
此地无银三百两

此地无银三百两

:warning:注意:
1.如果请求 jscode2session 接口失败,请在你的 小程序后台【request合法域名】中添加https://api.weixin.qq.com
2022-06-15 11:50
信赖的阿涛

信赖的阿涛

获取手机号的弹窗里的文字描述怎么增加
2022-04-26 17:18
IDyun

IDyun

https://uniapp.dcloud.io/api/other/getAccountInfoSync

const accountInfo = uni.getAccountInfoSync();
console.log(accountInfo.miniProgram.appId); // 获取小程序 appId
2021-08-04 20:27
s***@163.com

s***@163.com

为什么按照步骤走在uniapp里请求的是undefined。用的是没有后端的请求方式,请求回来的数据下面这些字段一个没有
openid :"" ,//openid 用户唯一标识
unionid :"" ,//unionid 开放平台唯一标识
session_key:"",
2021-07-20 16:15