Preface
With the popularity of wx, the "scan code login" function will be used in some business scenarios for development students, especially on the PC web page. There is no development experience in this area before, so I was a little panicked when receiving this demand. , Finally realized this function by consulting the information on the Internet and under the guidance of the boss. It has been put into use now, and it is quite exciting after the realization. Hereby record the realization process.
Principle analysis
The realization of scan code login requires the cooperation of the server on the mobile phone and the server on the web. It can be roughly divided into the following steps:
step1: Request a QR code
to log in on the web page To achieve a QR code login on the web version, the user must first request a QR code to log in. After the web-side server receives the user's request to log in to the QR code, it will randomly generate a uuid (this uuid is used as the unique identifier of the page), and will use this uuid as a key-value pair key and store it in the backend Redis. We will talk about the value of this key-value pair stored in Redis later.
It should be noted that the key-value pair stored in Redis must be set with an expiration time, otherwise it will remain in the login state after logging in with this uuid once.
When the browser side gets the QR code information returned by the web server, it parses the uuid in it, and uses this uuid to continuously go to the background to poll whether the login has been successful. If the background has been successfully logged in, the Web terminal will automatically jump to the successful login page. Otherwise, it will keep polling until the QR code becomes invalid (here we found that it is really necessary to set a valid time for the QR code. If the QR code does not have a valid time, it will continue to poll the background, which will cause a lot of trouble to the background. pressure).
So the key point above is how does the web server judge whether the user has successfully scanned the code and logged in? Please see the steps below.
step2: Store the user id in Redis on the mobile phone
After the user requests the QR code, he starts to take out his mobile phone and open the corresponding App to scan the QR code. During the scanning process, the mobile phone will submit the uuid and the token information obtained after the mobile terminal login to the mobile terminal server.
The server on the mobile phone will first use the token information to determine whether the user is legal and whether it has been logged in normally. If it is judged that it has been logged in normally, then the userId of the user and the submitted uuid will be stored in Redis as a key-value pair (uudi-userId). Here is an answer to the question left by the step.
Simply put, there is so much work done on the mobile phone. Let us continue back to the web side.
step3: Web-side polling success
As mentioned in step one: the QR code login page will continuously poll whether the login is successful. The basis here is that there is a uuid-userId key-value pair in Redis. If this key-value pair already exists, it means that the mobile phone has been scanned and logged in.
Once the web server determines that the mobile phone has been scanned and logged in, it can log in with the userId. And return the necessary user information and token information to the web front end. So far, the web terminal login is successful.
Brief summary
This article records a simple version of scan code login, but it can also describe the general principle of scan code login. There should still be many details to consider in the actual development process. Such as security issues. Specifically, we still need to conduct actual combat.