When making wechat apps, some small partners suddenly found that the online authorization method was not very unified. Looking through the documents, they found that, oh, there was a change! At this time, some friends are very angry. After they have finished writing, they have to change what they say, and they have to be compatible again. There is no way. People have to bow their heads under the eaves. Here I will sort out the authorization part for everyone to understand!

1: Applet login, user information and related interfaces

As the old rule, let's put an official announcement Kangkang - > Description of interface adjustment related to applet login and user information Anyway, for some reasons that we can't control, call Wx GetUserInfo or < button open - type = "getUserInfo" / > the authorization pop-up window will not pop up in the future, so we need to be compatible or directly use the Wx provided in the document when doing login authorization Getuserprofile interface. I put the official demo below. Welcome to get it yourself~

1. Compatible writing( Document here):

In wxml:

 <view class="userinfo">
    <!-- there hasUserInfo It is mainly to judge whether the user has been authorized. If not, the button to obtain avatar nickname will be displayed -->
    <block wx:if="{{!hasUserInfo}}">
      <!--canIUseGetUserProfile Judge whether the current version supports wx.getUserProfile method-->
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> Get avatar nickname </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> Get avatar nickname </button>
    </block>
​
    <!--The user has been authorized to directly display the avatar and user name. You can change it to other operations in actual development-->
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
 </view>

js:

Page({
  data: {
    userInfo: {},//It is empty by default, but when entering the page, we need to request the background interface to judge whether the user has authorized the information. If it is not obtained, we need to remind the new user to authorize
    hasUserInfo: false,//Determine whether to display the authorization button / authorization pop-up window or jump to the authorization page
    canIUseGetUserProfile: false,//Is the wx.getUserProfile method supported
  },
  onLoad() {
    //Enter the page to determine whether wx.getUserProfile can be used
    if (wx.canIUse('getUserProfile')) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // It is recommended to use wx.getUserProfile to obtain user information. Every time developers obtain user personal information through this interface, they need to be confirmed by the user
    // The developer shall properly keep the avatar nickname quickly filled in by the user to avoid repeated pop ups
    wx.getUserProfile({
      desc: 'Used to improve member information', // Declare the purpose of obtaining the user's personal information, which will be displayed in the pop-up window later. Please fill in carefully
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // It is not recommended to use getUserInfo to obtain user information. It is expected that from April 13, 2021, getUserInfo will no longer pop up a window and directly return anonymous user personal information
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

2. Some friends said, "what if I don't want to be compatible?", Then you can delete all the above judgments and directly

 <button bindtap="getUserProfile"> Get avatar nickname </button>

 getUserProfile(e) {
    wx.getUserProfile({
      desc: 'Used to improve member information', 
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },

The obtained userInfo contains:

• nickName: user nickName
• Gender: gender, 1-male, 2-female, 0-unknown
• avatarUrl: user Avatar
• country: country
• province: province
• city: city
• Language: displays the language used by country, province and city, en English zh_CN simplified Chinese zh_TW traditional Chinese (Note: the country, province and city obtained here may not be the user's real address, the user's receiving address needs to be filled in manually or call wx.chooseAddress, and wx.getlocation needs to be called to obtain the user's current geographical location)

2: Get the user's mobile phone number

Obtaining the user's mobile phone number needs to be triggered by clicking the button( file ), because we get encrypted information, we need to send the parameters to the background for decryption, and then we can get the mobile phone number! In wxml:

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

js:

Page({
  getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)//Initial vector of encryption algorithm
    console.log(e.detail.encryptedData)//Encrypted data of complete user information including sensitive data
  }
})

This is the most basic demo, but the actual project is more cumbersome. I put the js code directly, and you can modify it according to your own needs

 getPhoneNumber: function (e) {
    var that = this;
    //Check whether the session key is expired
    wx.checkSession({
      success() {
        wx.login({
          success: res => {
            wx.request({
              url: 'Write your own interface address/' + res.code,
              method: 'GET',
              header: {
                'content-type': 'application/xml'
              },
              success: function (res) {
                if (res.data.code == 200) {
                  //Allow to get mobile phone number
                  if (e.detail.errMsg == "getPhoneNumber:ok") {
                    //This is because the background asked me to splice the parameters on the url to him. You'd better use data to pass it. Don't learn from me (cry angrily)
                    wx.request({
                      url: 'Write your own interface address?enData=' + e.detail.encryptedData + '&iv=' + e.detail.iv + '&sessionKey=' + res.data.data.session_key,
                      method: "POST",
                      success: function (res) {
                        if (res.data.code == 200) {
                          console.log(res.data.data.phone);
                        }
                      }
                    })
                  }
                }
              }
            })
          }
        })
      }
    })
  },

As for why I want to set so many layers, careful friends will see in the document: