Explain in detail the principle of QR code scanning and login

foreword

In daily life, QR codes appear in many scenarios, such as supermarket payment, system login, application download and so on. Understanding the principles of QR codes can provide technicians with new ideas for technology selection. For non-technical personnel, in addition to confusing, it can also guide him to better identify various QR codes encountered in life to prevent being deceived.
QR codes are all too familiar to everyone.
Scan a code for shopping, scan a code for meals, and scan a code for taking a bus.

During the process of scanning codes, you may have questions: Is this QR code safe? Will my personal information be disclosed? More in-depth users will also consider: Can my system also be promoted with a QR code?
At this time, you need to understand the technology and logic behind the QR code!
One of the most commonly used scenarios of QR codes is to scan the QR codes on PC or WEB through mobile applications to log in to the same system. For example, scan the QR code of WeChat on the mobile phone to log in to WeChat on the PC side, and scan the QR code of Taobao on the mobile phone to log in to Taobao on the PC side. So let us take a look at how the QR code login works!

The essence of QR code login

QR code login is essentially a login authentication method. Since it is login authentication, there are only two things to do!

1. tell the system who i am
2. Prove who I am to the system
   , such as account and password login, the account is to tell the system who I am, and the password is to prove who I am to the system; Who is it;
   then how does the scan code login do these two things? Let's think about it together
   So, the first thing, telling the system who I am is relatively clear!
   By scanning the QR code, the account information on the mobile phone is transmitted to the PC. As for how to transmit it, we will talk about
   the second thing later, to prove to the system who I am. During the scan code login process, the user did not enter a password, nor a verification code, or any other code. How is that proven?
   Some students may wonder, is the password transmitted to the PC during the scanning process? But this is impossible. Because that is too insecure, the client will not store the password at all. Let's think about it carefully. In fact, the APP on the mobile phone has already been logged in, which means that the mobile phone has passed the login authentication. It is said that as long as the code is scanned to confirm that it is this mobile phone and this account is operated, it can actually indirectly prove who I am.

Know the QR code

So how to confirm it? We will explain in detail later, but before that, we need to get to know the QR code first! Let's take a look at the one-dimensional code before we know the two-dimensional code!

The so-called one-dimensional code, that is, the barcode, the barcode in the supermarket - I believe everyone is very familiar with this. The barcode is actually a string of numbers, which stores the serial number of the product.

A QR code is actually similar to a barcode, except that it does not necessarily store numbers, but can also be any string. You can think of it as another form of string.

Search for QR codes in search engines, and you can find many online tools for generating QR codes. These sites can provide the function of converting between strings and QR codes. For example, the grass QR code website: https:// cli.im/

You can enter your content in the input box on the left, it can be text, URL, file... Then you can generate QR codes that represent them.
You can also upload the QR codes for "decoding", and then you can analyze the meaning of the QR codes.

System Authentication Mechanism

Knowing the QR code, let's understand the system authentication mechanism under the mobile Internet.

As we said earlier, for security reasons, it will not store your login password on the mobile phone. But in the course of daily use, we should notice that only when you log in for the first time after your app is downloaded, you need to log in with an account and password. After that, even if the app process is killed, or When the phone is restarted, there is no need to enter the account password again, and it can log in automatically.

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

1. When logging in with the account and password, the client will pass the device information to the server together.
2. If the account password verification is passed, the server will bind the account with the device and store it in a data structure, which includes the account ID, device ID, device type, and so on.

const token = {
    
    
  acountid:'账号ID',
  deviceid:'登录的设备ID',
  deviceType:'设备类型，如 iso,android,pc......',
}

Then the server will generate a token and use it to map the data structure. This token is actually a series of strings with special meaning. Its significance is that the corresponding account and device information can be found through it.

1. After the client obtains the token, it needs to save it locally, and carry the token and device information every time it accesses the system API.
2. The server can find the account and device information bound to it through the token, and then compare the bound device information with the device information sent by the client each time. If they are the same, the verification passes and the AP interface response data is returned. , if they are different, it means that the verification fails and the access is denied.

