美文网首页
微信小程序获取用户手机号码

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

作者: hao_developer | 来源:发表于2022-06-23 10:42 被阅读0次

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

  • 第一点击页面获取授权按钮
  • 第二获取用户授权参数
  • 第三根据加解密算法解密手机号码
    接下来我们来实现以上三步
    先看前端页面
<button class="authbtn"  open-type="getPhoneNumber" type="primary"
      bindgetphonenumber="onGetPhoneNumber">获取手机号码</button>

此处定义

getPhoneNumber是微信官方要求,获取用户手机号码授权

onGetPhoneNumber是回调函数,获取授权后会回调到该方法,也就是获取的电话号码就在这个函数的返回值里面。当然这个函数是自定义的,名字大家可以随便起,上面的getPhoneNumber可不能随便修改。

接下来我们通过服务器获取授权

onGetPhoneNumber(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)
        }
      }
    })
image.png
image.png

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

deciyption(sessionID,encryptedData,iv){
    var that = this;
    
    console.log("步骤4根据秘钥解密手机号码sessionID:",sessionID);
    wx.request({
      url: '解密地址',
      data: {
        sessionID: sessionID,
        encryptedData:encryptedData,
        iv: iv
      },
      header: {'content-type': 'application/json'},
      success: function(res) {
        console.log("79",(res.data.code==20001));
        if(res.data.code==20001){//这里不用管,可以删掉,我的框架里返回值20001是授权失败,可按照自己逻辑处理
          console.log("获取失败,重新获取",res);
          that.setData({
            showPhone:true,
           })
        }else{
          console.log("line 79", JSON.parse(res.data.data));
          var json= JSON.parse(res.data.data);
          wx.setStorageSync('userphone', JSON.parse(res.data.data).phoneNumber);
          console.log("步骤5解密成功",res.data.data);
          that.setData({
            showPhone:false,
            "userInfo.phone":wx.getStorageSync('userphone')
           })
        }
       
      },fail:function(res){
          console.log("fail",res);
      }
    })
  }

相关文章

网友评论

      本文标题:微信小程序获取用户手机号码

      本文链接:https://www.haomeiwen.com/subject/sdbpvrtx.html