One-click uniapp applet to log in with mobile phone number

Table of contents

foreword

premise

Subsequent supplement ( ☆ )

foreword

Because to complete the WeChat login function, there are two options, the first is to use the WeChat ID and nickname to log in; the second is to use the mobile phone number to log in

premise

The prerequisite for logging in with a mobile phone number is that first, your appid is registered by the enterprise , and secondly, the administrator who manages the appid of the WeChat public platform must add your WeChat account to the project members .

Due to business needs, I can only choose to log in with my mobile phone number to view official documents

It can be seen that to use getPhoneNumber

But the premise is to get the code

Let's send a request in postman now and see the result

postman first step

url

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

Obtain the interface call credential getAccessToken

appid: with

AppSecret (small program key) does not need to be introduced to you

The picture below, I believe everyone will see it, and then click send to get the token

Now that the token can be obtained above, let's obtain the mobile phone number below

url

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

phone number getPhoneNumber

The acquisition of the code here is

 <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);
        }
        
    }

The result printed by e is:

renderings

Summarize

Just use the company registration, the authenticated appid and add your own WeChat to the project members. After joining successfully, there is also the setting for the administrator to start obtaining the mobile phone. It's that simple.

Add to

Code Follow up to see the follow-up supplementary code

  <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()
        }
      }    
       
     
    }

}

follow-up supplement

full code

The js file encapsulates a method because the subsequent payment needs to use the 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>