QR code scan code login principle

The principle of QR code scanning and login

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.

In the process of scanning the code, you may have questions, is this QR code safe? Will my personal information be disclosed and so on.

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, and scan the QR code of Taobao on the mobile phone to log in to Taobao on the PC. So let's take a look at how to operate when logging in with a QR code!

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 password login, the account number is to tell the system who I am, and the password is to prove who I am to the system, such as mobile phone verification code login, the mobile phone number is to tell the system who I am, and the mobile phone number is to tell the system who I am. Who am I in the system, the verification code is to prove who I am to the system;

So how does scan code login do these two things?

The app on the mobile phone scans the QR code on the PC. After confirmation on the mobile phone, the account is logged in on the PC. Here, the account logged in on the PC must be the same account as that on the mobile phone. It is impossible to log in to account A on the mobile phone. After scanning the QR code to log in, the account B is logged in on the PC side. Some people may wonder here. When I scanned the QR code, I did not enter the account password. How does it confirm that I am logged in? In fact, when the mobile phone scans the code, it is actually logged in. Your QQ and WeChat are all your information, so as long as you scan the code to confirm that it is this mobile phone and this account is operated, you can actually indirectly prove who I am.

System Authentication Mechanism

Let's take a look at the system authentication mechanism of the mobile Internet

Generally, for security reasons, the mobile terminal will not store your login password. But in the process of daily use, we should notice that only when you log in for the first time after downloading your app, you need to log in with an account and password. What about after that? Even after the application process is killed or 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.

When the account password is logged in, the client will pass the device information to the server together. If the account password verification is passed, the server will bind the account with the device, and store it in a data structure, which contains the account ID. , device ID, device type, etc.

const token = {
    
    
	acuntid: “账号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 string of strings with special meaning. Its significance is that the device information of the corresponding account can be found through it.

• 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.
• The server can find the account and device information bound to it through the token, and then compare the bound information with the device information sent by the client each time. If they are the same, the verification passes and the API interface response data is returned. If it is different, it means that the verification does not pass 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, 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.

Then, in the process of scanning and logging in, how does the PC end obtain its own token? The token can only be privately owned by a certain client, and cannot be used by other or other clients. Before answering this question, we need to sort out the general steps of scanning the QR code to log in. This can help We sort out the whole process.

General steps of scanning 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 for the code 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 confirm 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, to be scanned, to be scanned to be confirmed, to be confirmed, then it is conceivable

• 1. 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.
• 2. Use your mobile phone to scan the QR code
• 3. Switch the QR code to the status of being scanned and waiting for confirmation. At this time, the account information will be bound to this ID
• 4. 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 very clear. Next, let's make the whole process more concrete.

QR code preparation

Judging from the different states of the QR code, the first is the waiting state for scanning, when the user opens the PC terminal and switches to the QR code login interface.

• 1. 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 device information of the PC to the server
• 2. After the server receives the request, it generates a QR code ID and binds the QR code ID to the PC device
• 3. Then return the QR code ID to the PC
• 4. After the PC receives the QR code ID, it generates a QR code (the ID must be included in the QR code)
• 5. 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, for example, polling once every second, requesting the server to tell the status of the current QR code 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 together with the QR code ID to the server
• 3. After the server receives it, it can bind the identity information with the QR code ID, generate a temporary token, and then return it to the mobile phone
• 4. Because the PC has been polling the status of the QR code, so when 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 operation, so as to ensure that the two steps of scanning code and login are sent by the same mobile terminal.

status confirmation

Finally, the status confirmation

• 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 rotation training interface on the PC side, it can know that the status of the QR code has changed to "confirmed". And the token for user login can be obtained from the server
• 4. Once here, the login is successful, and the backend can use the token to access the resources of the server

Summarize

We start from the essence of login and explore how to scan the QR code to log in

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

In this process, we briefly talked about two prerequisite knowledge

• One is the two-dimensional code principle
• One is a token-based cognitive mechanism

Then we took the QR code as the axis, analyzed the logic behind it, and realized the scan code login through the token cognitive mechanism and the status change of the QR code

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