This article quotes the author “big gu classmate” “WHAT is the principle of two-dimensional code scan code login” the main content of the article, in order to better understand and read, the instant communication network is included when the revision and change, thanks to the original author’s share.
1, the introduction
This seems to be seen more and more in IM since wechat’s PC login logic has been used (although I personally think this is a cool way to log in, it’s not very convenient, especially if you don’t have a phone nearby).
▲ The scan code login interface of wechat PC
Recently just saw a TWO-DIMENSIONAL code technical principle explanation video, just take this opportunity to scan the code login detailed technical principles of combing and summarizing, convenient for their own review, but also hope to help to want to develop similar functions in THE IM peers.
Supplementary note: this article involves the scanning-code login principle is not only for THE IM system, the same applies to other systems outside of IM.
Learning and communication:
- Im/Push Technology Development Exchange 5 groups: 215477170 [Recommended]
- Introduction to Mobile IM Development: One Entry is Enough: Developing Mobile IM from Zero
- Open source IM framework source: https://github.com/JackJiang2…
(synchronous published in this article: http://www.52im.net/thread-35…
2. Thematic catalogue
This article is the third in a series. The general contents are as follows:
IM Scanning Login Technology Topic (I) : Wechat Scanning Login Function technical Principle Debugging Analysis
IM Scanning login technology Topic (2) : Market Mainstream Scanning login technology Principle Debugging analysis
“IM scan code login technology topic (3) : easy to understand, IM scan code login function detailed principle of one is enough” (* article)
3. The nature of QR code login
3.1 Is Scanning The Login Code Secure? In the process of two-dimensional code scanning code login, you may have a question: is the TWO-DIMENSIONAL code safe? Will my personal information be disclosed? Dare I do a scan code login for my IM system?
In view of these concerns, we need to understand the nature of the technology and logic behind qr code scanning login.
3.2 Technical Nature of Scanning-code Login Two-dimensional code scanning-code login is also a login authentication method 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. Here’s a practical example to understand:
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?
Take the scanning code login of Weido as an example: 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 — “tell the system who I am” — is pretty clear!
PS: By scanning the QR code, the mobile phone account information to the PC end, as for the specific transmission, 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.
4. Recognize the QR code
So how to do scan code login confirmation? 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!
▲ This is the one-dimensional code
The so-called one-dimensional code is the bar code. The bar code is actually a string of numbers. Take the goods in our daily life as an example, the one-dimensional code stored on it is the number of the goods.
The TWO-DIMENSIONAL code is similar to the barcode, except that it does not necessarily store numbers, but can also be any string, you can think of it as another form of 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.
▲ Input a string can generate a TWO-DIMENSIONAL code
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.
▲ This is the QR code (content has been blurred)
You can also upload a QR code, “decode” it, and then parse out what it means.
5, how is the traditional system login authentication?
After understanding the QR code, we have a look at the traditional login 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 this mechanism works.
As the picture above shows:
1) When logging in with the account and password, the client will send the device information to the server. 2) If the account 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: ‘login deviceid ‘,
DeviceType: ‘deviceType, such as iso,android, PC…… ‘,
}
Then the server will generate a token 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.
Concrete is:
1) After the client obtains 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 by the client every time. If the information is the same, the verification passes and the AP interface response data is returned. If the information is different, the verification 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: know also does not affect, because the device information is unique, as long as your device information others do not know, others take other devices to access, authentication is not through.
It can be said that the purpose of client login is to obtain their own token.
Limited by space, the following articles can be read in detail:
IM Development Basics (1) : Correctly understand the principles of the pre-HTTP SSO interface
Understanding cookies, Sessions, and Tokens in HTTP short connections
IM Development Basic Knowledge Supplement (VII) : Principle and Design Ideas of Mainstream Mobile Account Login Mode (recommended)
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.
6. Detailed technical steps for scanning code login
6.1 General Process
As the picture above shows:
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. After confirming, the login on the PC terminal succeeds. As you can see, the QR code has three states in the middle: to be scanned, scanned to be confirmed, and confirmed.
So imagine:
The specific explanation is:
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 the PC terminal device information is bound; 2) Scan the QR code with your phone; 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 terminal confirms the login, it will generate the token used by the PC terminal for login and return it to the PC terminal. Ok, now that we have the basic idea, let’s make the whole process a little bit more concrete.
6.2 Preparation of TWO-DIMENSIONAL Code According to different states of two-dimensional code, the first is the state of waiting for scanning. When the user opens the PC and switches to the login interface of two-dimensional code.
As the picture above shows:
1) THE PC side initiates a request to the server side, telling the server side that I want to generate the QR code for user login, and the PC side device information is also passed to the server side; 2) After the server receives the request, it generates the QR code ID and binds the QR code ID to the PC device information; 3) Then return the QR code ID to the PC; 4) After receiving the QR code ID, the PC generates the QR code (the QR code must contain the ID); 5) in order to know the state of two-dimensional code in time, the client in the display of two-dimensional code, PC end polling server, such as polling once every second, the request server to tell the state of the current two-dimensional code and related information. The QR code is ready, and the next step is the scanning status.
6.3 Scanning Status Switchover
As the picture above shows:
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 call the server API to send the identity information of the mobile terminal and the QR code ID to the server; 3) After receiving, the server can bind the identity information with the QR code ID and generate a temporary token. And then it goes back to the phone; 4) Because the 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 have been scanned 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.
Returning a temporary token in the third step in the figure above means that the phone can use it as a credential in the next step. To ensure that the scan and login steps are from the same phone.
6.4 Status Confirmation Finally, the status is confirmed.
As the picture above shows:
1) After receiving the temporary token, the mobile terminal will pop up the login confirmation interface. When the user clicks confirm, the mobile terminal will carry the temporary token to call the interface of the server and tell the server that I have confirmed; 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, it can know that the state of the QR code has become “confirmed”. And from the server can get the user login token; 4) At this point, the login is successful, and the back-end PC can use the token to access the resources of the server. Scan code action of the basic process is finished, some details have not been introduced in depth.
For example, what is the content of the QR code?
1) Can be two-dimensional code ID; 2) It can be a URL containing 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.
7. Summary of this paper
Generically summarize the scan code login logic of this article is:
The essence of scanning login is:
- 1) Tell the system who I am;
- 2) Prove to the system who I am.
In this process, we first briefly talk about two premises:
- 1) One is the principle of TWO-DIMENSIONAL code;
- 2) 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 opinion in the comments.
Appendix: More IM development hot topics
Mobile IM Developers must Read (1) : Easy to Understand and understand the “weak” and “slow” of the Mobile Web. Mobile IM Developers must read (2) : Most complete history of moving weak network optimization method summary “from the client point of view to talk about the news of the mobile terminal IM reliability and service mechanism, the modern mobile terminal network short connection optimization to summarize: request speed and weak network security, and adapt the tencent technology sharing: social network road to the bandwidth of the image compression technology evolution, the small white stuff: Gossip Session and Token in HTTP Short Connection “IM Development Basic Knowledge supplement: Correctly Understand the principle of THE PRE-HTTP SSO Interface” “How to Ensure the Efficiency and Real-time Performance of large-scale Group Message Push in mobile IM?” “Mobile IM Development needs to face the technical issues” “Is it better to design the protocol using byte stream or character stream?” Does anyone know the mainstream implementation of voice mail chat? “IM message delivery guarantee mechanism implementation (1) : ensure the reliable delivery of online real-time messages” “IM message delivery guarantee mechanism implementation (2) : ensure the reliable delivery of offline messages” “How to ensure the REAL-TIME IM message” timing “and” consistency “? “A Low-cost way to Ensure timing of IM Messages.” “Should I push or pull online status synchronization in IM chats and groups?” IM group chat messages are so complicated, how to ensure not to lose weight? “Talk about the optimization of login request in mobile IM development” “How to pull data when mobile IM login to save traffic?” “Talking about the principle of mobile IM multi-point login and message roaming” “how to design the” failure retry “mechanism completely developed by myself IM?” “Easy to understand: Load Balancing Scheme Sharing of Mobile IM Access Layer Based on Cluster” “Technical Test and Analysis of Wechat’s Influence on the Network” “Principle, Technology and Application of Instant Messaging System” “Open source IM project” Mogujie TeamTalk” An open source show “QQ music team share: Android in the picture compression technology (part one)” “QQ music team share: Android in the picture compression technology (part two)” “Tencent original share (a) : How to greatly improve the mobile network mobile QQ picture transmission speed and success rate “Tencent original sharing (two) : How to greatly compress the mobile network APP traffic consumption (part ONE)” “Tencent original sharing (three) : How to greatly compress the mobile network APP traffic consumption (part two)” “as promised: Wechat’s self-used mobile IM network layer cross-platform component library Mars has been officially open source “How can Yelp achieve lossless Compression of massive user images Based on social network?” “Tencent technology sharing: Tencent is how to significantly reduce bandwidth and network traffic (picture compression)” “Tencent technology sharing: Tencent is how to significantly reduce bandwidth and network traffic (audio and video technology)” “Character coding that thing: Quickly understand ASCII, Unicode, GBK and UTF-8, Comprehensively master the characteristics, performance, and optimization of mainstream picture formats on mobile terminals, Behind the Bright Bullet SMS: Chief Architect of netease Yunxin Shares the Technical Practice of 100-million-level IM Platform, IM Development Basic Knowledge (V) : Easy to understand, correct understanding and good MQ message queue “wechat technology to share: Wechat mass IM chat message serial number generation practice (algorithm principle)” “self development IM is so difficult? Hand to hand teach you from a Simple Andriod version IM (source)” “melting cloud technology to share: Decrypt the chat message ID generation strategy of Rong Yun IM product “IM development foundation knowledge make-up lesson (6) : Database use NoSQL or SQL? Read this article! “Suitable for beginners: from zero to develop an IM server (based on Netty, complete source code)” “Pick up the keyboard is dry: with me to develop a distributed IM system” “suitable for beginners: “What is the realization principle of” people near “function in IM? How to achieve it efficiently?” IM Development basic knowledge supplement (vii) : Principle and design ideas of mainstream mobile Terminal Account login mode The most popular in history, Thoroughly understand the nature of the characters garbled question “” IM” scan “function very well do? Look at WeChat” scan “knowledge of the complete technical implementation of the IM and code the login function how? Is sweeping login code technology applied to understand the mainstream principles of the sweep IM doing mobile phone login code? Look to sweep WeChat login code function principle” IM Message ID Technology Topic (1) : Wechat mass IM Chat message serial number generation practice (algorithm principle) IM message ID Technology Topic (2) : wechat mass IM chat message serial number generation practice (Disaster Solution) IM message ID Technology Topic (3) : Decrypt Chat message ID generation strategy of Rongyun IM product IM Message ID Technology Topic (4) : Deep Decrypt Distributed ID generation algorithm of Meituan IM Message ID Technology Topic (5) : Technical Implementation of open source Distributed ID Generator UidGenerator IM Message ID Technology Topic (6) : Deep decrypt Didi high-performance ID generator (Tinyid) “IM development book: the history of the most complete, wechat various function parameters and logic rules data summary” “IM development dry cargo share: HOW DO I solve a large number of offline messages caused by the client card” “Zero-based IM development entry (1) : What is THE IM system?” Introduction to Zero-based IM Development ii: What is Real-time IN IM Systems? Introduction to Zero-based IM Development iii: What is RELIABILITY for IM Systems? Introduction to Zero-based IM Development (part 4) : What is Message Timing Consistency for IM Systems? “IM development dry goods to share: how to achieve elegant reliable delivery of a large number of offline messages” “IM development dry goods to share: you like mobile IM modular SDK architecture design practice” “A set of 100 million users OF THE IM architecture technology dry goods (second) : reliability, order, weak network optimization, etc.
More similar articles…
This post has been posted on the “Im Technosphere” official account.
▲ The link of this article on the official account is: click here to enter. The synchronous publish link is:http://www.52im.net/thread-35…
