A few days ago, I watched a video of a QR code in Geek Time. It is well written. Here is the summary

In daily life, TWO-DIMENSIONAL code appears in many scenarios, such as supermarket payment, system login, application download and so on. Understanding the principle of TWO-DIMENSIONAL code can provide new ideas for technical personnel in the selection of technology. For non-technical personnel, in addition to solving doubts, can also guide him to better identify the life of the various TWO-DIMENSIONAL code encountered, to prevent being cheated.

Qr code, everyone is familiar with

Scan a code when shopping, scan a code when eating, scan a code when taking a bus

In the process of scanning code, you may have questions: is the QR code safe? Will my personal information be disclosed? More in-depth users will consider: my system can also do a TWO-DIMENSIONAL code to promote it?

At this time, you need to understand the technology and logic behind the TWO-DIMENSIONAL code!

One of the most common scenarios for qr codes is to use a mobile application to scan the QR codes on the PC or WEB to log in to the same system. For example, mobile phone wechat scan code login PC terminal wechat, mobile phone Taobao scan code login PC Taobao. So let’s take a look, two-dimensional code login is how to operate!

The nature of qr code login

Two-dimensional code login is also a login authentication mode 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

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, mobile phone verification code login, mobile phone number is to tell the system who I am, verification code is to prove to the system who I am;

So how does scanning-code login do these two things? Let’s think about it together

The mobile application scans the QR code on the PC, and after the confirmation on the mobile, the account is successfully logged in on the PC! Here, the login account of the PC must be the same as that of the mobile phone. It is impossible that account A is used to log in to the mobile phone, but account B is used to log in to the PC after scanning the code.

So, the first thing, telling the system who I am, is pretty clear!

By scanning the QR code, the account information of the mobile terminal is transferred to the PC terminal. As for how to transmit, we will talk about it later

Second thing, prove to the system who I am. During the scan, the user does not enter a password, verification code, or any other code. How does that prove it?

Some students will think, is not scanning the code process, the password to the PC end? But that’s not going to happen. It’s too insecure, and the client won’t store the password at all. Let’s think about it carefully. In fact, the mobile APP has been logged in, that is to say, the mobile APP has passed the login authentication. As long as the scan code is confirmed to be this phone and this account operation, in fact, it can indirectly prove who I am.

Understanding qr code

So how do you confirm? We will explain in detail later, before this we need to know the QR code! Before we recognize the TWO-DIMENSIONAL code, let’s look at the one-dimensional code!

One dimensional code is the bar code, the bar code in the supermarket — you’re all familiar with this, but a bar code is actually a string of numbers that store the serial number of an item.

A QR code is like a bar code, except it doesn’t have to be a number, it can be any string, you can think of it as just another representation of a string.

Search for QR code in the search engine, you can find a lot of tools to generate qr code online website, these websites can provide the function of conversion between the string and QR code, such as forage QR code website

Enter your content in the input box on the left. It can be a text, a web address, or the file…….. . Qr codes can then be generated to represent them

You can also upload a QR code, “decode” it, and then parse out what it means

System authentication Mechanism

After understanding the QR code, we understand the system authentication mechanism under the mobile Internet.

As we said earlier, it won’t store your login password for security reasons. 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.

Behind this is a token based authentication mechanism. Let’s take a look at how it works.

  1. During login, the client sends device information to the server.
  2. If the account and password verification is successful, the server will bind the account and the device to a data structure, which contains the account ID, device ID, device type, and so on
const token = {
  acountid:'account ID'.deviceid:'Logged in device ID'.deviceType:'Device type such as ISO, Android, PC...... ',}Copy the code

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 meaning is that the corresponding account and device information can be found through it.

  1. After the client obtains the token, it needs to carry the token and device information in a local storage.
  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 every 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 authentication 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. Instead, it saves the token. Some students may think, this token is so important, in case others know how to do. In fact, 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, authentication is not passed.

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

So in the scanning code login process, how is the PC end to get their own token? It is impossible for the mobile terminal to directly give its own token to the PC terminal! The token can only belong to one client and cannot be used by other clients or other clients. Before analyzing this problem, it is necessary for us to comb through the general steps of scanning the QR code to log in. This helps us sort out the process,

Scan the QR code to log in

About the process

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

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

  1. There must be a unique ID behind the TWO-DIMENSIONAL code. When the two-dimensional code is generated, this ID is generated together and bound with the device information on the PC
  2. The phone scans the QR code
  3. The QR code switches to the scanned to be confirmed state, and then the account information will be bound with this ID
  4. When the mobile device confirms the login, it generates the token used by the PC for login and returns it to the PC

Ok, now that we have the basic idea, let’s make the whole process a little bit more concrete

Preparation of QR code

According to different states of qr code, the first is the waiting scanning state. When the user opens the PC and switches to the LOGIN interface of QR code.

  1. The PC side initiates a request to the server, telling the server that I want to generate the QR code for the user to log in, and the PC side device information is also passed to the server
  2. After receiving the request, the server generates the QR code ID and binds the QR code ID to the PC device information
  3. Then the QR code ID is returned to the PC
  4. After receiving the QR code ID, the PC generates the QR code (the QR code must contain ID).
  5. In order to know the state of the QR code in time, the client in the display of the QR code, the PC side of the polling server, such as polling once every second, the request server to tell the status of the current QR code and related information

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

Scanning Status switchover

  1. Users scan the QR code on PC with their mobile phones and get the ID of the QR code through the content of the QR code
  2. Then, the server API is called to send the identity information of the mobile terminal along with the QR code ID to the server
  3. Upon receipt, the server can bind the identity information to the QR code ID and generate a temporary token. And then it goes back to the phone
  4. Because PC has been polling the state of two-dimensional code, so at this time the state of two-dimensional code has changed, it can update the state of two-dimensional code to scan on the interface

So why do you need to return a temporary token to the phone? A temporary token, like a token, is an identity credential. The difference is that it can only be used once and becomes invalid after that.

The temporary token is returned in the third step, so that the phone can use it as a credentialfor the next operation. To make sure the scanning and logging are done from the same phone,

Status confirmation

Finally, the state is confirmed.

  1. After receiving the temporary token, the mobile terminal will pop up the login confirmation interface. When the user clicks the confirmation button, the mobile terminal carries the temporary token to call the interface of the server and tell the server that I have confirmed it
  2. After receiving the confirmation, the server generates a login token for the user PC based on the device information and account information bound with the QR code ID
  3. At this time, the POLLING interface of the PC side, it can know that the state of the QR code has become “confirmed”. The 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 resources on the server

The basic process of scanning code action has been finished, and some details have not been introduced in depth.

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

  • It could be a QR code ID
  • It can be a URL that contains the QR code ID

In the scan code confirmation step, what to do if the user cancellations? I’ll leave you to think about these details

conclusion

We from the nature of the login trigger, explore the TWO-DIMENSIONAL code scan code login is how to do

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

And in doing so, we’re going to talk briefly about two premises,

  • One is the principle of qr codes,
  • One is the token based authentication mechanism.

Then we take the status of the QR code as the axis, and analyze the logic behind it: through token authentication mechanism and the change of the status of the QR code to realize the scanning login.

It should be pointed out that the login process mentioned above applies to the same system on PC, WEB and mobile.

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

If you’re interested, think about it, and feel free to leave your thoughts in the comments section.