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 an authenticated and legitimate user before scanning (the authentication method can be 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 the 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 give 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.的回调函数里做你想做的事情了。关于goeasy推送的使用，大家可以参考这篇博客： http://www.cnblogs.com/jishaochengduo/articles/5552645.html，另外GoEasy推送官网上也有一个demo：GoEasy二维码扫码登录demo,大家可以去看看效果.
希望对大家有帮助，如有理解错误的地方，还请大家斧正。