Recently, I am working on a scan code login function. For this reason, I also searched the Internet about the implementation of WeChat scan login. When this function was completed, I decided to sort out the entire implementation idea, so that I can check it later and facilitate other programmers with similar needs.
To achieve scan code login, we need to solve two problems:
1. How to solve the permission security problem without entering the user name and password? In other words, how to let the server know that the client who scans the QR code is a legitimate user?
2. How does the server respond in real time on the web page according to the user's choice on the client?
First of all, let's take a look at the implementation ideas of WeChat to facilitate our understanding of the direction of thinking to solve this problem. The QR code for WeChat login actually converts a URL into a QR code. After scanning the code through the WeChat client, it simply opens the url. The url of the WeChat QR code I captured is https:/ /login.weixin.qq.com/l/YdmTu30I5A== , YdmTu30I5A== in this url represents the unique ID of this session, which is somewhat similar to the session id in the browser , through this ID, WeChat can Orientation feeds back the confirmation result to the web page. To use the WeChat QR code login function, there are two prerequisites: First, the WeChat app needs to be installed on the client . The second is that the user needs to log in to the WeChat app . https://wx.qq.com/
Why do these two conditions exist? That's because when WeChat confirms whether to allow login to the web version, WeChat needs to extract the login information of the current app and send the above session ID to the server, so that the server can confirm two things after receiving the login information and session ID: One is to confirm that the logged-in client user is authenticated; the other is to know which web page to push the feedback result to through the session ID server.
So for the first point, our key is to make sure that the user is a verified and legal user before scanning (the verification method can be a username + password, or a secure key ), and when choosing whether to log in, use This result is pushed to the server side, just fine. If the user does not verify whether it is legal or not, it can directly tell the user that the QR code is not recognizable or prompt to log in to the app first .
With authentication, now to solve the second problem, how to display the feedback results on the web page in real time? Some friends may say that the client side is very simple to send a request to the background, and the webpage is sent to the server side regularly with ajax to see if there is any feedback. I disapprove of this practice, because the ajax polling method is very resource-intensive on the client and server side! Another technology is involved here - web real-time push technology. Using push technology can save server and client resources, and can push and receive any message stably. In the process of implementation, I used a third-party push service - GoEasy push, which is very simple to implement. Other functions in our project also use the GoEasy web real-time push service, so here I directly use the GoEasy push service. Push the login feedback result to the server. My implementation steps are very simple. The transmitted session ID is used as the communication channel between the client and the web page . The web page subscribes to the session ID as the value channel . The client sends the verification result and session ID to the server, and the server can pass this channel . Actively push the results to the web version! If the client also needs to make corresponding feedback, then the client only needs to subscribe to this channel , and then the server will push the results to the web version and the client at the same time.Do what you want in the callback function. Regarding the use of goeasy push, you can refer to this blog: http://www.cnblogs.com/jishaochengduo/articles/5552645.html , and there is also a demo on the official website of GoEasy push : GoEasy QR code scan code to log in demo , everyone You can go to see the effect .
I hope it will be helpful to you. If there is any misunderstanding, please correct me.