QR code

https://mp.weixin.qq.com/s/px9U4kcWu_3ecqV-DXPJtg

Find out the principle of QR code scanning login
Front end technology Jianghu yesterday
This article is authorized to be reproduced from ： Classmate Dagu ,https://juejin.cn/post/6940976355097985032

In everyday life , QR code appears in many scenes , For example, supermarket payment 、 System login 、 App downloads, etc . Understand the principle of QR code , It can provide new ideas for technicians in technology selection . For non-technical personnel , Except for solving puzzles , It can also guide him to better distinguish the various QR codes in his life , To prevent being deceived .

QR code , You can't be more familiar with it

Scan the shopping code , Scan the code for dinner , Take the bus and scan the code

picture
Reaf23573de7bac41f202d2fb0e0b9934.jpeg
picture
110_ba82eb278547ec279eaf835fb0f63b3f.png
In the process of scanning , You may have questions ： Is this QR code safe ？ Will it leak my personal information ？ Deeper users will also consider ： Can my system also be promoted by a QR code ？

At this time, we need to understand 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 . Since it's login authentication , There are only two things to do ！

Tell the system who I am
Prove to the system who I am
For example, account password login , The account number is to tell the system who I am , The password is to prove to the system who I am ; For example, mobile phone verification code login , Cell phone number is to tell the system who I am , Captcha is to prove to the system who I am ;

So how does code scanning login do these two things ？ Let's think about it together

Mobile app scanning PC Terminal QR code , After the mobile terminal confirms , The account number is in PC The end login is successful ！ here ,PC The login account must be the same as the mobile phone account . It's impossible for the mobile terminal to log in to an account A, And after scanning and logging in ,PC The end login is the account number B.

therefore , First thing , Tell the system who I am , It's quite clear ！

By scanning the QR code , Transfer the account information of mobile phone to PC End , As for how it was spread , Let's talk later

The second thing , Prove to the system who I am . Scanning code login process , The user didn't enter the password , I didn't enter the verification code , Or some other code . How does that prove ？

Some students will think of , Is it in the process of scanning code , They sent the code to PC End cloth ？ But it's impossible . Because it's not safe , The client will not store the password at all . Let's think about it , In fact, the 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 .」

Know the QR code
So how to confirm ？ We'll elaborate on that later , Before that, we need to know the QR code ！ Before we know two-dimensional code, let's take a look at one-dimensional code ！

picture
201211061549088595.png
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 ,

Search for QR codes in search engines , You can find many online QR code generation tool websites , These websites can provide the function of conversion between string and QR code , such as Straw QR code website [2]

picture
20210318103206.jpg
You can enter your content in the input box on the left , It can be text 、 website , file …. Then you can generate a two-dimensional code that represents them

You can also upload the QR code , Conduct ” decode “, Then we can analyze the meaning of the two-dimensional code

System authentication mechanism
Know the QR code , Let's take a look at the system authentication mechanism under the mobile Internet .

We said earlier , 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 .

In fact, behind this is a system based on token Authentication mechanism of , Let's take a look at how this mechanism works ,

picture
Assad Assad .jpg
Account password login , The client will pass the device information to the server ,
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…’,
}
Copy code
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 ,

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 .
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
This process starts from the front , We can see , 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 .

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

So in the process of scanning and logging in ,PC How do you get your own token Well ？ It's impossible for the mobile phone to put its own token to PC End use ！token It can only be owned by one client , Other people or other clients can't use it . Before analyzing this problem , We need to sort it out first , What are the general steps of scanning QR code to log in . This can help us sort out the whole process ,

Scan QR code login general steps
About the process
picture
Ah ah .jpg
Before scanning code , The mobile app is logged in ,PC There's a QR code on the end , Waiting for the scan
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 "
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 . So imagine

picture
666.jpg
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
Mobile phone to scan this QR code
The QR code switches to Status scanned for confirmation , At this point, the account information will be associated with this ID binding
When the mobile terminal confirms the login , It will generate PC End for login token, And return it to PC End
Okay , Come here , The basic idea is clear , Next, let's make the whole process more concrete

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 .

picture
1111.jpg
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
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
And then put the QR code ID Return to PC End
PC The terminal receives the QR code ID after , Generate qr code ( The QR code must contain ID)
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
The two-dimensional code is accurate , Next is the scan status

Scan state switch
picture
7777.jpg
Users use their mobile phones to scan PC The end of the QR code , Get the QR code from the QR code ID
Then call the server API Combine the identity information of mobile terminal with two-dimensional code ID Send it to the server together
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
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
So why do you need to return a temporary token Well ？ temporary token And token equally , It's also a kind of identity document , The difference is that it can only be used once , It's useless after use .

In the third step, return to temporary token, This is 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
Finally, the confirmation of the status .

picture
3333333332.jpg
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
After the server receives the confirmation , According to the QR code ID Bound device information and account information , Generate users PC End login token
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
Come here , Login is successful , Back end PC You can use token To access the resources of the server
The basic process of code scanning is finished , Some of the details are not in-depth ,

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

It could be a two-dimensional code ID
It can be a two-dimensional code ID One of the url Address
In the scan confirmation step , What to do if the user cancels ？ These details are left for you to think about

summary
picture
6767676.jpg
We trigger from the nature of landing , Explore how QR code scanning login works

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

Usually we have another kind of scene which is quite common , That is to scan the code and log in through the third-party application , For example, geek time / Nuggets You can choose wechat /QQ Wait for the scan code to log in , So what's the principle of code scanning login through a third-party application ？

Interested students can think about it , Welcome to leave your comments in the comments section .

Reference
[1]
Geek time, a QR code video :
https://time.geekbang.org/dailylesson/detail/100044032?utm_source=u_nav_web&utm_medium=u_nav_web&utm_term=u_nav_web

[2]
Straw QR code website :
https://cli.im/

Order one 『 Looking at 』 Under the support picture

People who like it also like it
Get you started to understand the principle of QR code scanning login
Get you started to understand the principle of QR code scanning login …
Front end recitation
Don't like
Why not
determine
Low content quality No official account.
use JS Get along well with iOS Quick instructions
use JS Get along well with iOS Quick instructions …
Front end pioneer
Don't like
Why not
determine
Low content quality No official account.

Wechat scan
Pay attention to the official account