uniapp小程序之一键使用手机号登录

前言

前提

postman 第一步

效果图

总结

添加

后续补充（☆）

前言

因为要完成微信登录功能，这有两种选择，第一种就是使用微信号，昵称去登录；第二种就是使用手机号登录

前提

要使用手机号登录的前提就是首先，你的appid是企业注册的，其次就是，要让管理微信公众平台appid的管理员把你的微信号添加到项目成员 ，

由于业务的需求，我这边目前只能选择使用手机号登录，查看官方文档

可知要使用 getPhoneNumber

但前提是要获取 code

我们现在postman里面发送请求，看看结果

postman 第一步

网址

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

获取接口调用凭证 getAccessToken

appid：跟

AppSecret(小程序密钥) 就不需要给大家介绍了吧

下面这张图，相信大家看着也会，然后点击 send 获取到token

上面既然能获取到token了，那下面我们就获取手机号

网址

https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

手机号 getPhoneNumber

这里的code的获取就是

 <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">一键登录</button>


// 上面定义一个button事件,官网说,获取手机号只能通过定义button事件



// 在methods中定义

 onGetPhoneNumber(e) {
        if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  
          //拒绝授权后弹出一些提示  
        } else { //允许授权
          console.log(e);
        }
        
    }

e打印出来的结果就是：

效果图

总结

只要使用公司注册，认证好的 appid 以及把自己的微信加入项目成员，加入成功后吗，还有让管理员开始获取手机的设置，就可以了，就这么简单

添加

代码后续看后续补充代码

  <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
        一键登录
      </button>


export default {

    
    methods：{
         
       // 手机号
      async onGetPhoneNumber(e) {
        console.log(e, '打印手机号信息');
        if (e.detail.errMsg == "getPhoneNumber:ok") {
          this.errMsg = e.detail.errMsg
          const {
            data: {
              obj,
              resCode
            }
          } = await uni.$http.post('/uniapp/member/wechatLogin', {
            code: e.detail.code
          })
          console.log('手机号的token:', resCode, obj.memberToken, '手机号');
          // this.updateToken(obj.memberToken) 存token 
          if ('00100000' !== resCode) return uni.$showMsg()
        }
      }    
       
     
    }

}

后续补充

完整代码

js文件因为后续支付需要使用到 code 因此封装了一个方法

function code() {
  let codePay = new Promise((resolve, reject) => {
    uni.login({
      provider: 'weixin',
      success: res => {
        resolve(res.code)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
  return codePay
}


module.exports = {
  code
}

<template>
  <view>
    <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
      一键登录
    </button>
  </view>

</template>

<script>
  import {
    code
  } from '@/common/userInfo.js'
  export default {
    name: "my-login",
    data() {
      return {
        code: '',
        errMsg: '',
        appid: '',
      };
    },
    async mounted() {
      this.code = await code().then(data => {
        return data
      })
      console.log(this.code, '一进来就获取code');
    },
    methods: {
      // 手机号
      async onGetPhoneNumber(e) {
        let accountInfo = uni.getAccountInfoSync();
        this.appid = accountInfo.miniProgram.appId; // 小程序 appId
        console.log(this.appid);
        if (e.detail.errMsg == "getPhoneNumber:ok") {
          this.errMsg = e.detail.errMsg
          const {
            data: {
              obj,
              resCode
            }
          } = await uni.$http.post('/uniapp/member/wechatLogin', {
            code: e.detail.code,
            appId: this.appid,
            openIdCode: this.code
          })
          console.log('wechatLogin 一键手机号登录 手机号的token:', resCode);
          // this.updateToken(obj.memberToken)
          if ('00100000' !== resCode) return uni.$showMsg('登录失败')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  // background-color: #030917;
  .login-btn {
    position: fixed;
    bottom: 10%;
    width: 510rpx;
    margin: 0 118rpx 0 122rpx;
    background-color: #427cb2;
    color: #fff;
  }
</style>

uniapp小程序之一键使用手机号登录

前言

前提

postman 第一步

效果图

总结

添加

后续 补充

猜你喜欢

后续补充