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

This article introduces the relevant knowledge of "how to use js to achieve QR code login". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Why does the web add QR code login?

With the frequency of use of the mobile terminal and the long-term login status of the mobile terminal, you can easily log in to the web terminal by scanning the code, mainly because there is no input in the whole login process.

2. Analysis of the login process of QR code

1) the server generates the QR code, and the browser loads the generated QR code image (be careful not to use the front-end js to generate the QR code, which may cause compatibility problems) and js polls whether the QR code has been logged in, setting the QR code to be polled every three seconds and the QR code expires in one minute.

2) scan the code on the mobile side, according to the link address of the QR code plus the user who has logged in on the mobile side, execute the request, and the server marks the QR code has logged in.

3) when the browser polls that the QR code has been logged in, you can jump to the login. For more information, please see the sequence diagram below.

3. Implementation of QR code login

For more information, please see Code Cloud address: https://gitee.com/nature-edu/edu-qrcodelogin-web

Implement screenshot:

1) generate the login QR code and display

2) polling whether the QR code is logged in

Query whether the QR code is logged in every 3 seconds. The query time is 1 minute, and the QR code expires after 1 minute.

3) the login QR code expires

If you have not logged in for more than one minute, the QR code timeout is displayed, and the query is no longer polled. If you need to log in again, refresh it.

4) simulated scan code login

"how to use js to achieve QR code login" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.