uniapp微信小程序用户授权问题（纯前端！）

╰+攻爆jí腚メ 2023-01-17 04:56 252阅读 0赞

# 获取微信绑定的手机号【繁琐】 #

## 前言 ##

微信获取用户手机号，和用户名以及头像，在微信api更新后，都需要用户主动触发授权事件！！！通俗来讲，必须以点击事件的形式触发授权弹框！！！获取微信头像和用户名是一个事件，获取手机号也是一个事件，若同时要获取微信用户的头像用户名手机号，那么最少需要两个按钮来让用户主动触发2次！！！

详情请看步骤代码：

## 第一步 ##

去微信公众平台拿到你的小程序的 AppID 和 AppSecret

链接 `https://mp.weixin.qq.com`  
![测试号][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70]

## 第二步 ##

调用 `uni.login`方法获取code

//获取code
    uni.login({ 
    	provider:'weixin',
    	uccess: (res) => { 
    		console.log(res)//此时的res中已经有code
    		//调用第三部步的方法获取openid和session_key
    		this.getOpenIdByJs(res.code,data=>{ 
    		this.userOther.openid=data.openid
    		this.userOther.session_key=data.session_key
    					})
    				}
    			})

## 第三步 ##

向微信发起请求拿到openid 和session\_key，**详情请看代码注释**  
请求路径 `https://api.weixin.qq.com/sns/jscode2session`

getOpenIdByJs(code,callback){ 
    	 let url = 'https://api.weixin.qq.com/sns/jscode2session'
    		 uni.request({ 
    			url:url,
    			data:{ 
    			appid:this.AppID,	  //你的appid 第一步拿到的
    			secret:this.AppSecret,//你的AppSecret 第一步拿到的
    			js_code:code, 		  //第二步拿到的
    			grant_type:'authorization_code'//写死的
    				},
    			success: (res) => { 
    				console.log(res)//打印看下res
    				allback(res.data)//为保持同步，将结果正在第二步回调
    				}
    			  })
    		},

## 第四步 ##

我们先看看微信的官方文档怎么说  
文档链接 `https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html`  
![文档描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 1]  
那么我们在页面上就要定义一个按钮来手动执行触发

**这是固定写法**\------点击会出现提示授权手机号弹框

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

定义点击按钮方法，此方法中的参数`e`中有对应的加密信息，出于对用户的隐私考虑，我们需要对数据`e.detail.encryptedData`进行解密

onGetPhoneNumber(e){ 
        console.log(e.detail.errMsg) //提示信息
        console.log(e.detail.iv)	//解密向量
        console.log(e.detail.encryptedData) //加密的手机号
    	},

## 第五步 解密 ##

解密，那么就必须有对应的解密包，微信的加密方式是根据ASE进行解密的，我们先去为微信下载官方的解密包  
下载链接：`https://developers.weixin.qq.com/miniprogram/dev/framework/openability/signature.html#%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%AF%86%E7%AE%97%E6%B3%95`

如图，点击后就可以下载了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 2]  
下载完成之后解压，小程序js环境，所以选中node中的js文件，其中是一个是demo简单的解密示例，一个是解密文件，将解密文件拿到项目中去。

![在这里插入图片描述][20210427095411739.png]

## 第六步 封装解密方法 ##

solveCode(encryptedData,iv){ 
    //加载你的解密文件，请注意路径
    const WXBizDataCrypt = require('../../utils/WXBizDataCrypt.js')
    //通过appId和session_key,创建解密对象
    var pc = new WXBizDataCrypt('你的appId','你的session_key')
    //解密并进行赋值
    var data = pc.decryptData(encryptedData,iv) //点击按钮获取到的参数
    console.log(data)  //打印 解密后的手机号
    }

## 第七步 调用解密方法进行解密 ##

如果没看懂，请详细看`第四步`和`第六步`

onGetPhoneNumber(e){ 
        console.log(e.detail.errMsg) //提示信息
        console.log(e.detail.iv)	//解密向量
        console.log(e.detail.encryptedData) //加密的手机号
        this.solveCode(e.detailencryptedData,e.detail.iv)//调用解密方法解密获取到的数据
    	},

# 获取微信用户名，头像【简单】 #

需定义事件，让用户手动触发！！！！！

uni.getUserProfile({ 
    		desc: '登陆卡卡号发客，户反馈是打',
    		success: (res) => { 
    			console.log("======================" +JSON.stringify(res) )
    					},
    		fail: (err) => { 
    			console.log("======================1" + JSON.stringify(err))
    					}
    				})

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70]: /images/20221022/b4f6ee00735f48b9b7098bf5fe30f5b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 1]: /images/20221022/26d09b17f9b4433f90952a19ebf43d46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUxMDc1MDU3_size_16_color_FFFFFF_t_70 2]: /images/20221022/24980561aef14cf0884697f483583400.png
[20210427095411739.png]: /images/20221022/8f99534d90034cc5941265399349b49b.png