Real interview scene:

After the confrontation between Bagu and the algorithm, the third child breathed a sigh of relief and held it. I saw the interviewer smiled slightly, "Actually, what I really want to ask is... how do you think the scan code login should be implemented."

Third child: "Ah... this, oh... that, that's all, and then... um... um..."

Interviewer: "Understood, go back and wait for the notice."

Finish……

Okay, the foreshadowing is over, let's enter our topic today, how to implement the scan code login function?

Scan code login scene

We must be familiar with the scan code login scene - many PC-side websites provide the function of scan code login, no need to enter any account and password on the webpage, only need to use the APP on the mobile phone, such as WeChat, Taobao, QQ, etc. , use the scan function, scan the QR code on the webpage, confirm the login, and then complete the webpage login.

Scan code login analysis

Let's analyze, scanning the code to log in, in fact, involves three roles, and two problems need to be solved.

three roles

Obviously, there are three roles involved in the scan code login: PC, mobile, and server.

The relevant design should be carried out around these three ends. The specific design is actually what function should each end accomplish? How should this be achieved? How should end and end interact?

two questions

Scan code login is essentially a special login authentication method, we are facing two problems

How to complete the authentication on the mobile terminal
How to complete the login on the PC side

If you use the ordinary account and password to log in for authentication, the PC will complete the authentication through the account and password, and then the server will synchronously return an identification such as the token key to the PC, and the PC will request the server again, which needs to carry the token key for identification and certification. The status of your own login.

When the server responds, it needs to verify the token key, and if it passes, the response is normal; if the verification fails, the authentication fails; or if the token expires, the PC needs to log in again for authentication to obtain a new token key.

Now switch to scan code login:

Authentication is not done by account password, but by scanning the code on the mobile phone
The PC side cannot obtain the credentials after successful authentication synchronously, and there must be some way for the PC side to obtain the credentials for authentication.

Scan code login implementation

How to complete the authentication on the mobile terminal

How to generate QR code

The QR code is similar to the barcode in the supermarket. The barcode in the supermarket is actually a string of numbers on which the serial number of the product is stored.

The content of the QR code is relatively free, not only numbers but also any strings can be stored in it. We can think of it as another representation of characters.

Below I convert the text into a QR code through a website:

Therefore, the process of scanning the code on our mobile phone is actually decoding the QR code and obtaining the data contained in the QR code.

So how is the QR code generated?

First of all, the QR code is displayed on our PC, so to generate this operation, the PC should request the server to obtain the corresponding data, and then the PC should generate the QR code.

What does the QR code contain?

The two-dimensional code is an important medium in our scenario. The server must generate a unique identifier for this data as the two-dimensional code ID, and it should also set the expiration time. The PC terminal generates a QR code according to the QR code ID and other data.

At the same time, the server should also save some states of the QR code: unscanned, successful, and invalid.

APP authentication mechanism

We also have to understand the APP-based mobile Internet authentication mechanism.

First of all, the mobile phone generally does not store the login password. We found that the login based on the account password is only required when the APP is loaded and the first login. There is no need to enter the account password again, it can log in automatically.

There is a set of token-based authentication mechanisms behind this, which is somewhat similar to PCs, but somewhat different.

In addition to the account password, there is also device information during APP login authentication.
After the account password verification is passed, the server will bind the account to the device and save it persistently, including the account ID, device ID, device type, etc.
In addition to the token key, each APP request also needs to carry device information.

Because the mobile device is unique, it can generate an exclusive token for each client, and this token does not need to expire, so this is the principle that we can log in once and use it for a long time.

What did the mobile phone scan code do?

Then it's clear now that we scan the code on our mobile phone to do two things:

Scan QR code: Identify the QR code displayed on the PC and obtain the QR code ID

Confirm login: The mobile terminal requests the server through the authentication information (token key, device information) and QR code information (QR code ID), completes the authentication process, and confirms the login of the PC terminal.

ps: Scanning the code and confirming on the mobile phone is not the point, so it is simplified here. One way is to apply for a one-time temporary token to the server when scanning the code, and bring this temporary token to access the server when confirming the login.

How to complete the login on the PC side

Next comes our main event, the mobile phone has completed its work, how does the login of our server enter the login state?

As we mentioned earlier, the PC side uses the token to identify the login status. Then, after scanning the code on the mobile phone to confirm, our server should generate the corresponding token for the PC.

So, how does the PC get the token key it needs to complete the login?

The PC side can respond accordingly by obtaining the status of the QR code:

QR code not scanned: no action
The QR code has expired: prompt to refresh the QR code
The QR code has succeeded: get the PC token from the server

There are three main ways to get the QR code status:

polling

The polling method means that the client will actively send a query request for the status of the QR code to the server at regular intervals.

long polling

Long polling means that the client actively sends a query request for the status of the QR code to the server, and the server will block the request according to the situation until the QR code information is updated or timed out. After the client receives the returned result, if the QR code has not been scanned, it will continue to send the query request until the status changes (invalid or successful).

Websocket

Websocket means that after the front-end generates a QR code, it will establish a connection with the back-end. Once the back-end finds that the status of the QR code changes, it can directly push the information to the front-end through the established connection.

Summarize

Through the previous analysis, we already know some key points of QR code scanning login. Now let's string these points together and take a look at the overall implementation process of QR code scanning login.

Take the common polling method to obtain the QR code status as an example:

Visit the QR code generation page on the PC side, and the PC side requests the server to obtain the QR code ID
The server generates the corresponding QR code ID, and sets the expiration time and status of the QR code.
The PC obtains the QR code ID and generates the corresponding QR code.
Scan the QR code on the mobile phone to obtain the QR code ID.
The mobile terminal sends the mobile terminal token and QR code ID to the server to confirm the login.
The server verifies the mobile terminal token, and generates the PC terminal token according to the mobile terminal token and the QR code ID
The PC side requests the server by polling, and obtains the status of the QR code through the QR code ID. If it is successful, it returns the PC token and the login is successful.

Okay, so our function of scanning and logging in has been designed.

Original link:
https://www.cnblogs.com/three-fighter/p/15435345.html

Author: Three Points Evil

If you think this article is helpful to you, you can retweet, follow and support

Interviewer: Hold on to the Bagu and the algorithm, how should this be achieved?