Real interview scenarios:

After eight and algorithm of the confrontation, the old three relief, all hold. The interviewer smiled, “Actually, what I really want to ask is… Do you think scan code login should be how to achieve.”

Third child: “Ah… Well, uh… That, that’s it, and then… The forehead… HMM…”

Interviewer: “Got it. Go home and wait for the announcement.”

After the…

Ok, foreshadowing end, enter our topic today, how to realize the scan code login function?

Scan code login scenario

Is not all strange login scenarios we must sweep yards – many sweep the PC web sites provide login code function, without any input account and password on the site, need only through a mobile phone APP, such as WeChat, taobao, QQ, etc., using the scanning function, scan the qr code on the web, confirm the login, can complete the web login.

Scan code for login analysis

Let’s analyze, scan code login, in fact, involves three roles, need to solve two problems.

Three roles

It is obvious that there are three roles involved in scanning code login: PC, mobile and server.

Relevant design should be launched around these three ends, the specific design is actually each end should complete what function? How do you do that? How should end to end interact?

Two questions

Scanning code login is a special login authentication method in essence, we are faced with two problems

  • Mobile terminalHow to complete certification
  • PCHow to Log in

If a common account and password are used for login authentication, the PC uses the account and password for authentication. Then the server returns a token key to the PC, and the PC requests the server again. The token key is required to identify and prove the login status.

When the server responds, it verifies the token key. If the token key passes, the server responds normally. If the verification fails, the authentication fails. Or if the token expires, the PC needs to log in again for authentication and obtain a new token key.

Now it’s scanning login:

  • Authentication is not through the account password, but by the mobile phone terminal scan code to complete
  • The PC cannot synchronously obtain the credentials after successful authentication. You must make the PC obtain the credentials in some way.

Scan code login implementation

How to complete authentication on a mobile phone

How to generate two-dimensional code

A QR code is similar to a bar code in a supermarket, which is actually a string of numbers that stores the serial number of an item.

Two-dimensional code content is more free, which can not only save numbers, but also any string. We can think of it as just another representation of a character.

Here I converted the text into a QR code through a website:

Therefore, the process of our mobile phone scanning code is actually the decoding of the TWO-DIMENSIONAL code to obtain the data contained in the two-dimensional code.

So how to generate two-dimensional code?

First of all, the TWO-DIMENSIONAL code is displayed in our PC side, so the generation of this operation should be by the PC side to request the server, obtain the corresponding data, and then by the PC side to generate the two-dimensional code.

What does qr code contain?

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

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

APP Authentication Mechanism

We also need to look at app-based mobile Internet authentication mechanisms.

First of all, the mobile terminal is generally not store login password, we found that we only load the APP and login for the first time, just need to be based on the password login, even after the clean up the application process, or even mobile phone restart, is don’t need to input password again, it can automatic login.

There is a token-based authentication mechanism behind this, which is similar to but different from PC.

  • In addition to the account password, there is also device information during APP login authentication
  • If the account password is verified, the server will bind the account to the device for persistent storage, including the account ID, device ID, and device type
  • In addition to the token key, the APP also needs to carry device information for each request.

Because mobile devices are unique, they can generate exclusive tokens for each client, and this token does not expire, so this is the principle that we can log in once and use it for a long time.

What did the phone scan do

That makes it clear. We’re doing two things by scanning our phones:

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

  • Confirm the login: The mobile phone requests the server with authentication information (token key, device information) and TWO-DIMENSIONAL code information (TWO-DIMENSIONAL code ID) to complete the authentication process and confirm the login on the PC.

Ps: Mobile phone scan and confirmation are not important, so it is simplified here. One way is to apply for a one-time temporary token from the server at the same time when scanning, and then carry this temporary token to access the server when confirming login.

How do I log in to the PC

Next comes our main play, the mobile end has finished its work, how do we enter the login state of the server?

As we mentioned earlier, the PC uses tokens to indicate login status. Then, after the mobile terminal scans the code for confirmation, our server should generate the corresponding token for PC.

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

PC can obtain the status of the TWO-DIMENSIONAL code to make corresponding response:

  • Qr codeNot scanNo operation:
  • Qr codeHas the failure: Refreshes the QR code
  • Qr codeHas been successfully: Obtains the PC token from the server

There are three main ways to obtain the status of two-dimensional code:

polling

Polling means that the client will take the initiative to send a query request for the status of two-dimensional code to the server every once in a while.

Long polling

Long polling refers to that the client proactively sends a query request about the status of the TWO-DIMENSIONAL code to the server. The server will block the request as required until the two-dimensional code information is updated or times out. When the client receives the returned result, if the QR code is still not scanned, it will continue to send query requests until the status changes (invalid or successful).

Websocket

Websocket means that the front end will establish a connection with the back end after generating the TWO-DIMENSIONAL code. Once the back end finds the status change of the two-dimensional code, it can directly push information to the front end through the established connection.

conclusion

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

Take the common polling method to obtain two-dimensional code status as an example:

  1. Access the PC side two-dimensional code generation page, the PC side requests the server to obtainQr code ID
  2. The server generates the correspondingQr code ID, set the expiration time and status of the TWO-DIMENSIONAL code.
  3. The PC forQr code ID, generate the corresponding TWO-DIMENSIONAL code.
  4. Scan the QR code on the mobile terminal to obtainQr code ID.
  5. Mobile client willMobile client tokenandQr code IDSend it to the server to confirm the login.
  6. Server checkMobile client token, according to theMobile client tokenandQr code IDgeneratePC端token
  7. The PC requests the server through pollingQr code IDObtain the status of the QR code. If yes, returnPC tokenThe login is successful.

Ok, so we have a scan login function designed.


Because the blogger does not know much about the authentication mechanism of mobile terminal, if there is any mistake, welcome to communicate with the blogger!

Reference:

[1]. The three ways to realize the login code: esau forthe77. Making. IO / 2019/05/23 /…

[2]. What is the principle of qr code scanning login? : juejin. Cn/post / 694097…