From the previous process, we can see that the client does not and does not need to save your password, on the contrary, it saves the token. Some students may think that this token is so important, what if it is known by others. In fact, it doesn't matter if you know it, because the device information is unique. As long as your device information is not known to others, and others use other devices to access it, the verification will not pass.
It can be said that the purpose of client login is to obtain its own token.

So how does the PC get its own token during the scan code login process? It is impossible for the mobile terminal to directly use its own token for the PC terminal! The token can only be privately owned by a certain client, and cannot be used by other people or other clients. Before analyzing this problem, it is necessary for us to sort out the general steps of scanning the QR code to log in. This can help us sort out the whole process.

General steps to scan the QR code to log in

general process

1. Before scanning the code, the application on the mobile phone is logged in, and a QR code is displayed on the PC, waiting to be scanned
2. Open the app on the mobile phone, scan the QR code on the PC, after scanning, it will prompt "scanned, please click to confirm on the mobile phone"
3. The user clicks OK on the mobile phone, and after confirmation, the login on the PC is successful.
   It can be seen that the QR code has three states in the middle, waiting to be scanned, scanned to be confirmed, and confirmed. then imagine
   
4. There must be a unique ID behind the QR code. When the QR code is generated, this ID is also generated together and bound to the device information on the PC.
5. Mobile phone to scan this QR code
6. The QR code is switched to the status of being scanned and waiting for confirmation, and the account information will be bound to this ID at this time
7. When the mobile terminal confirms the login, it will generate a token for login on the PC terminal and return it to the PC terminal

Well, at this point, the basic idea is already clear, and then we will make the whole process more concrete.
Two-dimensional code preparation
According to the different states of the two-dimensional code, the first is the waiting state for scanning, when the user opens the PC and switches to the two-dimensional code login interface.

8. The PC initiates a request to the server, telling the server that I want to generate a QR code for user login, and pass the PC device information to the server. 9. After the server receives the request, it generates a QR code
ID , and bind the QR code ID with the PC device information.
10. Then return the QR code ID to the PC.
11. After receiving the QR code ID, the PC generates a QR code (the QR code must contain ID)
12. In order to know the status of the QR code in a timely manner, after the client displays the QR code, the PC continuously polls the server, such as polling once every second, and requests the server to tell the current QR code status and related information.

The QR code is ready, the next step is the scanning status

Scan state switch

1. The user uses the mobile phone to scan the QR code on the PC side, and obtains the QR code ID through the content of the QR code
2. Then call the server API to send the identity information of the mobile terminal and the QR code ID to the server
3. After the server receives it, it can bind the identity information with the QR code ID to generate a temporary token. Then return to the mobile terminal
4. Because the PC has been polling the status of the QR code, if the status of the QR code changes at this time, it can update the status of the QR code to scanned on the interface.

So why do you need to return a temporary token to the mobile terminal? Temporary token is the same as token, it is also an identity credential, the difference is that it can only be used once, and it will become invalid after use.

In the third step, the temporary token is returned, so that the mobile terminal can use it as a certificate in the next step. This ensures that the two-step operations of scanning the code and logging in are sent from the same mobile phone.
Status Confirmation
The last step is to confirm the status

1. After receiving the temporary token, the mobile terminal will pop up a confirmation login interface. When the user clicks to confirm, the mobile terminal will carry the temporary token to call the interface of the server and 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, through the polling interface on the PC side, it can know that the status of the QR code has become "confirmed". And the token for user login can be obtained from the server
4. At this point, the login is successful, and the back-end PC can use the token to access the resources of the server

Summarize

We start from the essence of login and explore how QR code scanning login is done

1. tell the system who i am
2. Prove to the system who I am

In this process, we first briefly talked about two prerequisite knowledge,

• One is the two-dimensional code principle,
• One is a token-based authentication mechanism.

Then we analyzed the logic behind this with the status of the QR code as the axis: through the token authentication mechanism and the status change of the QR code to realize scan code login.

It should be pointed out that the login process mentioned above is applicable to the PC side, WEB side, and mobile side of the same system.