A brief discussion on the principle of js QR code scanning login

A few days ago, I watched a video about QR codes on GeekTime. It was well written. Here is a summary:

In daily life, QR codes appear in many scenarios, such as supermarket payment, system login, application download, etc. Understanding the principles of QR codes can provide technical personnel with new ideas when selecting technology. For non-technical personnel, in addition to solving their doubts, we can also guide them to better identify various QR codes encountered in life and prevent them from being deceived.

QR code, everyone is familiar with it

Scan the code when shopping, eating, and taking the bus

During the scanning process, you may have questions: Is this QR code safe? Will my personal information be leaked? More advanced users will also consider: Can I also create a QR code to promote my system?

At this time, you need to understand the technology and logic behind the QR code!

One of the most common scenarios for QR codes is to scan the QR code on the PC or WEB through a mobile application to log in to the same system. For example, you can scan the QR code on your mobile phone WeChat to log in to WeChat on your PC, and scan the QR code on your mobile phone Taobao to log in to Taobao on your PC. So let’s take a look at how QR code login works!

The essence of QR code login

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

1. Tell the system who I am

2. Prove who I am to the system

For example, when logging in with an account and password, the account number tells the system who I am, and the password proves who I am to the system. For example, when logging in with a mobile phone verification code, the mobile phone number tells the system who I am, and the verification code proves who I am to the system.

So how does scanning the QR code to log in accomplish these two things? Let’s think about this together

Use the mobile app to scan the QR code on the PC. After confirmation on the mobile phone, the account is successfully logged in on the PC! Here, the account logged in on the PC must be the same account as the mobile phone. It is impossible that the account logged in on the mobile phone is account A, and after scanning the code to log in, the account logged in on the PC is account B.

So, the first thing is to tell the system who I am, which is relatively clear!

By scanning the QR code, the account information on the mobile phone is transferred to the PC. As for how to transfer, we will talk about it later.

The second thing is to prove who I am to the system. During the QR code scanning login process, the user did not enter a password, verification code, or any other code. How is that proved?

Some students may wonder whether the password is transmitted to the PC during the scanning process? But that's impossible. Because that is too insecure, the client will not store the password at all. If we think about it carefully, in fact, the mobile APP has already been logged in, which means that the mobile phone has passed the login authentication.所說只要掃碼確認是這個手機且是這個賬號操作的，其實就能間接證明我誰。

Understanding QR Codes

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

The so-called one-dimensional code is a barcode, the barcode in the supermarket - I believe everyone is very familiar with it. The barcode is actually a string of numbers that 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 store any string of characters. You can think of it as another form of string representation.

Search for QR code in the search engine, and you can find many tool websites for generating QR codes online. These websites can provide the function of converting between strings and QR codes, such as the Grass Feed QR Code Website

You can enter your content in the input box on the left. It can be text, URL, file... Then you can generate QR codes representing them

You can also upload the QR code and "decode" it, and then you can analyze the meaning of the QR code.

System authentication mechanism

Now that we know about QR codes, let’s learn about the system authentication mechanism under the mobile Internet.

As we said before, for security reasons, the mobile phone will not store your login password. However, in daily use, we should notice that you only need to log in with an account and password when you log in for the first time after downloading the application. After that, even if the application process is killed or the phone is restarted, you do not need to enter the account and password again, 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 logging in with an account and password, the client will pass the device information to the server. If the account and password verification passes, the server will bind the account and the device and store them in a data structure. This data structure contains the account ID, device ID, device type, etc.

const token = {
  acountid:'Account ID',
  deviceid:'Logged in device ID',
  deviceType:'Device type, such as iso, android, pc......',
}

The server will then generate a token and use it to map the data structure. This token is actually a string with a special meaning. Its significance lies in that it can be used to find the corresponding account and device information.

• After the client obtains this token, it needs to save it locally and carry the token and device information each time it accesses the system API.
• 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 they are the same, the verification passes and the AP interface response data is returned. If they are different, the verification fails and access is denied.

