Talk about the principle of QR code scanning login

Talk about the principle of QR code scanning and login

In daily life, there are a lot of scenes of scanning QR code , Recently, I happened to see videos and articles about this , Learn about the technology and logic behind the QR code .

One of the most commonly used scenarios for two-dimensional code is scanning through mobile applications PC perhaps WEB The end of the QR code , To log in to the same system .

For example, mobile wechat scan code login PC End wechat , Mobile Taobao scan code login PC Taobao . So let's take a look at , How does QR code login work ！

The essence of QR code login

In essence, QR code login is also a way of login authentication .

There are two things you need to do for regular login authentication ：

• Tell the system who I am
• Prove to the system who I am

By scanning the QR code , Transfer the account information of mobile phone to PC End , Prove to the system who I am .

Mobile terminal APP It's already logged in , That is to say, the mobile terminal has passed the login authentication . as long as Scan the code to confirm that the mobile phone is operated by this account , In fact, it can indirectly prove who I am .

QR code

First, let's get to know the QR code , Before we know two-dimensional code, let's take a look at one-dimensional code , Also known as bar code ： One dimensional bar code

One dimensional code , That's the bar code , Bar codes in supermarkets – I believe everyone is very familiar with this , A bar code is actually a string of numbers , It stores the serial number of the product .

Two dimensional code is similar to bar code , It's just that it doesn't store numbers , It can also be any string , You can think , It's just another representation of strings .

System authentication mechanism

For the sake of safety , It will not store your login password on the mobile terminal . But in daily use , We should have noticed , Only after your app is downloaded , The first time I log in , You need to log in with an account and password , After that Even if the application process is killed , Or the phone restarts , There is no need to re-enter the account password , It can log in automatically .

be based on token Authentication mechanism of ：

1. Account password login , The client will pass the device information to the server ,
2. If the account and password pass the verification , The server will bind the account to the device , In a data structure , This data structure contains accounts ID, equipment ID, Equipment type, etc

const token = {
  acountid:' account number ID',
  deviceid:' Login device ID',
  deviceType:' Device type , Such as  iso,android,pc......',
}

Then the server will generate a token, Use it to map data structures , This token It's actually a string of strings with a special meaning , The point of it is , You can find the corresponding account and device information through it .

1. The client gets this token after , You need to do a local save , Every time you visit the system API Take them with you token And device information .
2. The server can use token Find the account and device information bound to it , Then compare the bound device information with the device information sent by the client each time , If the same , So the verification passed , return AP Interface response data , If different , That is, the verification fails and access is denied

The client doesn't and doesn't need to save your password , contrary , It's preserved token. Maybe some students will think , This token So important , What if someone else knows . actually , It doesn't matter if I know , Because device information is unique , As long as your device information is unknown to others , Other people use other devices to access , The verification also failed .

The purpose of client login , That is to get what belongs to you token.

Scan QR code login general steps ：

1. Before scanning code , The mobile app is logged in ,PC There's a QR code on the end , Waiting for the scan
2. Open the app on the mobile terminal , scanning PC The end of the QR code , After scanning , Will prompt ” Scanned , Please click "confirm" on the mobile phone ”
3. The user clicks "confirm" on the mobile terminal , After the confirmation PC The end login is successful

You can see , The QR code has three states in the middle , To be scanned , Scanned for confirmation , Confirmed .

1. There must be a uniqueness behind the two-dimensional code ID, When the QR code is generated , This ID It's also generated together , And bound PC The device information of the terminal
2. Mobile phone to scan this QR code
3. The QR code switches to Status scanned for confirmation , At this point, the account information will be associated with this ID binding
4. When the mobile terminal confirms the login , It will generate PC End for login token, And return it to PC End

The specific process ：

QR code preparation

According to different states of QR code , The first is waiting for the scan state , User opens PC End , When switching to the QR code login interface .

1. PC The client sends a request to the server , Tell the server , I want to generate the QR code of user login , And the PC The end device information is also transmitted to the server
2. After the server receives the request , It generates a two-dimensional code ID, And the QR code ID And PC The end device information is bound
3. And then put the QR code ID Return to PC End
4. PC The terminal receives the QR code ID after , Generate qr code ( The QR code must contain ID)
5. In order to know the status of the QR code in time , After the client shows the QR code ,PC The server keeps polling the server , Like polling every second , Request the server to tell the status and related information of the current QR code

Scan state switch

1. Users use their mobile phones to scan PC The end of the QR code , Get the QR code from the QR code ID
2. Then call the server API Combine the identity information of mobile terminal with two-dimensional code ID Send it to the server together
3. After the server receives it , It can combine identity information with two-dimensional code ID Binding , Generate temporary token. And then back to the phone
4. because PC The client has been polling the QR code status , So at this time, the state of the QR code changes , It can update the QR code status to scanned on the interface

temporary token For the next operation of the mobile terminal , You can use it as a voucher . To make sure you scan the code , The two steps of login are sent from the same mobile terminal .

Status confirmation

1. The mobile terminal receives the temporary token After that, the login confirmation interface will pop up , When the user clicks confirm , Mobile phones carry temporary token The interface used to call the server , Tell the server , I have confirmed
2. After the server receives the confirmation , According to the QR code ID Bound device information and account information , Generate users PC End login token
3. Now PC The polling interface at the end , It can tell that the state of the QR code has become ” Confirmed ”. And you can get the login information from the server token
4. Come here , Login is successful , Back end PC You can use token To access the resources of the server

summary

We trigger from the nature of landing , Explore how QR code scanning login works

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

In the process , Let's talk about two premises first ,

• One is the principle of two-dimensional code ,
• One is based on token Authentication mechanism of .

And then we take the QR code status as the axis , The logic behind this is analyzed : adopt token Authentication mechanism and two-dimensional code state change to achieve code scanning login .

It's important to point out that , The login process mentioned above , It applies to the same system PC End ,WEB End , Mobile .

Reference material

• TikTok Two sides ：“ Talk about the principle of QR code scanning and login ”.
• Classmate Dagu
• Geek time, a QR code video

Sharing plans

Blog content will be synchronized to Tencent cloud + Community , Invite everyone to join us ：https://cloud.tencent.com/

license agreement

In this paper A signature - Noncommercial use - Share in the same way 4.0 The international license agreement , Reprint please indicate the source .