The introduction

I was asked this question in August of this year, and I was so confused that when the interviewer asked me this question, I answered on the spot that I had never heard of it, so I might not know it. The interviewer smiled: That’s a design question. If you knew how to do it, I wouldn’t have asked you to do it.

Me :(wry smile…) After a confident discussion with the interviewer, he received a formal thank-you note instead.

Is there anything else you want to ask me? I asked this question, and the interviewer replied that you had guessed a little bit, but you didn’t make clear the logic I wanted. Then he guided me and told me that I could study later, which was also discussed by many people.

Until today, and received a “new” thank you letter, I suddenly recall this problem, think about it, this problem can not be left alone, I do not learn, of course, will not naturally understand the principle, let’s discuss it together.

If it can help you, please click three links, of course, this article expressed the problem of the place, welcome readers to correct, is also a learning process, thank you ~

Basic technical principles

What is the scanning-code login function?

Apps like wechat, QQ and Taobao are now installed on most mobile phones. And these apps have their web counterparts. To make it easier and safer for users to log in to their web pages, it was natural to use a service that allows users to log in with a swipe of their phone.

The login page is as follows:

So, at this point the problem comes, we visit a webpage, the webpage how to appear this TWO-DIMENSIONAL code? With this TWO-DIMENSIONAL code, how does it know is I sweep, or other people sweep it? How amazing! At that time after the interview, I have this doubt, below we answer one by one.

How did qr codes emerge?

First of all, when the user opens the login page of the website, the browser will send a request for obtaining the login QR code to the corresponding webpage server. After receiving the request, the server will randomly generate a UUID and store this UUID as the key value in the Redis server. At the same time, an expiration time is set. Users need to refresh the QR code to obtain it again.

At the same time, the key value is combined with the verification string of the company, and the interface is generated through the TWO-DIMENSIONAL code to generate a two-dimensional code picture. The QR code image is then returned to the user’s browser along with the UUID.

For example, for a login page (I opened the Wechat login address of Force button), we habitually open the developer tool of the browser, I found that when I stopped on the login page for a short time (about 30 seconds), the request link would constantly change, as shown in the picture below:

One field, uUID, is incrementing as the link is updated. This explains why the server side calls the associated interface through this UUID to return a QR code to the browser.

So, who generates qr codes? Don’t worry, continue the analysis:

  • When the user opens the website, the website background requests authorization to log in to the wechat development platform according to the wechat OAuth2.0 protocol, and passes the AppID and AppSecrect parameters approved in the wechat development platform in advance

  • Wechat development platform verifies parameters such as AppID and returns qr code to the website background

  • The website background will transmit the QR code to the front end of the website for display

Originally, there is a wechat development platform to participate in, by it to generate our TWO-DIMENSIONAL code, OK, we then think about the next question.

How do you know I scanned the QR code?

Above, we have learned the generation of two-dimensional code and the UUID is stored as the key value in the Redis server, so only this key value, where does the user information come from? With that in mind, let’s move on.

Above, we have obtained the qr code of the web page. Now it is time for the user to scan the QR code. When the user takes out his phone and scans the QR code, he can get an authentication information and a UUID. Since the mobile terminal has logged in, when accessing the server of the mobile terminal, the parameter will carry a token of the user. The server of the mobile terminal can parse from the token to the userId of the user. The passable userID may be intercepted and modified, and the token is encrypted, so the risk of modification is much lower).

The mobile terminal will bind the parsed data with the wechat account, send a login verification request to the wechat development platform, which will verify the binding data, call the callback interface of the website background, and send a temporary authorization ticket code. If the authorization is successful, a confirmation message will be returned to the mobile terminal.

After receiving the message, the mobile phone displays the login confirmation box to the user (to prevent the user from misoperation and make the login more user-friendly). After the user confirms the login, the phone sends the request again. After obtaining the uuId and userId, the server stores the userId as the value in the redis key-value pair with the uuId as the key.

  • When the website background receives the code, it indicates that the wechat development platform agrees with the data request
  • The website background requests wechat development platform to exchange according to code parameters, plus AppID and AppSecretaccess_token
  • The wechat development platform verifies the parameters and returnsaccess_token
  • Website background receivedaccess_tokenThen the user account data can be obtained through parameter analysis

So here we have the information about the user.

  • AppID: the unique identifier of the application, which is obtained after the application is submitted on wechat open platform and approved
  • AppSecret: application secret, which is obtained after application submission on wechat open platform is approved
  • Code: indicates a temporary authorization ticket. It is required when a third party obtains an access_token through code. The timeout period of a code is 10 minutes. The temporary and one-time nature of code ensures the security of authorized login on wechat.
  • Access_token: indicates the user’s credential for authorizing third-party applications to initiate interface calls

The whole process starts from the background of the website to request authorization to log in to the wechat development platform, and the final goal is to obtain access_token.

After obtaining the access_token, you can parse some basic information about the user, including profile picture, user name, gender, city, and so on. In this way, the entire wechat scanning login process is complete.

Overall process flow chart

In this paper, the reference

Cold blooded heart of the blog: Wechat scan code login principle analysis

Jorgoli: Ali interviewer: What’s the principle behind wechat and Taobao login?

What happened in the few seconds of scanning the wechat login code

Thanks for the above big guy’s article, respect the fruits of labor, hereby put forward the original link.

The last

Article output is not easy, but also hope you support a wave of small partners!

Past picks:

Little lion front note warehouse

Leetcode -javascript: LeetCode force link javascript solution warehouse, front end of the line (mind map)

If this project helped you, please submit your code in the Issues, 🤝 welcome to contribute, Give a ⭐️ if this project helped you!

Visit Chaoyi blog for reading and playing

Learning is like rowing upstream: not to advance is to drop backCopy the code