Applet various postures to achieve login

Welcome background time – because of the recent exposure to small programs more, and just experienced the small program automatic login era and now click on the login era. Combine my own practice and observe the practice of other small programs, have this small share ~

What this article may cover —

update

Thank you @Shaonialife for your wonderful comments

• GetUserInfo may have been deprecated because of a misnomer, but we can’t use getUserInfo through API calls without the user’s authorization.

• One important thing missing from this article is that to get a user’s profile picture and nickname, you need to use the Button component authorization for the first time. If you have already used the component authorization, wx.getUserInfo can return the user’s data directly without having to repeat the authorization popover. This means that we can use wx.getSetting to determine whether the user has authorized getUserInfo. If so, we can call wx.getUserInfo silently to get the data we want. If not, we can do what we want

What is the applet login for this article?

When I talk about login in this article, I’m not just talking about wX. login

• Obtain basic user information
• Invoke the wX. login interface of wechat
• Implement server-side login

What should I do if I need to get the user profile picture and nickname?

User avatars and nicknames are almost necessary for us to develop small programs, so how should we get and use them correctly and efficiently?

Old times – Automatically authorizes a shuttle

New era — Open-data with small programs

Be careful with the version of the base library for small programs when using open-Data. The specific usage is as follows

You can actually think of open-data as a picture or a string, and you can control the style by enclosing the view tag with the corresponding class.

Compared to the previous way to get the basic information of users, this scheme is still more heart, if some small program is just the user’s profile picture nickname and other basic information needs, then you do not need to go to the same trouble as before to call a getUserInfo, get back a bunch of things do not use.

What should I do if I need the user to implement login on the server?

According to the wechat mini program document, can complete the login on the server side (obtain user session_key/ openID, etc.), there are three parameters returned by the front end is essential:

• code
• encryptedData
• iv

Code is obtained through wX.login, while encryptedData & IV is obtained from wX.getUserInfo.

However, due to the update of the basic wechat library, the ability to call getUserInfo through THE API is cancelled. We need to use the [open-type] capability of the Button component to call the getUserInfo method.

Please read the official document for details about the methods mentioned above:

Documentation for getUserInfo

Documentation for Login

Note: Please ensure that wX. login is earlier than getUserInfo, not only at the code execution level, it is best to go to getUserInfo after the login callback is successful, otherwise the back-end decrypting may fail, resulting in login failure.

(I’ll skip over how to implement the backend login when you can also call getUserInfo through the API.)

Although no automatic authorization, we can also achieve small program login authorization

Generally speaking, there are two types of authorization, one is compulsory authorization and the other is on-demand authorization. No matter what the process is, it can be classified as these two types of authorization.

Compulsory licensing

• Scope of application: small programs strongly dependent on user identity, the user must know the relevant information of the user as soon as the user comes in, or the user must pull the relevant resources according to the user ID.

• Authorization mode: There are many modes, but the common feature is that users will interrupt the normal process of entering the small program, with some flaws in the experience. Two modes are listed here:

  • If you do not jump to the page, the authorization window will pop up no matter where you click on the page, as shown in the figure (if you do not record the mouse click in the page, the authorization will be triggered no matter where you click)↓↓

  

  This is done in a simple but brutal way: place a full-screen button component on the desired page using position: fixed, and set its opacity to 0.

  

  • Jump to the page. If a non-login user is detected, it is forced to jump to the login page, where logon logic processing is performed.

  

  Personally, I still prefer this kind of authorization mode, which is slightly similar to the authorization in wechat’s own ecology, and will not be so abrupt for users.

  Specific implementation – compared with the previous one is a little more complex, this way belongs to the global nature of the interception authorization, will interrupt the current page of all actions, jump to the login page dedicated to the page, in the login page after successful login back to the original page.

  

On-demand authorization

• Scope of application: the user identity planning is very clear, can accept the user after certain actions to obtain the user identity of the small program.

• Authorization mode: does not interrupt the main flow of the applet page, and adds authorization to the main flow. The implementation method is also very flexible, whether it is a list, a picture or even a piece of text, as long as the user needs to manually trigger, can be used as the initiation time of authorization.

  Similar to the no-page approach mentioned above in mandatory authorization, but with one big difference – this approach does not force authorization, but appears when authorization is needed, and is relatively less intrusive for users of small programs.

summary

Contact small program this period of time, compared before and after the adjustment of some functions of small program, do not have a feeling — small program from the beginning of the perspective of developers to improve the function, slowly turned into a user’s perspective to upgrade the function. It may not be nice for us as developers, but it’s inevitable, so let’s embrace change