IM scan code login technology topic (3): easy to understand, one detailed principle of IM scan code login function is enough

This article quotes the main content of the article "What is the principle of QR code scan code login" by the author "Dagu classmate". In order to better understand and read, there are revisions and changes when included in the instant messaging network. Thanks for the original author for sharing.

1 Introduction

Since WeChat’s PC side uses the scan code login authentication logic, this method seems to be seen in more and more IMs (although I personally think this login method is cool, but it is not convenient, especially the mobile phone is not close to you. time).

▲ The scan code login interface of the WeChat PC terminal in the picture above
Recently, I just saw a video explaining the technical principles of QR codes. I took this opportunity to sort out and summarize the detailed technical principles of scanning code login, so as to facilitate their own review, and hope to help colleagues who want to develop similar functions in IM. .

Supplementary note: The principle of scanning code and login involved in this article is not only for the IM system, but also for other systems besides IM.

Learning Exchange:

• 5 groups for instant messaging/push technology development and communication: 215477170 [recommended]
• Introduction to Mobile IM Development: "One entry is enough for novices: Develop mobile IM from scratch"
• Open source IM framework source code: https://github.com/JackJiang2011/MobileIMSDK

(This article was published synchronously at: http://www.52im.net/thread-3525-1-1.html )

2. Thematic catalogue

This article is the third in a series of articles. The general content is as follows:

"IM Scan Code Login Technology Topic (1): Debugging and Analysis of Technical Principles of WeChat Scan Code Login Function"
"IM Scan Code Login Technology Topic (2): Debugging and Analysis of the Principles of the Mainstream Scan Code Login Technology in the Market"
"IM Scan Code Login Technology Topic (3): Easy to understand, one detailed principle of IM scan code login function is enough" (* This article)

3. The essence of QR code login

3.1 Is the scan code login safe?
In the process of scanning and logging in with the 2D code, you may have questions: Is this QR code safe? Will my personal information be leaked? Dare my im system also engage in a scan code login?

In response to these concerns, we need to understand the technical and logical nature of QR code scanning and login.

3.2 The technical nature of scan code login
QR code scanning login is essentially a login authentication method.

Since it is login authentication, there are two things to do:

1) Tell the system who I am;
2) Prove to the system who I am.
Give a practical example to understand:

For example, account and password login: account is to tell the system who I am, and password is to prove to the system who I am;
For example, mobile phone verification code login: the mobile phone number tells the system who I am, and the verification code proves who I am to the system.
So how does scan code login accomplish these two things?

Take the scan code login of Weizuo as an example: the mobile phone application scans the PC QR code, and the mobile phone confirms the account, and the account is successfully logged in on the PC! Here, the account logged in on the PC terminal must be the same account as that on the mobile terminal. It is impossible to log in to account A on the mobile phone, but after scanning the code to log in, the login on the PC is to account B.

Therefore, the first thing-"Tell the system who I am" is relatively clear!

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

The second thing: "Prove to the system who I am". During the scan code login process, the user did not enter a password, nor did he enter a verification code, or any other code. How is that proved?

Some students may wonder whether the password was passed to the PC during the scanning process?

But this is impossible. Because that is too insecure, the client will not store the password at all.

Let's think about it carefully. In fact, the mobile app has already been logged in, which means that the mobile app has passed the login authentication. It is said that as long as the scan code confirms that it is the phone and the account is operated, it can actually prove me indirectly.

4. Recognize the QR code

So how to confirm the login by scanning the code? We will explain in detail later, we need to know the QR code first! Before we know the QR code, let's take a look at the one-dimensional code!

▲ This is a one-dimensional code

The so-called one-dimensional code is a bar code. The bar code is actually a string of numbers. Taking commodities in daily life as an example, the one-dimensional code on it stores the serial number of the product.

A two-dimensional code is actually similar to a barcode, except that it does not necessarily store numbers, but can also be any character string. You can think of it as another form of character string.

Search for the QR code in the search engine, and you can find a lot of tool websites that generate QR codes online. These websites can provide the function of converting between character strings and QR codes, such as forage QR code websites.

▲ Enter a string to generate a QR code

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

