Logging in and retrieving user information are the two most basic operations in the applet. However, due to the design flaw of the applet’s official beginning, many developers used the login and retrieving user information together, although the applet’s wx.getUserInfo interface was later modified to: If the user is not authorized to use this interface, the authorization popup will no longer appear, and the fail callback will be directly entered. However, after the change, there are still many developers confused about the concept of these two steps. The following article will introduce the two steps of applets in detail

The login

Wx.login () is used as a login method. The interface is called to obtain the login credentials, and the code is sent to the back end to replace session_key and OpenID data.

  • The front-end wx.login() takes the code, invokes the back-end interface, and sends the resulting code to the back end
  • The back end calls wechat interface service, sends it with AppID + Appsecret +code, and replaces it with session_key+ OpenID. Unionid cannot be replaced before, but now it can be replaced with unionID if the following conditions are met
  1. There are apps, public accounts and small programs with the same subject under wechat open platform
  2. If a user follows a public account of the same subject, or has been authorized to login wechat on an App or public account of the same subject, he/she can get the user unionid if the above two conditions are met at the same time. In this way, he/she can be accurately identified in wx.login()
  • The custom login state is associated with openID and session_key. In fact, a token associated with openID and session_key is generated and sent to the front end
  • The front-end saves the token sent from the back-end to the cache and carries the customized login state in subsequent interface requests

Wx.getuserinfo () is not necessary to get the user’s information. Under certain conditions, wx.login() call to get the unionId can also get the user’s information from the backend database

Obtaining User information

When wx.getUserInfo() was called before, the authorization pop-up box would pop up, and the corresponding callback function would be entered according to whether the user is authorized or not. However, later wechat found that the developer abused the wx.getUserInfo() method and could not use the applet without authorization of user information. Button component open-type=”getUserInfo” can be used to trigger the authorization popup. After authorization, the user information and the encrypted data of the user information can be obtained, and the encrypted data of the user information can be sent to the backend. The backend decrypts the encrypted data using the session_key replaced by the wx.login() code to retrieve the user’s complete information. This step is a complement to the first step, which is performed when wx.login() is unable to confirm the user. If the user information can be confirmed in wx.login(), this step is not required to achieve user insensitive login. Note: according to the small program officials recently published documents, small program cannot play login user into the small program frame requires the user to log in to experience the small procedures, this review will be rejected, to the user experience of small programs, to guide the user to log on to authorized users information, address specific document

Token expires and re-registers

In the past, when we wrote web applications, when the token from the back end was invalid, the requesting interface would get error code 403. Then when the front end received the returned error code, it would jump to the login page and ask the user to log in again. But when the token from the small program was invalid, would it be necessary to jump to a login page and log in again? Obviously don’t need, because small program itself, there is no account password to log in, so the login failed do a non-inductive back operation directly, unless some small programs in does not rely on WeChat login information, but the small program built-in own user login information, then you need to jump a return to the login page, but such a small program or a few, Next, let’s see how the small program is how to do insensitive re-boarding. To get straight to the code:

const Fly = require('.. /libs/flyio')
const fly = new Fly()
const newFly = new Fly()
let time = 0
let baseUrl = 'xxxxx'
fly.interceptors.request.use((request) = > {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
newFly.interceptors.request.use((request) = > {
  wx.showNavigationBarLoading()
  request.headers['token'] = wx.getStorageSync('token')
  request.baseURL = baseUrl
  return request
})
fly.interceptors.response.use(
  (response, promise) = > {
    wx.hideNavigationBarLoading()
    return promise.resolve(response.data)
  },
  function (err, promise) {
    wx.hideNavigationBarLoading()
    // Log in again when session or session_key expires
    if (err.status === 403) {
      // Lock the current instance and subsequent requests are queued outside the interceptor
      this.lock()
      // Re-log in when an unauthenticated condition occurs, and throw an error more than three times
      if (time > 3) {
        time = 0
        return promise.reject(err.message + ` (${err.status}) `)}return new Promise((resolve, reject) = > {
        wx.login({
          success: (e) = > {
            let options = {
              'code': e.code
            }
            resolve(options)
          }
        })
      }).then((options) = > {
        return newFly.post('/login', options).then(info= > {
          wx.setStorageSync('token', info.token)
          time++
          // The task in the request queue will continue to be initiated after it is unlocked
          this.unlock()
          // Rerequest the failed request
          return fly.request(err.request)
        })
      })
    }
  }
)

export {
  fly
}
Copy the code

The above code shows the small program token expired re-log process, code is not much, the key places are also annotated, it is easy to understand, the most critical is the use of flyio this network request library, using this library to do expired re-log, Promise is a promising HTTP request library that supports multiple JavaScript runtime applications. You can use a single HTTP request code to run in browsers, wechat applets, Weex, Node, React Native, and fast applications. In order to avoid an infinite loop, this code uses a count, more than three times will not retry the login, directly throw the error

conclusion

This article mainly introduces the small program login process, access to user information, and login expired re-log related content, this is just the basic general process, in fact, each small program business may not be the same, so in the specific application needs to adjust according to the specific business. If there is a mistake or not rigorous place, welcome criticism and correction, if you like, welcome to praise