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

微信小程序通过获取用户手机号实现登录

一、首先页面上引入button标签

//login.wxml
 <button  open-type="getPhoneNumber" type="primary" bindgetphonenumber="onGetPhoneNumber">
     <image class="wx-btn" src="../../assets/images/index/wx-btn.png" />
     <view>微信一键登录</view>
 </button>

二、获取步骤

1、获取code,一定要提前获取

onLoad(options) {
    wx.login({
      success(res) {
        if (res.code) {
          that.setData({
            code: res.code
          })
        } else {
          console.log('登录失败!' + res.errMsg)
        }
      }
    })
  },

2、获取session_key和解密手机号

onGetPhoneNumber(e) {
    if (e.detail.errMsg.indexOf('ok') != -1) {
      var that = this;
      getOpenId(this.data.code).then(rs => {
        var session_key = rs.data.session_key;
        //解密手机号
        var msg = e.detail.errMsg;
        var encryptedData = e.detail.encryptedData;
        var iv = e.detail.iv;
        wx.checkSession({
          success: function () {
            //这里进行请求服务端解密手机号 (session_key, encryptedData, iv)
            that.onLogin(session_key, encryptedData, iv)
          },
          fail: function (res) {
            console.log(res, '微信session已过期')
            that.getNewSession().then(session_key => {
              that.onLogin(session_key, encryptedData, iv)
            }, error => {
              Toast('获取数据失败');
            })
          }
        })
      })
    } else {
      let errMsg = e.detail.errMsg;
      console.log('获取密文向量失败', errMsg);
      if (errMsg.indexOf('deny' != -1)) {
        errMsg = "您已拒绝,请重新点击并授权登录"
      }
      if (errMsg.indexOf('bind' != -1)) {
        errMsg = "请先绑定后,再次点击并授权登录"
      }
      Toast(errMsg);
    }
  },
  //重新获取code
  getNewSession() {
    return new Promise((resolve, reject) => {
      wx.login({
        success(res) {
          if (res.code) {
            getOpenId(res.code).then(rs => {
              resolve(rs.data.session_key)
            })
          } else {
            console.log('登录失败!' + res.errMsg)
            reject(res.errMsg)
          }
        }
      })
    })
  },
 //登录
  onLogin(session_key, encryptedData, iv) {
    wxLogin({
      sessionKey: session_key,
      encryptedData,
      iv
    }).then(rs => {
      if (rs.data) {
        local.setSync("token", rs.data.token)
        local.setSync("userInfo", rs.data)
        this.uploadStore()
        //连接webScoket
        ws_connect(rs.data.id);
        //判断用户类型
        if (rs.data.type == 2) {
          wx.switchTab({
            url: '/pages/index/index'
          });
        } else {
          wx.switchTab({
            url: '/pages/mIndex/mIndex'
          });
        }
      } else {
        Dialog.alert({
          title: '提示',
          message: '系统不存在该用户,请联系管理员',
        }).then(() => {
          // on close
        });
      }
    })
  },
### 微信小程序获取用户手机号方法 在微信小程序环境中,为了安全性和隐私保护,获取用户手机号需遵循特定流程并满足一定条件。具体来说,在开发过程中应确保小程序已经过微信平台的开发者资质认证,并且所使用的微信小程序基础库版本支持此功能[^1]。 对于前端部分,当需要请求用户授权提供电话号码时,可以利用`<button>`组件配合属性`open-type="getPhoneNumber"`来创建触发授权操作的按钮。一旦用户点击该按钮并授予许可,则可通过事件处理函数接收加密的数据包。下面是一个简单的HTML结构实例用于发起获取手机的操作: ```html <button open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">点击获取手机号</button> ``` 而后台逻辑方面,从前端接收到的信息里包含了经由微信服务器签名过的cipherData字段以及iv向量参数。这些信息单独来看并没有实际意义;只有将其发送给后端服务并通过合法途径调用微信提供的解密API才能得到真实的手机号码。这一步骤涉及到敏感数据的安全传输与存储,因此务必按照官方文档指导实施[^3]。 此外,值得注意的是整个过程依赖于用户的明确同意——即他们必须主动选择分享自己的联系方式给应用使用。这意味着应用程序应当清晰地告知用户为何要收集这项资料及其预期用途,从而建立信任关系。 最后附上一段简化版的JavaScript代码片段作为参考,展示了如何定义上述提到的`handleGetPhoneNumber()`回调函数: ```javascript Page({ handleGetPhoneNumber(e) { const { detail: { encryptedData, iv }} = e; // 将encryptedData 和 iv 发送到后台进行解密处理... wx.request({ url: 'https://yourserver.com/api/decryptPhone', method: 'POST', data: { encryptedData, iv }, success(res){ console.log('Decrypted phone number:', res.data.phoneNumber); } }); } }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值