With the popularity of WeChat Mini Programs, many applications require users to log in to provide better services. Obtaining the user's mobile phone number is one of the important steps to verify the user's identity and ensure account security. Therefore, in this article, we will introduce how to implement mobile phone number authorization login in the WeChat applet.
Step 1: Add mobile phone number authorization in the background of the applet
First, check the "Get phone number" option in the background development settings of the applet, and then perform corresponding settings and configurations, including adding information such as the AppID and key for the phone number login function.
Step 2: Call the phone number authorization interface in the front-end code
In the front-end code, the user's code value can be obtained through the wx.login() method, and sent to the server for request. The server side returns a JSON data containing session_key, which is the key needed to decrypt user data.
wx.login({
success: res => {
if (res.code) {
wx.request({
url: 'https://example.com/login',
data: {
code: res.code
},
success: res => {
// 解析 session_key
}
})
}
}
})
Then, use the wx.getUserInfo() method to obtain user information, including nickname, avatar, etc., and decrypt the user's mobile phone number through encryptedData and iv parameters.
wx.getUserInfo({
success: res => {
const encryptedData = res.encryptedData
const iv = res.iv
wx.request({
url: 'https://example.com/decrypt',
data: {
session_key: sessionKey,
encryptedData: encryptedData,
iv: iv
},
success: res => {
// 解密成功，获取到用户手机号码
const phoneNumber = res.phoneNumber
}
})
}
})
It should be noted that when obtaining the user's mobile phone number, it is necessary to cooperate with the front-end code and the server-side code to ensure the security and correctness of the data, so as to protect the user's privacy and account security.
Step 3: Process the authorization result
Finally, decide whether to jump to the next page or display a successful login prompt based on the authorization result.
wx.authorize({
scope: 'scope.phoneNumber',
success: res => {
// 用户同意授权
wx.showToast({
title: '登录成功'
})
// 跳转到下一个页面
wx.navigateTo({
url: '/pages/home/index'
})
},
fail: res => {
// 用户拒绝授权
wx.showToast({
title: '请允许获取手机号码'
})
}
})
It should be noted that in the processing of authorization results, the purpose and scope of authorization should be clearly informed to users to increase user trust and satisfaction.
Summarize
Through the above steps, we can obtain the user's mobile phone number to authorize login in the WeChat applet. In order to improve user experience and security, it is necessary to pay attention to data encryption and protection, as well as respect and protection of user privacy and rights. Hope this article helps you!