Codewords are not easy, and helpful students hope to pay attention to my WeChat public account: Code program life, thank you! The code is self-used and fetched.
Principles of Scan Code Login
Scan code login can be divided into two processes: the interaction between the mobile terminal and the server and the interaction between the pc and the server.
1.1 PC and server
- When the user opens the login page, the page will initiate a request to the server to obtain the login QR code.
- After the server receives the request, it randomly generates a uuid (unique identifier), stores the uuid in the server, and sets an expiration time. If it expires, you need to obtain the QR code again.
- Generate a QR code from uuid and verification information, and return the QR code and uuid to the pc page.
- After getting the QR code and uuid on the pc page, initiate a poll. There are two situations for polling: one is the login is successful, the other is the QR code is expired, and the user needs to refresh the QR code when it expires.
1.2 Mobile and server
- After scanning the code on the mobile terminal, you will get the verification information and uuid. Because the mobile terminal has already logged in, there is current user information (token, userId, etc.) locally, and the mobile terminal will need to bring user information and verification information, and send a login request to the server.
- After receiving the request, the server compares the verification information in the parameters to determine whether it is the user login request interface, and if so, returns a confirmation message to the mobile terminal.
- After receiving the return, the mobile terminal displays the login confirmation box to the user. After the user confirms that it is a login operation, the mobile terminal sends the request again.
- After the server obtains the uuid and the user information of the mobile terminal, it modifies the user's status, and returns the status of successful login and the user information to the PC terminal.
- The pc terminal polls to get the status of successful login, obtains the login information, and the login is successful!
1.3 Diagram
Checking the status of the QR code on the PC side is not only a polling method, but also the familiar sockets.
- Socket mode: The PC side maintains a long connection with the server. When the mobile phone scans the QR code, it is sent to the server for the first time with the parsed QR code ID. When the server receives this request, it means that the user has already After scanning the QR code, the server can tell the PC that the QR code has been scanned through the socket and wait for confirmation; after that, whether the mobile phone cancels the login or confirms the login, it will request the server accordingly, and the server will receive the request according to the corresponding Logic processing, and then notify the PC to update the corresponding status.
- Polling mode: The polling mode is to create a timer on the PC side, request the server to query the status update status at regular intervals, and then update the display information of the web page. At that time, the timer had to control the startup timing and life cycle, because the QR code on the PC side may not be scanned, or there is no next step after scanning. At this time, if the timer is not controlled, the PC side will be Always request the server to query, resulting in a waste of resources and a certain performance loss.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible Number, please pay attention, thank you
After paying attention to the official account , reply to the front-end interview questions and receive a large number of front-end interview questions summary pdf data