▲ This is a QR code (the content has been blurred)

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

5. How does the traditional system log in and authenticate?

Knowing the QR code, let’s learn about the traditional login authentication mechanism under the mobile Internet.

We said earlier that for security, it will not store your login password on the mobile phone. But in the process of daily use, we should notice that only after your application is downloaded, when you log in for the first time, you need to log in with an account and password. After that, even if the application process is killed, or When the phone restarts, there is no need to enter the account password again, and it can log in automatically.

In fact, behind this is a set of token-based authentication mechanism, let's take a look at how this mechanism works.

As shown in FIG:

1) When the account password is logged in, the client will pass the device information to the server together;
2) If the account password is verified, the server will bind the account to the device and store it in a data structure. This data structure contains the account ID, device ID, device type, and so on.
const token = {

acountid:'Account ID',

deviceid:'Login device ID',

deviceType:'Device type, such as iso,android,pc......',

}

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.

specifically is:

1) After the client gets the token, it needs to save it locally, and carry the token and device information every time it accesses the system API;
2) The server can find the account and device information bound to it through the token, and then compare the bound device information with the device information sent from the client every time. If they are the same, the verification is passed and the AP interface is returned. If the response data is different, it means that the check 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, on the contrary, it saves the token.

Some students may think that this token is so important, what if someone else knows it.

Actually: Knowing it has no effect, because the device information is unique. As long as your device information is unknown to others and others use other devices to access it, the verification will fail.

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

Due to space limitations, you can read the following articles in detail:

"IM Development Basic Knowledge Supplementary Lesson (1): Correctly understand the principle of the front HTTP SSO single sign-on interface"

"IM development basic knowledge supplementary lesson (4): Correct understanding of Cookie, Session and Token in HTTP short connection"

"IM Development Basic Knowledge Supplementary Lesson (7): Principles and Design Ideas of the Mainstream Mobile Account Login Method" (recommended)

So how does the PC get its own token during the scan code login process? It is impossible for the mobile terminal to directly use your token for the PC terminal! The token can only be private 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.

6. Detailed technical steps for scanning code login

6.1 Approximate process

As shown in FIG:

1) Before scanning the code, the mobile application is logged in, and the PC displays a QR code, waiting to be scanned;
2) Open the application on the mobile phone and scan the QR code on the PC. After scanning, it will prompt "Scanned, please click to confirm on the mobile phone";
3) The user clicks to 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: to be scanned, scanned to be confirmed, and confirmed.

Then you can imagine:

The specific explanation is:

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 of the PC;
2) Scan the QR code with your mobile phone;
3) The QR code is switched to the scanned and pending status, and the account information will be bound to this ID at this time;
4) When the mobile terminal confirms the login, it will generate a token for login on the PC terminal and return it to the PC terminal.
Okay, at this point, the basic idea has been clear, and then we will make the whole process more concrete.

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

As shown in FIG:

1) The PC initiates a request to the server, telling the server that I want to generate a QR code for the user to log in, 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 with the device information of the PC;
3) Then return the QR code ID to the PC;
4) After receiving the QR code ID, the PC will generate a QR code (the ID must be included in the QR code);
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, every second, requesting the server to tell the current status of the QR code and Related Information.
The QR code is ready, the next step is the scanning status.

6.3 Scanning status switch

As shown in FIG:

1) The user scans the QR code on the PC with a mobile phone, and obtains the QR code ID from the content of the QR code;
2) Then call the server API to send the mobile terminal's identity information and the QR code ID to the server;
3) After the server receives it, it can bind the identity information with the QR code ID to generate a temporary token. Then return to the mobile terminal;
4) Because the PC has been polling the status of the QR code, at this time the status of the QR code has changed, and it can update the status of the QR code to scanned on the interface.
So why do we need to return a temporary token to the mobile phone?

Temporary token, like token, is also a kind of identity certificate. The difference is that it can only be used once, and it becomes invalid once used.

In the third step in the above figure, the temporary token is returned, so that the mobile phone can use it as a voucher in the next operation. In this way, it is ensured that the two-step login operation is issued by the same mobile phone.

6.4 Status confirmation
The final step is to confirm the status.

As shown in FIG:

