Wx.getuserprofile () Login process

Because wechat recently began to require the use of wx.getUserProfile() to obtain the user’s nickname, profile picture and other information. In addition, if the user has been authorized, the user information can not be obtained silently. In view of this change, I have also modified the login logic of my small program accordingly. The following is the flow chart of the modification Settings:

The flow chart

The relevant business code is as follows:

Business logic when small program loading and initialization

//app.js
const httpClient = require('utils/httpClient');
const urlConfig = require('utils/config');
App({
  onLaunch: function () {
    // Get the Token of the local cache
    this.initGlobalToken();
    // Todo retrieves the user information stored locally. If it exists, set the todo interface to refresh the cache
    this.initUserInfo();
    / / login
    wx.login({
      success: res= > {
        // Send res.code to the backend for openId, sessionKey, unionId
        console.log(res)
        let body = new Object(a); body.code = res.code; httpClient.doPost(urlConfig.urlList.userInfoUrl,new Object, body)
          .then(success= > {
            // The local user information will be cached upon successful login
            console.log("get user info success: " + JSON.stringify(success.data))
            // Save to global variables
            let unionId = success.data.token.unionid;
            let userInfo = success.data.userinfo;
            this.globalData.unionId = unionId;
            this.globalData.userInfo = userInfo;
            this.storeUserInfo(userInfo, unionId)
            // Refresh the local user information cache
            // Save the user information locally
          }, fail= > {
            // If login fails, try to retrieve user information from the cache
            // Get locally cached user information
            console.log("get user info fail: " + JSON.stringify(fail))
            this.initUserInfo(); }); }})},// Obtain the Token cached by the user
  initGlobalToken: function () {
    try {
      let that = this;
      // Synchronously obtain the saved Token The value to be obtained is directly assigned
      let token = wx.getStorageSync('Authorization');
      if (token) {
        console.log('getStorageSync token from cache success: ' + token);
        that.globalData.token = cache.data;
      } else {
        console.log('getStorageSync token from cache fail: ' + JSON.stringify(token)); }}catch (e) {
      console.log('getStorageSync token from cache fail: '+ e); }},// Asynchronously obtain the user's locally cached UserInfo
  initUserInfo: function () {
    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      console.log("initUserInfo from cache success")
      this.globalData.userInfo = userInfo;
    }

    let unionId = wx.getStorageSync('unionId');
    if (unionId) {
      console.log("initUnionId from cache success")
      this.globalData.unionId = unionId;
    }
    // Save user information only when both exist
    if (userInfo && unionId) {
      this.globalData.hasUserInfo = true; }},// Store user information and UnionId
  storeUserInfo: function (userInfo, unionId) {
    wx.setStorage({
      key: 'unionId'.data: unionId,
      success: success= > {
        console.log("store unionId success:" + JSON.stringify(success))
      },
      fail: fail= > {
        console.log("store unionId fail:" + JSON.stringify(fail))
      }
    });
    let userInfoString = JSON.stringify(userInfo);
    console.log(userInfoString)
    wx.setStorage({
      key: 'userInfo'.data: userInfo,
      success: success= > {
        console.log("store userInfo success:" + JSON.stringify(success))
      },
      fail: fail= > {
        console.log("store userInfo fail:" + JSON.stringify(fail))
      }
    });
  },

  // Asynchronously refresh the Token globally
  refreshGlobalToken: function () {
    let that = this;
    // Obtain the saved Token asynchronously
    wx.getStorage({
      key: 'Authorization'.// The cache was successfully retrieved and stored in the global variable
      success: cache= > {
        console.log('getStorage token from cache success: ' + cache.data)
        // Update the Token after the Token is obtained
        if (cache.data) {
          that.globalData.token = cache.data
          console.log(that.globalData)
        }

      },
      // Fail to fetch
      fail: e= > {
        console.log('getStorage token from cache fail: ' + e.errMsg)
      }
    })
  },

  // Whether the current user information exists
  hasUserInfo: function () {
    if (this.globalData.userInfo) {
      return true;
    }
    return false;
  },

  globalData: {
    token: null.notifyLoginTip: false.unionId: null.userInfo: null.hasUserInfo: false}})Copy the code

Prompt login and authorization page

Prompt component WXML file for login

The authorization button page is displayed

The page for binding user information is displayed

Authorization page click event business logic

Click event code for the login button binding

// pages/me/me.js
// Get the application instance
const app = getApp();
const httpClient = require('.. /.. /utils/httpClient');
const urlList = require('.. /.. /utils/config');
Page({

  /** * initial data for the page */
  data: {
    motto: 'Hello World'.userInfo: app.globalData.userInfo,
    hasUserInfo: app.globalData.hasUserInfo,
    mes: "".showError: false.toptipsType: "success"
  },

  // Event handlers
  bindViewTap: function () {
    console.log(app.globalData);
    wx.navigateTo({
      url: '/pages/login/login'})},/** * lifecycle function -- listens for page loading */
  onLoad: function (options) {},getUserInfo: function (e) {
    wx.getUserProfile({
      desc: 'Improve user information'.success: res= > {
        app.globalData.userInfo = res.userInfo;
        this.bindUserInfo(app.globalData.userInfo, app.globalData.unionId);
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true})},fail: fail= >{}})},// Bind UserInfo and OpenId to the user
  bindUserInfo: function (userInfo, unionId) {
    if (userInfo && unionId) {
      this.showTopTips("Binding message successful"."success")
      let body = new Object(a); body.user_info = userInfo; body.union_id = unionId;console.log('bindUserInfo')
      console.log(unionId)
      console.log(JSON.stringify(userInfo))
      httpClient.doPost(urlList.urlList.addUserInfoUrl, null, body).then(
        success= > {
          // Update userInfo in cache
          console.log("bindUserInfo success " + JSON.stringify(success))
        },
        fail= > {
          console.log("bindUserInfo fail " + JSON.stringify(fail))
          this.showTopTips("Binding information is abnormal. Please check the network or try again."."error")})}else {
      this.showTopTips("Binding information is abnormal. Please check the network or try again."."error")}},// Display topTip data
  showTopTips: function (mes, toptipsType) {
    this.setData({
      mes: mes,
      showError: true.toptipsType: toptipsType
    })
  },

  /** * lifecycle function - listen for the page to complete the first rendering */
  onReady: function () {},/** * lifecycle function -- listens for page display */
  onShow: function () {},/** * life cycle function - listen for page hiding */
  onHide: function () {},/** * life cycle function - listen for page unload */
  onUnload: function () {},/** * page-related event handlers -- listen for user pull actions */
  onPullDownRefresh: function () {},/** * the handler for the pull-down event on the page */
  onReachBottom: function () {},/** * Users click on the upper right corner to share */
  onShareAppMessage: function () {}})Copy the code