A brief analysis of the principle of scan code landing


I have always used wechat reading habits, and recently found that wechat reading also has a web version. To log in to the webpage version of wechat reading, we need to use app code scanning to log in. As shown in the following interface:

Use your wechat to read the app, scan the QR code above and click confirm to log in, then the webpage version can log in automatically. After landing, your reading records, bookshelf information, etc. will be displayed.

I was suddenly very curious, this scan code landing is how to achieve, so went to the Internet to check the relevant blog information. Here we record a relatively simple and easy to understand implementation scheme.

Implementation details

The realization of scan code login needs the cooperation of mobile server and web server. It can be roughly divided into the following steps:

Step1: QR code for webpage request

Go straight to the top

In order to realize the scan code login of the web version, the user must first request a QR code to log in. After receiving the user’s request for login QR code, the server on the web side will randomly generate a UUID (this UUID is the unique identifier of the page), and will store the UUID as a key value pair in the background redis.
What is the value of the key value pair stored in redis? We will talk about it later.

It should be noted that the key value pairs stored in redis must be set with an expiration time. Otherwise, after logging in with this UUID, they will be in the login state all the time.

When the browser gets the QR code information returned by the web server, it analyzes the UUID in it, and continuously checks the background whether it has logged in successfully. If the background has successfully logged in, the web will automatically jump to the login success page. Otherwise, it will be polled until the QR code fails (here we find that the valid time is set for the QR code
It’s really necessary. If the QR code has no effective time, it will continuously poll the background, causing great pressure on the background).

The key point above is how the web server can judge whether the user has successfully logged in by scanning the code? Take a look at the steps below.

Step2: the mobile phone stores the user ID in redis

After the user requests the QR code, he starts to take out the mobile phone and open the corresponding app to scan the QR code. During the scanning process, the mobile phone will submit the UUID and the token information obtained after login to the mobile server.

The mobile server will first take the token information to judge whether the user is legal and whether he has logged in normally. If it is judged that the user has logged in normally, the user’s userid and submitted UUID will be stored in redis as a uudi userid. This is the answer to the question left by step one.

In short, there is so much work done on the mobile phone. Let’s go back to the web.

Step3: web side polling succeeded

Step 1 said: the QR code landing page will keep polling whether the login is successful. The basis here is that there is a UUID userid key value pair in redis. If this key value pair already exists, it indicates that the mobile phone has scanned the code and logged in.

Once the web server judges that the mobile phone has scanned the code, it can log in with the userid. The necessary user information and token information are returned to the web front end. So far, the web login is successful.

Brief summary

This paper records a simple version of code scanning login, but it can also describe the general principle of code scanning login. There should still be many details to consider in the actual development process. Such as security issues. Specifically, we need to carry out actual combat.

Welcome to discuss~