当前位置:   article > 正文

微信小程序手机号登录流程

微信小程序手机号登录


前言

前言:最近在用uni-app开发小程序,产品给到需求是默认登录绑定手机号。现在需要登录直接绑定手机号,所以研究了一下流程。看到网上有些文章写到getPhoneNumber拿回手机号,然后还需要触发wx.login拿回用户个人信息,其实给我前期造成了一些误解。自己写一篇文章记录一下。楼主用的uni-app,非此框架将相应的api换成wx开头即可


一、实现方法

调用getPhoneNumber拿回encryptedData和iv,然后静默调用uni.login拿回code,将这三个参数一起传给后台,让后台去调微信接口拿回session_key和openid,且解密出encryptedData里的手机号。 至此我们实现用户登录绑定手机号,至于用户头像、昵称,微信有开放数据,我们可以直接用代码获取。下面给出代码

二、使用步骤

1.唤起微信手机号授权

代码如下:

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">
    <div >微信用户一键登录</div>
</button>
  • 1
  • 2
  • 3
    getPhoneNumber(e){
        uni.login({
        success: (res) => {
          this.code = res.code;
          if (this.code) {
              console.log("验证登陆请求");
              if(e.detail.errMsg == "getPhoneNumber:ok"){
                  console.log("用户点击了接受", e)
                  this.phone = e.detail.encryptedData;
                  this.iv = e.detail.iv;
                  this.getAccessToken(); // 将code、phone、iv发给后台,让后台解密手机号,拿回openid和session
                }else{
                  console.log("用户点击了拒绝")
              }
          }
        },
        fail: () => {
            this.$refs.toast.hide();
            this.$refs.toast.error("登录失败!请重新授权登录!");
        },
      });
   },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

2.获取微信开放数据: open-data

获取open-data,这里只是举个例子拿用户头像
具体可以获取open-data的类型可以去官网查看,指路: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

<open-data type="userAvatarUrl" mode="aspectFill" v-else></open-data>
  • 1

总结

以上,用户只需要一次授权,就可以实现既绑定了手机号,又显示出头像和用户昵称。
参考文章:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
https://developers.weixin.qq.com/minigame/dev/guide/open-ability/login.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/466710
推荐阅读
相关标签
  

闽ICP备14008679号