“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

1, the background

When using third-party wechat applets, it is often necessary to obtain wechat mobile phone numbers, as shown in the figure below:

​​​

So how does that work? The method of obtaining wechat mobile phone number is recorded below.

** Note: ** needs to have a wechat program number, and this number is authenticated by the enterprise. (The function of obtaining the mobile phone number does not take effect on the personal itinerary number)

So let’s get started on the programming journey of getting the phone number.

2. Code implementation

2.1 New Construction project

In the app. The json file added in “pages/getphonenumber/getphonenumber”, as shown in the figure below:

​​​

2.2 Obtaining ciphertext Parsing Tools

To obtain the mobile phone number through the interface provided by wechat mini program, the returned data is encrypted, so it is necessary to decrypt the returned encrypted data.

1) Create a terminal

In the wechat developer tool, click “Terminal” – “New Terminal” as shown below:

​​​

2) Execute the NPM init command

// After executing NPM init, you need to enter some information. Just keep hitting enter

As shown below:

​​​

3) Execute NPM install crypto-js –save and NPM install js-base64 –save respectively

As shown below:

​​​

4) Build NPM

In the menu bar of wechat development tools, choose “Tools” – “Build NPM”.

2.3 Parsing class implementation

Create a new wxbizDatacrypt. js file under the utils folder of the project. The code implementation is as follows:

var CryptoJS = require("crypto-js"); var Base64 = require("js-base64"); Analytical data encryption function / / decode (sesionKey, iv, data) {var key = CryptoJS. Enc. Base64. Parse (sesionKey); var iv = CryptoJS.enc.Base64.parse(iv); var decrypt = CryptoJS.AES.decrypt(data, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return Base64.decode(CryptoJS.enc.Base64.stringify(decrypt)); } module.exports = { decode }Copy the code

2.4 Obtaining the mobile phone number code

2.4.1 Implementation of getPhonenumber.js

Note: appId and secret need to be replaced by their own small program

// pages/getphonenumber/getphonenumber.js const WXBizDataCrypt = require('.. /.. /utils/WXBizDataCrypt'); Page ({/ * * * * / data Page of the initial data: {phoneNum: ", sessionKey: "', openId:" ',}, function / * * * life cycle - listening Page load * / onLoad: function (options) { this.getSessionKey(); }, getPhoneNumber: function(e){ if (e.detail.errMsg == "getPhoneNumber:fail user deny") { wx.showToast({ title: 'Refused authorization, can not obtain the user's mobile phone number! ', }) return; } / / decrypt data access to mobile phone number. The decryptData (this. Data. SessionKey, e.d etail. Iv, e.d etail. EncryptedData); GetSessionKey: function(){wx.login({success:res =>{console.log('code:'+res.code); Var data = {' appid ':' * * * * * * * * * * * ', / / appid, secret need to be replaced for their own small program 'secret' : '* * * * * * * * * * * * * * * * * * * * * * * * * *'. 'js_code':res.code, 'grant_type':'authorization_code' }; wx.request({ url:'https://api.weixin.qq.com/sns/jscode2session', data:data, method:'GET', success:res =>{ console.log("jscode2session result: ",res); this.setData({ sessionKey:res.data.session_key, openId: Res.data.openid})}, fail:function(res){console.log(" get jscodeSession fail: ",res); }})})}, // decryptData decryptData: function(key,iv,encryptedData){ var processData = WXBizDataCrypt.decode(key,iv,encryptedData); Console. log(" Decrypt data: ",processData); var jsonObj = JSON.parse(processData); this.setData({ phoneNum: jsonObj['phoneNumber'] }) }, })Copy the code

Getphonenumber 2.4.2. WXML implementation

<! --pages/getphonenumber/getphonenumber.wxml--> <button type="primary" bindgetphonenumber="getPhoneNumber" </button> <text> {{phoneNum}}</text>Copy the code

At this point, the coding process is complete. Note: JSCOde2Session is normally obtained on the server side. Here I have obtained the sessionKey on the applet side. Refer to the applets official website link:

3. Operation effect drawing

Click to obtain mobile phone number: