Shulou(Shulou.com)06/01 Report--

What is the implementation principle of scanning code login in the browser? I believe that many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Requirement introduction

First of all, introduce what is code scanning login. Nowadays, most students' mobile phones are equipped with such software as qq, Taobao, Tmall and so on. And the enterprises that develop these app all have their corresponding websites. In order to make it more convenient and secure for users to log in when using their website. These companies provide services that can be logged in by using a mobile phone and scanning a scan. The effect of logging in to a web page is as follows:

Many friends may find it amazing that the web page only shows a QR code, how does it know which phone scanned the QR code and logged in? Moreover, after logging in, it is really amazing to be able to display the user information directly to the user.

Explain the principle of web side + server

Next is the detailed implementation of the service. First of all, a rough description of the principle: when the user opens the login page of the website, the user sends a request to the browser's server to obtain the login QR code.

After the server receives the request, it randomly generates a uuid, stores the id as the key value in the redis server, and sets an expiration time. After it expires, the user logs in the QR code and needs to refresh and retrieve it.

At the same time, combine this key value with our verification string to generate a picture of a QR code through the QR code generation interface (QR code generation, there are many ready-made interfaces and source codes on the Internet, which are not introduced here. The QR code picture is then returned to the user's browser along with uuid.

After the browser gets the QR code and uuid, it will send a request to the browser every other second whether the login is successful or not. The request carries uuid as the identifier of the current page. Some students here will wonder that the server only stores a uuid as the key value in redis, how can there be the user's id information?

It is true that there is the user's id information, which is stored in the redis by the mobile server.

Mobile + server

In other words, after the browser gets the QR code, it displays the QR code on the web page and gives the user a hint: please take out your mobile phone, open it and scan it to log in. Users take out their mobile phone to scan the QR code and get an authentication message and a uuid (the function of scanning the QR code to obtain a string also has a lot of demo on the Internet, which will not be described in detail here).

Since the mobile end has already logged in, a user's token is returned in the parameters when accessing the mobile server, from which the mobile server can resolve to the user's userId (here, taking a value from the token instead of passing the userid directly to the phone is for security, and the direct transmission of the userid may be intercepted and modified. The token is encrypted, and the risk of modification is much smaller).

The mobile end sends a verification login request to the server with the parsed data together with the user's token (the server here is the mobile server, and the mobile server is not the same server as the web server).

After receiving the request, the server first compares the authentication information in the parameters to determine whether it is the user login request interface. If so, return a confirmation message to the phone.

After receiving the return, the mobile phone will display the login confirmation box to the user (prevent the user from misoperation, and at the same time make the login more humanized). After the user confirms that the login operation is carried out, the mobile phone sends the request again. After the server gets the uuId and userId, it stores the user's userid as a value in redis with uuid as the key-value pair of key.

Login succeeded

Then, when the browser sends the request again, the server on the browser side can get a user Id and call the login method to sound into a token on the browser side. When the browser sends the request again, the user information is returned to the browser and the login is successful.

The reason why the user id is stored here rather than the user information directly is that the user information on the mobile side is not necessarily the same as that on the browser side.

The login schematic is as follows:

After reading the above, have you mastered the principle of the browser's code-scanning login implementation? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.