This article cites the author “big gu classmate” “qr code scan code login is what principle” the main content of the article, in order to better understand and read, included when revised and changed, thank the original author to share.

1, the introduction

Since the PC side of wechat uses scan login authentication logic, this method seems to be seen in more and more IM (although I personally think this login method is cool, but not convenient, especially when the phone is not nearby).

▲ The scanning code login interface of wechat PC is shown in the figure above

Recently just saw a two-dimensional code technical principle to explain the video, just take this opportunity to sweep the code login detailed technical principle comb and summarize, convenient for their own review, also hope to help to want to develop similar functions in IM colleagues.

** Supplementary note: ** The scan code login principle mentioned in this article is not only for IM systems, but also applies to other systems besides IM.

2. Thematic catalogue

This article is the third in a series of articles, with the following table of contents:

IM Scanning Code Login Technical Topic (I) : Debugging Analysis of the Technical Principle of wechat Scanning Code Login Function

IM Scanning Code Login Technology Special Topic (2) : Debugging Analysis of mainstream Scanning Code Login Technology Principle in the Market

IM Scan code login technology topic (3) : Easy to understand, IM scan code login function detailed principle is enough (* article)

3, the nature of two-dimensional code login

3.1 Is Scanning Login Secure?

In the process of 2-d code sweep code login, we may have questions: is this TWO-DIMENSIONAL code safe? Will my personal information be disclosed? My IM system dare to do a scan code login?

To address these concerns, we need to understand the technical and logical nature of qr code login.

3.2 The technical nature of scanning code login

Qr code scanning login is also a login authentication method in essence.

Since it is login authentication, there are only two things to do:

  • 1) Tell the system who I am;
  • 2) Prove to the system who I am.

To understand this, take a practical example:

  • For example, account password login: account is to tell the system who I am, password is to prove to the system who I am;
  • For example, the mobile verification code login: the mobile phone number is to tell the system who I am, the verification code is to prove to the system who I am.

So how does scan login do these two things?

Take the scanning code login of micro as an example: The application of the mobile phone sweeps the QR code of the PC, and after the confirmation of the mobile phone, the account is successfully logged in to the PC. In this case, the login account on the PC must be the same as that on the mobile. It is impossible that account A is logged in to from the mobile phone, but account B is logged in to from the PC after code scanning.

So, the first thing — “Tell the system who I am” — is relatively clear!

**PS: ** Passes the account information from the mobile terminal to the PC terminal by scanning the TWO-DIMENSIONAL code. As for the specific transmission, we will talk about it later.

The second thing: “Prove to the system who I am.” In the sweep login process, the user does not enter a password, verification code, or any other code. How does that prove?

Some students will think, is not the process of scanning code, the password to the PC end?

But that’s not going to happen. It would be too insecure, and the client would never store the password at all.

Let’s think about it carefully. In fact, the mobile APP has been logged in, which means that the mobile APP has passed the login authentication. Said that as long as scan code to confirm is this mobile phone and this account operation, in fact, can indirectly prove who I am.

4. Know the QR code

So how to do scan code landing confirmation? We will elaborate later, before this we need to know the TWO-DIMENSIONAL code! Before we know two-dimensional code, let’s take a look at one-dimensional code!

▲ This is the one-dimensional code

The so-called one-dimensional code, that is, bar code, bar code is actually a string of numbers, in daily life of goods, for example, it is above the one-dimensional code storage is the number of goods.

A QR code is similar to a bar code, except that it doesn’t necessarily store numbers, it can store any string, and you can think of it as just another representation of a string.

Search two-dimensional code in the search engine, you can find a lot of online generation of two-dimensional code tool sites, these sites can provide string and two-dimensional code between the conversion function, such as forage TWO-DIMENSIONAL code website.

▲ Enter a string to generate a QR code

Input your content in the left input box, it can be text, url, file…….. . A QR code can then be generated to represent them.

▲ This is the QR code (the content has been blurred)

You can also upload the QR code and “decode” it, and then you can parse out what the QR code represents.

5, how is the traditional system login authentication?

Understanding the TWO-DIMENSIONAL code, we understand the traditional login authentication mechanism under the mobile Internet.

As we mentioned earlier, it doesn’t store your login password on your phone for security purposes. But in the process of daily use, we should note that only after your application download, login for the first time, only requires a password login, then Even if the application process is to kill, or cell phone restart, is don’t need to input password again, it can automatic login.

In fact, there is a token-based authentication mechanism behind this. Let’s take a look at how this mechanism works.

As shown above:

  • 1) During account and password login, the client will transfer the device information to the server.
  • 2) If the account password is verified, the server binds the account to the device and stores the account in a data structure containing the account ID, device ID, device type, and so on.

const token = {

Acountid: ‘ID’,

Deviceid: ‘logged-in deviceid ‘,

DeviceType: ‘deviceType, such as iso,android, PC…… ‘,

}

The server then generates a token and uses it to map the data structure. This token is actually a string with special meaning. Its meaning is that the corresponding account and device information can be found through it.

Concrete is:

  • 1) After the client obtains the token, it needs to make a local save, and every time it accesses the system API, it carries the token and device information;
  • 2) The server can use the token to find the account and device information bound to it, and then compare the bound device information with the device information sent by the client each time. If the device information is the same, the verification passes and the AP interface response data is returned. If the device information is different, the verification fails and access is denied.

From the previous flow, we can see that the client does not and does not need to save your password. Instead, it saves the token.

Some students may wonder if this token is so important that others find out about it.

** In fact: ** know it does not affect, because the device information is unique, as long as your device information is not known to others, others take other devices to access, verification is not through.