1) After receiving the temporary token, the mobile phone will pop up the login confirmation interface. When the user clicks to confirm, the mobile phone carries the temporary token to call the interface of the server and tells the server that I have confirmed;
2) After the server receives the confirmation, it generates a token for the user's PC login based on the device information and account information bound to the QR code ID;
3) At this time, the polling interface of the PC can know that the status of the QR code has changed to "confirmed". And the token for user login 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 of the server.
The basic process of scanning the code is finished, and some details have not been introduced in depth.

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

1) It can be a QR code ID;
2) It can be a url address containing a QR code ID.
In the step of scanning the code to confirm, how to deal with the cancellation by the user? These details are left for everyone to think about.

7. Summary of this article

To sum up the code scanning and login logic of this article in layman's terms:

scan code login is:

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

In this process, we first briefly talked about two prerequisite knowledge:

• 1) One is the principle of QR code;
• 2) One is a token-based authentication mechanism.

Then we use the QR code status as the axis to analyze the logic behind this: through the token authentication mechanism and the QR code status change to achieve scan code login.

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

Usually we have another scenario that is also more common, which is to scan code to log in through third-party applications. For example, geek time/Nuggets can choose WeChat/QQ to scan code to log in, then this kind of scan code through third-party applications What is the principle of login?

Interested students can think about it, and welcome to leave your insights in the comments.

Appendix: More popular knowledge of IM development