From the previous process, we can see that the client does not and does not need to save your password. Instead, it saves the token. Some students may think that this token is so important, what if it is known by others? In fact, knowing it has no impact, because device information is unique. As long as others don’t know your device information, the verification will not pass if they use other devices to access it.

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

So how does the PC get its own token during the QR code scanning login process? It is impossible for the mobile phone to directly transfer its own token to the PC! The token can only belong to a certain client and cannot be used by other people or other clients. Before analyzing this problem, we need 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 for scanning the QR code to log in

Approximate process

1. Before scanning the code, the mobile app is logged in, and the PC displays a QR code waiting to be scanned

2. Open the app on your phone and scan the QR code on your PC. After scanning, it will prompt "Scanned, please click Confirm on your phone"

3. The user clicks confirm on the mobile phone, and the PC login is successful after confirmation.

As you can see, the QR code has three states in the middle: waiting to be scanned, scanned and waiting for confirmation, and confirmed. So you can imagine

1. There must be a unique ID behind the QR code. When the QR code is generated, this ID is also generated and bound to the device information on the PC.

2. Use your mobile phone to scan this QR code

3. The QR code switches to the scanned and pending confirmation state, and the account information will be bound to this ID.

4. When the mobile phone confirms the login, it will generate a token for the PC to log in and return it to the PC.

Okay, now that the basic idea is clear, let's make the whole process more specific.

QR code preparation

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

1. The PC sends a request to the server, telling it that it wants to generate a QR code for user login and pass the PC device information 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 information

3. Then return the QR code ID to the PC

4. After receiving the QR code ID, the PC generates a QR code (the QR code must contain the ID)

5. In order to know the status of the QR code in time, after the client displays the QR code, the PC continuously polls the server, for example, once every second, requesting the server to tell the current status of the QR code and related information

The QR code is ready, and the next step is scanning.

Scan status switch

1. The user uses a mobile phone to scan the QR code on the PC and obtains the QR code ID from the QR code content.

2. Call the server API to send the mobile terminal's identity information and QR code ID to the server

3. After receiving it, the server can bind the identity information with the QR code ID to generate a temporary token. Then return to the mobile phone

4. Because the PC has been polling the QR code status, if the QR code status changes at this time, it can update the QR code status to scanned on the interface

So why do we need to return a temporary token to the mobile phone? A temporary token is a kind of identity credential just like a token. The difference is that it can only be used once and becomes invalid after use.

In the third step, a temporary token is returned so that the mobile phone can use it as a credential in the next operation. This ensures that the two steps of scanning the code and logging in are initiated by the same mobile phone.

Status confirmation

The final step is to confirm the status.

1. After receiving the temporary token, the mobile phone will pop up a login confirmation interface. When the user clicks confirm, the mobile phone carries the temporary token to call the server's interface and tells the server that I have confirmed

2. After receiving the confirmation, the server generates a token for the user to log in to the PC 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 can know that the status of the QR code has become "confirmed". And the user login token 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 server resources.

The basic process of scanning code has been explained, but some details have not been introduced in depth.

For example, what is the content of the QR code?

• Can be a QR code ID
• It can be a URL address containing the QR code ID. In the step of scanning the code to confirm, what should be done if the user cancels? These details are left for you to think about.

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 who I am to the system

In this process, we first briefly talked about two prerequisites.

• One is the QR code principle.
• One is a token-based authentication mechanism.

Then we analyzed the logic behind this based on the QR code status: using the token authentication mechanism and the QR code status change to achieve code scanning login.

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

Usually, we have another common scenario, which is to scan the code to log in through a third-party application. For example, Geek Time/Nuggets can choose WeChat/QQ to scan the code to log in. So what is the principle of scanning the code to log in through a third-party application?

This concludes this article on the principle of js QR code scanning login. For more relevant js QR code scanning login content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!