1, Adjustment of user information interface

In the previous wechat applet, Wx was used to obtain user information Getuserinfo() method, but the user information related interfaces have been adjusted recently, as follows:
To} optimize the user experience, the platform will make the following adjustments:

1. From February 23, 2021, if the applet has been bound on the wechat open platform, it can be bound through Wx The login credentials obtained by the login interface can be directly exchanged for unionID

2. The new version of the applet released after 24:00 on April 28, 2021 cannot pass Wx GetUserInfo and obtaining user's personal information (avatar, nickname, gender and region) will directly obtain anonymous data (including user's personal information in userInfo and encrypted data), and the ability to obtain encrypted openID and unionID data will not be adjusted. Previously released applet versions are not affected, but adaptation is required if version update is required.

3. Add a getUserProfile interface (supported from version 2.10.4 of the basic database) to obtain the user's Avatar, nickname, gender and region information. The developer needs the user's confirmation every time he obtains the user's personal information through this interface. Specific interface document: getUserProfile interface document

4. Since the getUserProfile interface is supported from the basic library of version 2.10.4 (covering versions above wechat 7.0.9), considering that developers have the demand to obtain the user's Avatar nickname in the lower version, if getUserProfile is not supported, developers can continue to use the getUserInfo capability. Developers can refer to the sample code in the getUserProfile interface document for adaptation.

2, Adjustment description

Wx The return parameters of the getUserInfo interface remain unchanged, but the userInfo obtained by the developer is anonymous information.

3, Wx GetUserInfo method (now returns anonymous user data, which needs to be decrypted by yourself)

Example code:
wxml Code:

<!-- If you only display the user's Avatar nickname, you can use <open-data /> assembly -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- Need to use button To authorize login -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">Authorized login</button>
<view wx:else>Please upgrade wechat version</view>

js code:

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // Check whether authorized
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // Authorized, you can directly call getUserInfo to get the avatar nickname
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    console.log(e.detail.userInfo)
  }
})

Returned data:


You can see that there is no real data of any user, and the user name is unified as wechat user, not the real user name.

4, Solution: Wx Getuserprofile method

wx.getUserProfile(Object object) method is a new method to obtain user information interface. It can be called only after the page generates a click event (for example, in the callback of bindtap on button). Each request will pop up an authorization window. After the user agrees, it will return to userInfo. This interface is used to replace Wx getUserInfo.

Parameters:

attribute	type	Default value	Required	explain
lang	string	en	no	The language in which user information is displayed
desc	string		yes	Declare the purpose of obtaining the user's personal information, which shall not exceed 30 characters
success	function		no	Interface calls the callback function successfully
fail	function		no	Interface call failed callback function
complete	function		no	Callback function at the end of interface call (both successful and failed calls will be executed)

object. Legal value of Lang:

value	explain
en	english
zh_CN	Simplified Chinese
zh_TW	Traditional Chinese

attribute	type	explain	Minimum version
userInfo	UserInfo	User information object	2.10.4
rawData	string	The original data string that does not include sensitive information is used to calculate the signature	2.10.4
signature	string	Use SHA1 (rawdata + sessionkey) to get a string for verifying user information. See signature verification, encryption and decryption of user data for details	2.10.4
encryptedData	string	For the encrypted data of complete user information including sensitive data, see signature verification and encryption and decryption of user data for details	2.10.4
iv	string	The initial vector of the encryption algorithm is detailed in the signature verification and encryption and decryption of user data	2.10.4
cloudID	string	The cloud ID corresponding to sensitive data will be returned only when the applet developed by the cloud is opened. Open data can be obtained directly through cloud call. For details, see cloud call direct access to open data	2.10.4

Example code:
my.wxml file code:

  <view class="UCenter-bg">
    <view class="userinfo">
    <!-- <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> Get avatar nickname </button> -->
    <button wx:if="{{!hasUserInfo &&canIUseGetUserProfile}}" bindtap="getUserProfile">Get user information</button>
    <block wx:else>
     <open-data class="cu-avatar xl round "  type="userAvatarUrl"></open-data> 
    </block>
  </view>

my.js code:

onLoad: function (options) {
 
  if (wx.getUserProfile) {
    this.setData({
      canIUseGetUserProfile: true
    })
  }

  },
  getUserProfile(e) {
    // Wx is recommended Getuserprofile obtains user information. Every time a developer obtains user personal information through this interface, it needs to be confirmed by the user
    // Developers should properly keep the avatar nicknames quickly filled in by users to avoid repeated pop ups
    wx.getUserProfile({
      lang:"zh_CN",
      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) => {
        console.log(res)
        this.setData({

          userInfo: res.userInfo,
          hasUserInfo: true
        })
        const user = res.userInfo;
        console.log(user)
        wx.setStorageSync("firstuser", user);
      }
      
      
    })

  },

design sketch:

Click to get user information:

Click allow:

It can be seen that the real data is returned.

The user name and avatar can also be loaded!