Recently, I encountered such a problem in the development of a small program. When the user clicks authorization to decrypt the phone number, the first failure and the second success will occur. After studying for a period of time, I finally found a reasonable solution. Here I record and summarize, hoping to help you.

Requirements describe

After the user clicks the “get phone” button, the phone set by the user in wechat will be decrypted and displayed in the contact phone input box

Specific code

<view class="cu-form-group"> <view class="title text-black"> Placeholder =" please input phone number "value="{{detail.mobile}}" bindinput="onInputMobile"></input> <button Bindgetphonenumber ="getPhoneNumber" class=" cu-bTN line-blue sm" openType="getPhoneNumber">Copy the code

Start with the button widget 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: 'There is a slight network fluctuation, please click retry'.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: 'tip'.content: 'You have refused authorization, please click and authorize again'.showCancel: false.confirmText: "Got it."})}},Copy the code

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

For details about how to obtain the session_key on the server, see the official documentation of the applets.

After the user clicks the Get phone button, the Session_key and the iv,encryptedData are sent to the server for decryption.

So you can get the user’s phone number.

pit

We used to call wx.logon() directly from getPhoneNumber to send code,iv,encryptedData to the server. The server obtains the session_key with the code, then decrypts it with the IV and encryptedData. This will cause the first decryption failure, and then the server will successfully invoke the decryption interface by clicking the button again. And it happens again every five to six minutes.

Wx.checksession (Object Object) is also successfully invoked to check whether the login state is expired.

guess

Call wx.login to getPhoneNumber, then use the server code to replace the session_key with the IV,encryptedData. How about putting wx.login in onLoad to get session_key?

I think the session_key of wechat server will be refreshed when wx.login is called, and wx.login will be called directly on getPhoneNumber. Maybe before the wechat server is refreshed, the server will take it for decryption, and the session_key that expired last time will be used for decryption. So it only works the second time. Wx. login in onload, you can get the session_key.