Article Directory
WeChat applet, phone number authorization login requirement.
The general process is as follows:
- Use the Mini Program
getPhoneNumberto obtain authorization from the WeChat platform - After being authorized by WeChat, the Mini Program receives the callback after WeChat authorization
- The applet carries the callback of WeChat to request its own server
- The server requests WeChat to obtain the mobile phone number and calls back the mobile phone number to the applet
applet
The specific steps and code are as follows:
first step:
<button class="login-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
<text>登录/注册</text>
</button>
It must be passed button 组件, open-type="getPhoneNumber", so that the user can manually click the button to obtain the mobile phone number.
Step 2:
The user clicks the button to agree to obtain the mobile phone number
Step 3:
After the user permits, get the code to obtain the mobile phone number through the callback method:
callback method:
getPhoneNumber(e) {
console.log(e)
const _this = this
wx.showLoading({
title: '',
})
if (e.detail.errMsg == "getPhoneNumber:ok") {
// 这里携带参数请求自己的服务器来获取手机号
// Code ...
}
}
Print the callback parameter e:
...
currentTarget:
dataset: {
}
id: ""
offsetLeft: 86
offsetTop: 34
__proto__: Object
detail:
cloudID: "69_7GVM-VkjQvoxxxoU5lW33XmDqsmxxxPazG6c5Rcfld-xxx"
code: "f446fxxx58250428xxxx017ffbdceb2b8xxx6c22948d6xxx3de52a"
encryptedData: "hY6Y+s9cxxx7t4rUWJcoQ3rf6PTnRr7/jSiK/iajrUkhZ6xxxYJ/nDLH5hIRDUwRrT0/FPxxxDVQdGO+3MBZQS8Pe1l9FPc6xxxQDLM2tR8CoyMLvGQ/ryt3mGJExxx1+kwnw+zqMsCBrV0KK6jcnlqWVhds8YjkRS30nroA=="
errMsg: "getPhoneNumber:ok"
iv: "C0mxz6xxx7qFxxxxPg=="
...
The new interface will return parameters such as cloudID, code, encryptedData, ivetc. together.
In the new version, the code is used by the background to obtain the mobile phone number. In the interface for obtaining the mobile phone number in the old version, the code will not be returned. If you use the old version, the and will be passed to the server, and the server will decrypt the encryptedDataencryptedData ivto Obtain a mobile number.
In the new version, the code is directly sent to the server, and the server first obtains the accessToken from the WeChat platform through the code and other parameters, and then uses the token to request the interface for obtaining the mobile phone number, and then returns the plain text mobile phone number to the applet end.
It is recommended to use the new method to obtain the mobile phone number.
Server
The server needs to call two interfaces:
- getAccessToken: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
Among these three parameters, the appid and secret need to be uploaded from the applet through the interface. In the callback when the user clicks "Allow" to obtain the mobile phone number, these parameters are uploaded to the server by requesting the interface of the server, and the server carries these parameters to obtain the access_token. The next step is to call the getPhoneNumber interface to obtain the token.
- getPhoneNumber: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
The server can use the code uploaded by the client and the token obtained from the previous step. Request WeChat to obtain the mobile phone number, and then return the mobile phone number to the applet after obtaining the mobile phone number.
Precautions
Need to pay attention:
3. Call in advance wx.loginto log in and obtain codethe authorization code
4. Note that the code returned by wx.login and the code obtained from the callback of the mobile phone number are not the same code, one is the WeChat authorization code, and the other is used for the server To obtain the authorization code code of the accessToken 5. The value of the parameter grant_type passed in the getAccessToken
interface of the server is not .client_credentialauthorization_code
Fee Description
The following content is excerpted from the official website interface documentation of the WeChat applet platform. Starting from August 26, 2023, a fee will be charged for calling mobile phone verification login.
收费说明
自2023年8月26日起，手机号快速验证组件将需要付费使用。标准单价为：每次组件调用成功，收费0.03元。更多套餐价格请见微信公众平台-付费管理。 购买操作指引。
请注意：
体验额度：每个小程序账号将有1000次体验额度，用于开发、调试和体验。该1000次的体验额度为正式版、体验版和开发版小程序共用，超额后，体验版和开发版小程序调用同正式版小程序一样，均收费；
资源包有效期：在2023年8月26日前购买的订单，资源包将于2023年8月26日生效；在2023年8月26日后购买的订单，资源包将于支付成功后即刻生效；各资源包将按购买时所选择的有效期，计算相应的到期失效时间；
资源使用顺序：默认先从体验额度中划扣，划扣完毕后再从付费资源包中划扣；若有多个付费资源包，将按资源包到期时间顺序，先从最近到期的资源包开始划扣，如此类推；
退款规则：若购买有误，且未正式开始使用资源包前，可以在支付成功后的7天内申请退款。款项将在3-5个工作日内从原支付路径返回；若资源包已经开始使用（使用1次及以上），则不能申请退款；若支付成功后超过7天，未发起退款申请，亦不能再申请退款。
For Mini Programs that meet one of the following conditions, there is no charge for using this capability, as follows:
- Mini Programs whose subject types are governments and non-profit organizations;
- The main type of account WeChat authentication is a public institution, and the category is a small program for government affairs and people's livelihood;
- Mini Programs whose account categories are public medical institutions and academic education (schools)
Developers can query the WeChat authentication subject type of a Mini Program in the following two ways:
Enter "WeChat Public Platform->Click on the account avatar in the upper right corner->You can view basic information->WeChat authentication subject type"
Or in Settings -> Basic Settings -> search for "WeChat Authentication Subject Type"