It can be said that the purpose of client login is to obtain its own token.

Limited to space, this aspect of the article, you can read the following several articles in detail:

Understanding the Principles of the Pre-HTTP SSO Single Sign-on Interface

Understanding cookies, Sessions, and Tokens in HTTP Short Connections

Basic KNOWLEDGE of IM Development (7) : Principle and Design Idea of mainstream Mobile Terminal Account Login Method (recommended)

So how does the PC get its own token in the process of scanning code login? It is impossible for the mobile end to directly give their token to the PC end! The token can only be private for a client and cannot be used by other clients.

Before analyzing this problem, it is necessary for us to comb through the general steps of scanning the TWO-DIMENSIONAL code to log in. This helps us sort out the whole process.

6. Detailed technical steps of scanning code login

6.1 General Process

As shown above:

  • 1) Before scanning, the application on the mobile terminal is logged in, and a TWO-DIMENSIONAL code is displayed on the PC terminal, waiting for scanning;
  • 2) Open the application on the mobile terminal and scan the QR code on the PC terminal. After scanning, it will prompt “It has been scanned, please click confirm on the mobile terminal”;
  • 3) The user clicks “yes” on the mobile terminal, and the LOGIN on the PC terminal is successful after confirmation.

** It can be seen that the TWO-DIMENSIONAL code has three states in the middle: ** to be scanned, scanned to be confirmed and confirmed.

So you can imagine:

The specific explanation is:

  • 1) There must be a unique ID behind the TWO-DIMENSIONAL code. When the two-dimensional code is generated, the ID is also generated and bound to the PC device information.
  • 2) Scan the QR code with your mobile phone;
  • 3) When the QR code switches to scanned and waiting for confirmation, the account information will be bound to the ID;
  • 4) When the mobile terminal confirms the login, it will generate the TOKEN used for login on the PC side and return it to the PC side.

Ok, so now that the basic idea is clear, let’s go through the process a little bit more concretely.

6.2 Preparing QR Codes

According to the different status of the TWO-DIMENSIONAL code, the first state is waiting for scanning, when the user opens the PC and switches to the two-dimensional code login interface.

As shown above:

  • 1) THE PC sends a request to the server, telling the server that I want to generate the TWO-DIMENSIONAL code for user login, and transfer the PC device information to the server;
  • 2) After the server receives the request, it generates the QR code ID and binds the QR code ID to the PC device information;
  • 3) Then return the TWO-DIMENSIONAL code ID to the PC;
  • 4) After receiving the QR code ID, the PC generates the QR code (the QR code must contain the ID);
  • 5) In order to know the status of the TWO-DIMENSIONAL code in time, after the client shows the two-dimensional code, the PC side constantly polls the server, such as polling once every second, asking the server to tell the current status of the two-dimensional code and related information.

The TWO-DIMENSIONAL code is ready, and the scanning state is next.

6.3 Switching scan Status

As shown above:

  • 1) The user uses the mobile phone to scan the TWO-DIMENSIONAL code on the PC, and obtains the ID of the two-dimensional code through the content of the two-dimensional code;
  • 2) Call the server API to send the identity information of the mobile terminal and the TWO-DIMENSIONAL code ID to the server;
  • 3) Upon receipt, the server can bind the identity information to the QR code ID to generate a temporary token. Then it returns to the phone;
  • 4) Because the PC side has been polling the status of the TWO-DIMENSIONAL code, so at this time the status of the two-dimensional code has changed, it can update the status of the two-dimensional code as scanned on the interface.

So why do you need to return a temporary token to the phone?

A temporary token is like a token, but it can only be used once and then becomes invalid.

The temporary token is returned in the third step in the figure above so that the phone can use it as a credential in the next step. To ensure that the scan and login steps are sent from the same phone.

6.4 Status Verification

Finally, the state is confirmed.

As shown above:

  • 1) After receiving the temporary token, the mobile terminal will pop up a login confirmation interface. When the user clicks “confirm”, the mobile terminal will carry the temporary token to call the interface of the server to tell the server that I have confirmed;
  • 2) After receiving the confirmation, the server generates a TOKEN for user PC login based on the device information and account information bound to the QR code ID;
  • 3) At this time the POLLING interface on the PC side, it can know that the status of the TWO-DIMENSIONAL code has become “confirmed”. In addition, the server can obtain the user login token.
  • 4) At this point, the login is successful, and the back-end PC can use the token to access the resources on the server.

The basic process of scanning is finished, but some details have not been introduced in depth.

For example, what is the content of the TWO-DIMENSIONAL code?

  • 1) It can be two-dimensional code ID;
  • 2) It can be a URL address containing the QR code ID.

What if the user cancels the scan confirmation step? I’ll leave you to think about the details.

7. Summary of this paper

To summarize the scan code login logic of this paper is:

The essence of scan login is:

  • 1) Tell the system who I am;
  • 2) Prove to the system who I am.

In this process, we first briefly talked about two premises:

  • 1) One is the principle of two-dimensional code;
  • 2) One is token-based authentication mechanism.

Then we take the status of two-dimensional code as the axis and analyze the logic behind it: scan code login through token authentication mechanism and status change of two-dimensional code.

It should be pointed out that the login process mentioned above is suitable for the PC, WEB and mobile terminals of the same system.

Usually we have another scene is also more common, that is through the third party application to scan code login, such as geek time/nuggets can choose wechat /QQ and other scan code login, so this through the third party application scan code login is what principle?

Those of you who are interested can think about it and feel free to leave your thoughts in the comments. (This article is simultaneously published at: www.52im.net/thread-3525…)