WeChat applet authorization to obtain mobile phone number

In the past few days, I have written a WeChat applet project. There is a need to obtain the mobile phone number and appid through authorization, so let’s not talk nonsense. Let me implement the specific function, the address is below

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

 Here I would like to tell you that at present, the mobile phone number obtained through the official website of the WeChat applet must be a non- personal developer, that is to say

Individual developers cannot use it. This sentence is very important.

• Currently, this interface is open to non-individual developers and mini programs that have completed certification (excluding overseas entities). Use with caution, if users report more or are found to be used in unnecessary scenarios, WeChat has the right to permanently revoke the interface permissions of the Mini Program;
• When using this interface, users can use WeChat-bound mobile numbers for authorization, and also add non-WeChat-bound mobile numbers for authorization. If the developer only uses the mobile phone number as the business association certificate, SMS verification logic can be appropriately added in key scenarios

 This is to obtain the appid and applet secret key, which will be used in the code

https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=734540778&lang=zh_CN

The recommended setting of the debugging basic library in the local settings of WeChat Mini Program Developer Tools is 2.21.4 , and problems may occur if the version is too high or too low.

 

// pages/telfrom/telfrom.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    code: "",
    access_token: "",
    phoneNumber: 0, //手机号
    appid: "" //微信小程序的appid
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token',//文档请求地址
      data: {
        grant_type: "client_credential",//这个是固定的
        appid: "",//小程序的appid 非个人开发者也就是说，个人开发者是使用不了的，这句话非常的重要。
        secret: ""//小程序的秘钥  非个人开发者也就是说，个人开发者是使用不了的，这句话非常的重要。
      },
      success: (res) => {
        console.log("get", res);
        this.setData({
          access_token: res.data.access_token
        })
      }
    })
  },
  getPhoneNumber(e) {
    this.setData({
      code: e.detail.code
    })
    wx.request({//微信小程序官方接口 文档里面有哈
      url: "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + this.data.access_token, //文档请求地址 需要传送两个参数 这个参数是要拼接地址的 参数一接口调用凭证
      method: "POST",
      header: {
        'content-type': 'application/json' //转换为json  参数2 需要转换json格式
      },
      data: {
        code: this.data.code //参数二
      },
      success: (res) => {
        console.log(res);
        this.setData({
          phoneNumber: res.data.phone_info.phoneNumber,//这个是获取到的手机号 
          appid: res.data.phone_info.watermark.appid //这个是获取到的appid
        })
        wx.request({//将获取到的手机号，和appid
          url: '',//url地址 后端程序员写的后台的接口 不是微信小程序的 
          method: 'post',
          data:{
            mobile:this.data.phoneNumber,
            open_id:this.data.appid
          }
        })
        console.log(this.data.phoneNumber);
        console.log(this.data.appid);
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */

})

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">点击获取手机号</button>

After testing the above code, it can run through. If there is something that I don’t understand or my description is not clear enough. Welcome to leave a message below, I will reply to you as soon as possible.

I hope everyone can solve the problem as quickly as possible, and welcome all friends who like programming to discuss and learn together.