Simple thoughts on the implementation of wechat code scanning login Technology

Wechat code scanning login is a common operation. However, many people may not have thought about the idea of its implementation. I remember that in an interview, the interviewer once asked about the implementation idea of wechat code scanning login. This time, taking the code scanning login of wechat reading web page as an example, let's talk about my thoughts on the implementation idea of wechat code scanning login technology.

Use Google browser to do this analysis. Open F12 and be ready to observe the HTTP connection at any time.

Next, open the web version of wechat reading with Google browser, click login, and a QR code will pop up:

You can see that when the QR code pops up, the front end calls two back-end interfaces, one is getuid() and the other is getinfo(). What logic implementations are involved?

After a little thought, it is easy to understand that each randomly generated QR code is actually a UUID code. That is, when you click login, a getuid () method will be executed to call the back-end API: Web / login / getuid, and then a randomly generated UUID code will be returned. When the UUID code is returned to the front end, it will be displayed in the form of QR code. According to how UUID generates QR code, I will write a little white article to analyze it later.

On the console page called out by Google browser F12, click getuid (). In the preview box on the right bar, you can see that the method returns a randomly generated UUID: 38e673a9-5bd3-4f0c-ba2f-62ab376372a9

While returning the UUID, another getinfo () method is also called - it can be seen that this should be the callback method after the successful getuid call, that is, when getuid () is successfully executed and a uid is obtained, the getinfo () method will be called immediately, and the generated uid will be passed as a parameter to getinfo () to access the backend API.

When the code scanning operation is not carried out by using the mobile wechat, you will see that getinfo() has not returned a value. At this time, the UUID it sends to the back end is doing the polling query operation. If the polling is not successful within a certain period of time, the connection will be disconnected and the interface call will fail.

Here, you can briefly summarize the process of generating QR code on the wechat login page of the web version, that is, when you click the login button, the code level will execute the getuid () method to call the back-end API interface, that is“ https://weread.qq.com/web/login/getuid ”, the background will randomly generate a unique uid return. After the front end gets the normal return status, it will pass the parameter to the callback method getinfo ({uid ":" 38e673a9-5bd3-4f0c-ba2f-62ab376372a9 "}) of getuid, which will pass the uid parameter to the back-end API interface“ https://weread.qq.com/web/login/getinfo ”At this time, the backend will always poll and take uid to redis for query. If the query is successful, the login is successful. Otherwise, the connection timeout fails.

The following two pseudo codes are used to illustrate the logic of the code:

I The front end react obtains UUID and calls back to getinfo() pseudo code:

II Backend API interface / Web / login / getinfo pseudo code:

This process is simply represented by a sequence diagram:

So, when can I get the return value through uid to redis query?

At this time, we will talk about the code scanning stage.

When the getinfo (string uid) interface polls whether redis has a key value of uid, the user takes out the mobile phone and scans the code with wechat within the effective time of the QR code. At this time, this page will appear on the mobile phone:

If you click login, the web version of wechat reading will refresh and enter the logged in home page.

This process is easy to understand, that is, after scanning the code, the mobile terminal will obtain the uid from the QR code. At this time, if you click login, the uid and wechat user information will be packaged into JSON format and submitted to the back end. Then, in the back-end interface, set in the form of uid: user's key value will be inserted into the redis database. At this time, the other side is polling the getinfo (string uid) method with uid as the key value to check whether redis has a value, through a method similar to redistemplate opsForValue(). By using the get (uid) method, the user information just inserted into redis can be queried through the uid, and finally returned to the wechat reading front end on the PC, that is, the login is successful.

Finally, the complete process can be represented in the sequence diagram as follows:

When the wechat reading login on the PC is successful, the page is refreshed again. It should be the interface redirection in the background. Interested friends can think and Study on how to redirect. Wechat code scanning login is generally this idea, but there should be more relevant verification in the details.

Here is mainly the analysis of its overall implementation idea.

It is worth mentioning that the PC wechat reading front-end actually does anti debugging, but it doesn't matter. Its anti debugging practice is easy to crack. Please refer to my practice, that is, open Google browser, press F12, call out the console, light up this icon, and you can turn off the anti debugging setting of the wechat reading front-end.