微信小程序授权获取用户手机号

拼搏现实的明天。 2024-04-17 05:46 78阅读 0赞

**需要前端进行调用getPhoneNumber，后端需要配合写接口进行解密，然后返回手机号**

一.[先看官方文档][Link 1]

二.总结就是

1.获取微信用户绑定的手机号，需先调用wx.login接口。

2.wxml页面中使用button按钮触发，bindgetphonenumber绑定授权同意或者拒绝的回调函数

3.js文件中定义方法

// 授权获取手机号
      getPhoneNumber(e) {
        let encryptedData = e.detail.encryptedData; // 
        let iv = e.detail.iv
        // 
        var result = base64.CusBASE64.encoder(iv);
        var mobresult = base64.CusBASE64.encoder(encryptedData);
        
        this.bindPhoneFun(mobresult, result,)
      },

**注意**：返回的encryptedData和iv可能带有+这样的特殊符号，传值的时候需要先转码，然后后台解码，否则会报错，可以使用base64.js来实现

[备注字符串转base64方法连接][base64]

到这里都只是获取了微信返回的数据，接下来很重要，前端调用接口请求

// encryptedData： getPhoneNumber返回值
    // ,iv： getPhoneNumber返回值
    bindPhoneFun: function(encryptedData,iv){
    	// codestr ： wx.login返回的code码，可以在wx.login方法进行缓存，然后在授权页面获取缓存
    	wx.getStorage({
    	      key: 'regcode',
    	      success: function (res) {
    	        let codestr  = res.data;
    	        wx.request({
    		         url: requestUrl + '/group/bind?code=' + codestr + '&encryptedData=' + encryptedData+ '&iv=' + iv,
    		         success: function (res) {
    		           if (res.data.ret == 0) {
    		            console.log(res)
    		           }
    		         }
    		      })
    	       }
    	  })
    	
    }

获取得到的开放数据为以下 json 结构：

{
        "phoneNumber": "13580006666",
        "purePhoneNumber": "13580006666",
        "countryCode": "86",
        "watermark":
        {
            "appid":"APPID",
            "timestamp": TIMESTAMP
        }
    }

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
[base64]: https://blog.csdn.net/G_wendy/article/details/81118641