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

在做小程序开发的过程中,经常会涉及到用户身份的问题,最普遍的就是要获取用户的手机号码,通过微信获取手机号码后可以减少很多操作,比如用户手机号码验证等,以及给用户发送提示短信等等。

※ 正常情况下,小程序可获取的公开信息有:昵称,城市,ip等公开信息,如果想要手机号等非公开信息,前提是需要已认证的非个人小程序账号。

小程序具有非常简洁的api,通过小程序内部封装,只要通过一个类型 调取他们的api方法,便可直接拉起授权。

接下来和大家聊聊,获取用户手机号码的api:getPhoneNumber

官方文档:developers.weixin.qq.com/miniprogram…

大致实现思路:

无标题.png

1687328383569.png

获取用户手机号码 分为以下几步:

第一步,点击页面获取授权按钮

第二步,获取用户授权参数

第三步,根据加解密算法解密手机号码

接下来我们来实现以上三步(包含前后端)

前端

代码:

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

只要在你的view里将此button放上,便可拉起授权。

分析:
open-type=“getPhoneNumber” 这个是官方给出的api。

bindgetphonenumber=“getPhoneNumber”,是调起授权框之后用户操作的回调 用户点击了拒绝还是接受,由此方法接收通知。

bindgetphonenumber:官方指定点击事件。 如果使用uniapp则需要改为@getphonenumber,并遵循uniapp开发规范。

至于getPhoneNumber

下面看代码

getPhoneNumber (e) {
var that = this;
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
      wx.showToast({
    title: '请绑定手机号',
    duration: 5000,
    icon: 'none',
      });
    } else {
}
 } 

getPhoneNumber:fail user deny 拒绝与否,这个是依据
※ 很多博客上写着 getPhoneNumber:user deny 缺少了fail 。

以下为获取手机号封装方法:

getPhoneNumber(e) {
var that = this;
wx.login({
  success (res) {
    if (res.code) {
      console.log('步骤2获检查用户登录状态,获取用户电话号码!', res)
      wx.request({
        url: '这里写自己的获取授权的服务器地址',
        data: {code: res.code},
        header: {'content-type': 'application/json'},
        success: function(res) {
          console.log("步骤三获取授权码,获取授权openid,session_key",res);
          var userphone=res.data.data;
          wx.setStorageSync('userphoneKey',userphone);
          //解密手机号
          var msg = e.detail.errMsg;
          var sessionID=wx.getStorageSync("userphoneKey").session_key;
          var encryptedData=e.detail.encryptedData;
          var iv=e.detail.iv;
          if (msg == 'getPhoneNumber:ok') {//这里表示获取授权成功
            wx.checkSession({
              success:function(){
                    //这里进行请求服务端解密手机号
                that.deciyption(sessionID,encryptedData,iv);
              },
              fail:function(){
                // that.userlogin()
              }
            })
          }

        },fail:function(res){
            console.log("fail",res);
        }
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
}) 

以上

e.detail.iv
e.detail.encryptedData

两个必传 传到后台 换取mobile

后端

不管是spring还是servlet只要请求能进到该方法即可,所以重点关注中间部分,把参数值传正确即可
1687329461422.png

工具类方法 WxUtil.doGetStr(url)

1687329536242.png

以上值可以返回给前端,前端可以收到三个参数:openid,session_key,expires_in。

接着我们通过授权之后,获取第三个参数iv,调用下面方法进行服务端解密

1687329672055.png

服务端解密代码参考:

1687329836867.png

deciphering解密方法参考:

1687329894328.png

以上

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYpFbE1b' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片