Special topic of IM code scanning login Technology (III): easy to understand. A detailed principle of IM code scanning login function is enough

This article quotes the author “ Classmate Dagu ” Of “ What's the principle of QR code scanning login ” The main content of the article , For better understanding and reading , There are revisions and changes from time to time , Thanks for sharing .

1、 introduction

Since wechat PC After using scan code login authentication logic , This way seems to be more and more IM see （ Although I personally think this way of login is cool , But it's not convenient , Especially when the mobile phone is not around ）.

▲ Above wechat PC The scan code login interface of the client

I just saw A two-dimensional code to explain the technical principles of video , Just take this opportunity to comb and summarize the detailed technical principles of code scanning login , It's convenient to review , I hope I can help you in IM People in the industry who develop similar functions .

Additional explanation ： The principle of scanning code and landing involved in this paper is not only aimed at IM System , The same applies IM Other systems besides .

2、 Catalogue of special topics

This article is the second in a series 3 piece , The general catalogue is as follows ：

《IM Scanning code login technology topic ( One )： Wechat scan code login function technical principle debugging analysis 》 《IM Scanning code login technology topic ( Two )： Market mainstream scan code login technology principle debugging analysis 》 《IM Scanning code login technology topic ( 3、 ... and )： Easy to understand ,IM Scanning code login function detailed principle is enough 》（* this paper ）

3、 The essence of QR code login

3.1 Is it safe to scan and log in ？

stay 2 In the process of scanning and logging in , You may have questions ： Is this QR code safe ？ Will it leak my personal information ？ my im How dare the system do a code scanning login ？

In response to these concerns , We need to understand the technology and logic behind QR code scanning login .

3.2 The technical essence of code scanning login

QR code scanning login is essentially a login authentication method .

Since it's login authentication , There are only two things to do ：

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

Take a practical example to understand ：

• 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 ？

Take Weizuo's code scanning login as an example ： 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 ！

PS： 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 you scan the code to confirm that the mobile phone is operated by this account , In fact, it can indirectly prove who I am .

4、 Know the QR code

So how to do scan code login confirmation ？ 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 ！

▲ This is the one-dimensional code

One dimensional code , That's the bar code , A bar code is actually a string of numbers , Take commodities in daily life as an example , The one-dimensional code on it stores the commodity number .

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 .

▲ Enter a string to generate a two-dimensional code

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 .

▲ This is a two-dimensional code （ The content has been obfuscated ）

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

5、 How traditional systems log in and authenticate ？

Know the QR code , Let's take a look at the traditional login 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 .

As shown in the figure above ：

• 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 .

The concrete is ：

• 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 .

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.

Limited to space , Articles on this , You can read the following in detail ：

《IM Make up lessons for developing basic knowledge ( One )： Understand the preposition correctly HTTP SSO The principle of single sign on Interface 》 《IM Make up lessons for developing basic knowledge ( Four )： Correct understanding HTTP In short connection Cookie、Session and Token》 《IM Make up lessons for developing basic knowledge ( 7、 ... and )： The principle and design idea of the mainstream mobile account login mode 》（ recommend ）

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 .

6、 Detailed technical steps of scanning code login

6.1 About the process

As shown in the figure above ：

• 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 .

So imagine ：

The specific explanation is ：

• 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 .

Okay , Come here , The basic idea is clear , Next, let's make the whole process more concrete .

6.2 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 .

As shown in the figure above ：

• 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 .

The two-dimensional code is accurate , Next is the scan status .

6.3 Scan state switch

As shown in the figure above ：

• 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 .

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 in the figure above, 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 .

6.4 Status confirmation

Finally, the confirmation of the status .

As shown in the figure above ：

• 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 .

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 ？

• 1） It could be a two-dimensional code ID;
• 2） 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 .

7、 This paper summarizes

To sum up this article's code scanning login logic is ：

The essence of code scanning login is ：

• 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 ：

• 1） One is the principle of two-dimensional code ;
• 2） 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 opinion in the comments .（ This article is published synchronously in ：http://www.52im.net/thread-3525-1-1.html）