"One entry is enough for beginners: Develop mobile IM from scratch"
"Mobile IM developers must read (1): easy to understand, understand the "weak" and "slowness" of mobile networks"
"A Must-Read for Mobile IM Developers (2): Summary of the Most Complete Mobile Weak Network Optimization Method in History"
"From the perspective of the client to talk about the message reliability and delivery mechanism of the mobile terminal IM"
"Summary of optimization methods for short connection of modern mobile network: request speed, weak network adaptation, security assurance"
"Tencent Technology Sharing: The Evolution of Bandwidth Compression Technology for Social Network Pictures"
"Little White Must Read: Gossip about Session and Token in HTTP Short Connection"
"IM Development Basic Knowledge Supplementary Lesson: Correctly Understanding the Principles of the Pre-HTTP SSO Single Sign-On Interface"
"How to ensure the efficiency and real-time performance of large-scale group message push in mobile IM? 》
"Technical issues that need to be faced in mobile IM development"
"Is it better to use byte stream or character stream for the development of IM? 》
"Does anyone know the mainstream implementation of voice message chat? 》
"Implementation of IM Message Delivery Guarantee Mechanism (1): Guarantee the reliable delivery of online real-time messages"
"Implementation of IM Message Delivery Guarantee Mechanism (2): Guaranteeing the Reliable Delivery of Offline Messages"
"How to ensure the "sequence" and "consistency" of IM real-time messages? 》
"A low-cost method to ensure the timing of IM messages"
"Should I use "push" or "pull" for online status synchronization in IM single chat and group chat? 》
"IM group chat messages are so complicated, how to ensure that they are not lost or repetitive? 》
"Talk about the optimization of login request in the development of mobile terminal IM"
"How to save data by pulling data during IM login on the mobile terminal? 》
"On the principle of multi-sign-in and message roaming on mobile IM"
"How to design a "failure retry" mechanism for a completely self-developed IM? 》
"Easy to understand: cluster-based mobile terminal IM access layer load balancing solution sharing"
"Technical Test and Analysis of WeChat's Influence on the Network (Full Paper)"
"Principle, Technology and Application of Instant Messaging System (Technical Paper)"
"The Status Quo of the Open Source IM Project "Mushroom Street TeamTalk": An Open Source Show with a Beginning and Ending"
"QQ Music Team Sharing: Detailed Explanation of Image Compression Technology in Android (Part 1)"
"QQ Music Team Sharing: Detailed Explanation of Image Compression Technology in Android (Part 2)"
"Tencent Original Sharing (1): How to greatly increase the speed and success rate of mobile phone QQ picture transmission under mobile networks"
"Tencent Original Sharing (2): How to significantly reduce the data consumption of APP under the mobile network (Part 1)"
"Tencent Original Sharing (3): How to significantly reduce the data consumption of APP under the mobile network (Part 2)"
"As promised: WeChat's own mobile IM network layer cross-platform component library Mars has been officially open sourced"
"How does Yelp based on social networks achieve lossless compression of massive user pictures? 》
"Tencent Technology Sharing: How Tencent significantly reduces bandwidth and network traffic (Picture Compression)"
"Tencent Technology Sharing: How Tencent significantly reduces bandwidth and network traffic (Audio and Video Technology)"
"Character encoding: a quick understanding of ASCII, Unicode, GBK and UTF-8"
"Comprehensively grasp the characteristics, performance, tuning, etc. of mainstream image formats on the mobile terminal"
"Behind the glamorous bullet message: the chief architect of Netease Yunxin shares the technical practice of the billion-level IM platform"
"IM development basic knowledge supplementary lesson (5): easy to understand, correctly understand and make good use of MQ message queue"
"WeChat Technology Sharing: Practice of Generating Massive IM Chat Message Sequence Numbers in WeChat (Principles of Algorithms)"
"Is it so difficult to develop IM yourself? Teach you to teach yourself an Andriod version of simple IM (with source code) "
"Rongyun Technology Sharing: Decrypting the Chat Message ID Generation Strategy of Rongyun IM Products"
"IM Development Fundamentals Supplementary Lesson (6): Does the database use NoSQL or SQL? Enough to read this! 》
"Suitable for novices: develop an IM server from scratch (based on Netty, with complete source code)"
"Pick up the keyboard and do it: work with me to develop a distributed IM system by hand"
"Suitable for novices: teach you to use Go to quickly build a high-performance and scalable IM system (source code)"
"What is the realization principle of "Nearby" function in IM? How to implement it efficiently? 》
"IM Development Basic Knowledge Supplementary Lesson (7): Principles and Design Ideas of the Mainstream Mobile Terminal Account Login Method"
"IM development basic knowledge supplementary lesson (8): the most popular in history, thoroughly understand the nature of the problem of garbled characters"
"IM "Scan" function is easy to do? Take a look at the complete technical realization of WeChat "Scan for Knowledge""
"How to realize IM's scan code login function? An article to understand the principle of scanning code login technology for mainstream applications"
"IM must scan the code to log in by mobile phone? Let's take a look at the technical principle of WeChat's scan code login function"
"IM Message ID Technology Topic (1): Practice of Generating Massive IM Chat Message Sequence Numbers on WeChat (Principles of Algorithms)"
"IM Message ID Technology Topic (2): Practice of Generating Massive IM Chat Message Serial Numbers in WeChat (Disaster Recovery Plan)"
"IM Message ID Technology Topic (3): Decrypting the Chat Message ID Generation Strategy of Rongyun IM Products"
"IM Message ID Technology Topic (4): Deep Decryption of Meituan's Distributed ID Generation Algorithm"
"IM Message ID Technology Topic (5): Technical Implementation of Open Source Distributed ID Generator UidGenerator"
"IM Message ID Technology Topic (6): Deep Decryption Didi's High-Performance ID Generator (Tinyid)"
"IM Development Collection: The most complete in history, a summary of various function parameters and logic rules of WeChat"
"IM development dry goods sharing: how do I solve a large number of offline messages causing the client to freeze"
"Introduction to zero-based IM development (1): What is an IM system? 》
"Introduction to zero-based IM development (2): What is the real-time nature of the IM system? 》
"Introduction to zero-based IM development (3): What is the reliability of the IM system? 》
"Introduction to zero-based IM development (4): What is the message timing consistency of the IM system? 》
"IM development dry goods sharing: how to elegantly realize the reliable delivery of a large number of offline messages"
"IM development and dry goods sharing: Youzan mobile terminal IM componentized SDK architecture design practice"
"A set of IM architecture technical dry goods for hundreds of millions of users (Part 2): reliability, orderliness, weak network optimization, etc."

More similar articles...

This article has been simultaneously published on the official account of "Instant Messaging Technology Circle".

▲ The link of this article on the official account is: click here to enter. The synchronous publishing link is: http://www.52im.net/thread-3525-1-1.html