WeChat applet to obtain mobile phone number step record

Preface

Recently, I encountered such a problem when developing a small program. When the user clicks on authorization and tries to decrypt the mobile phone number, it fails the first time but succeeds the second time. After studying for a while, I finally found a more reasonable solution. I record and summarize it here, hoping it can help everyone.

Requirement Description

After the user clicks the Get Phone button, the phone number set by the user in WeChat is decrypted and displayed in the contact phone input box

Specific code

      <view class="cu-form-group">
            <view class="title text-black">Contact phone number</view>
            <input class="radius" name="mobile" placeholder="Please enter your contact number" value="{{detail.mobile}}" bindinput="onInputMobile"></input>
            <button bindgetphonenumber="getPhoneNumber" class="cu-btn line-blue sm" openType="getPhoneNumber">Get phone number</button>
        </view>

First, you need the applet button component and set openType="getPhoneNumber"

    onLoad: async function () {
        this.getSessionKey()
    },
    async getSessionKey() {
        const { code } = await wx.login()
        const res = await Index.getSessionKey({
            code
        })
        if (res.code == 1) {
            this.setData({
                session_key: res.data
            })
        }
    },
    getPhoneNumber: async function (e) {
        if (e.detail.errMsg === "getPhoneNumber:ok") {
            const res = await Index.getPhone({
                iv: e.detail.iv,
                encryptedData: e.detail.encryptedData,
                session_key: this.data.session_key
            })
            if (res.err == 0) {
                wx.showToast({
                    title: 'The network is a little bit unstable, please click to try again',
                    icon: 'none'
                })
                return
            }
            const detail = this.data.detail
            detail.mobile = res.err.phoneNumber
            this.setData({
                detail
            })
        } else if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
            wx.showModal({
                title: 'Tips',
                content: 'You have refused authorization, please click again and authorize',
                showCancel: false,
                confirmText: "Got it"
            })
        }
    },

Get the login code during the onLoad lifecycle and send the code to the server to get the session_key

Please refer to the official documentation of the mini program to obtain the session_key on the server side.

After the user clicks the Get Phone button, the session_key and the obtained iv, encryptedData are sent to the server for decryption.

This way you can get the user's mobile phone number.

pit

Our previous solution was to call wx.logon() directly in the getPhoneNumber function after the user clicked the Get Phone Number button, and send the code, iv, and encryptedData to the server. The server first used the code to obtain the session_key, and then combined it with iv and encryptedData for decryption. In this way, the first decryption would fail, and then clicking the button again to call the decryption interface would succeed. And the situation will reoccur every 5-6 minutes.

When calling wx.checkSession(Object object) to check whether the login state has expired, it is always successful.

guess

Later I thought about it, why can't I call wx.login in the getPhoneNumber function, and then the server uses the code to exchange for session_key, and then combines it with iv to decrypt encryptedData? What about putting wx.login into onLoad to get session_key?

I think the session_key of the WeChat server will be refreshed when wx.login is called. If wx.login is called directly in getPhoneNumber, the WeChat server may not have time to refresh it, and the server will use it for decryption. The session_key that expired last time is still used for decryption, so it will only succeed after the second time. If wx.login is placed in onload, session_key can be obtained in time.

Summarize

This is the end of this article about the pitfalls of obtaining mobile phone numbers through WeChat mini-programs. For more relevant content about obtaining mobile phone numbers through WeChat mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!