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

In this issue, the editor will bring you about the principle of Wechat QR code login. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

When using Wechat on your computer, you may have found that Wechat does not provide the traditional account password to log in, but instead logs in by scanning a QR code. Today, we are going to study how to achieve the next landing on Wechat.

1. Every time the user opens the PC login request, the system returns a uid, and the information of uid is drawn as a QR code to return to the user. The uid here must be your own, otherwise it will cause you to log in to other users' accounts or other users to log in to your account.

2. When the user scans the QR code using the logged-in Wechat, the uid will be bound to the token generated by the Wechat account and password on the phone and uploaded to the server.

3. WEB constantly initiates requests to the backend through JS to query whether there is a login record about uid (whether uid and token exist on the server). The implementation code can be obtained from the Wechat page:

Function _ poll (_ asUUID) {var _ self = arguments.callee, _ nTime = 0; _ sCurUUId = _ asUUID; _ logInPage ("_ poll Request Start, time:" + new Date (). GetTime ()); _ nTime = new Date (). GetTime () Ajax ({type: "GET", url: "https://login." + _ sBaseHost +" / cgi-bin/mmwebwx-bin/login?uuid= "+ _ asUUID +" & tip= "+ show_tip, dataType:" script ", cache: false, timeout: _ nAjaxTimeout, success: function (data, textStatus, jqXHR) {_ logInPage (" _ poll Request Success ") Code: "+ window.code +", time: "+ (new Date (). GetTime ()-nTime) +" ms ") Switch (_ aoWin.code) {case 200: _ sSecondRequestTime = new Date (). GetTime ()-_ sSecondRequestTime; _ logInPage ("SecondRequest Success, time:" + _ sSecondRequestTime + "ms"); clearTimeout (_ oResetTimeout) Get (_ aoWin.redirect_uri + "& fun=new", function (msg) {_ logInPage ("new func reponse, reponseMsg:" + msg); _ reportNow ("new func reponse, reponseMsg:" + msg); var code = msg.match (/ (. *) /) If (code) {eval (code [1]);} else {$("# container") .show (); $("# login_container") .hide ();}}) _ reportNow ("/ cgi-bin/mmwebwx-bin/login, SecondRequest Success, uuid:" + _ asUUID + ", time:" + _ sSecondRequestTime + "ms"); break; case 201: clearTimeout (_ oResetTimeout); show_tip = 0; $('.errorMsg'). Hide () $('.normlDesc'). Hide (); $('.normlDesc'). Show (); _ logInPage ("First Request Success"); _ reportNow ("/ cgi-bin/mmwebwx-bin/login, First Request Success, uuid:" + _ asUUID) / / setTimeout (function () {_ logInPage ("SecondRequest Start"); _ reportNow ("/ cgi-bin/mmwebwx-bin/login, SecondRequest Start, uuid:" + _ asUUID); _ sSecondRequestTime = new Date (). GetTime (); _ nAjaxTimeout = 5 * 1000 _ self (_ asUUID); / /}, 500); break; case 408: setTimeout (function () {_ self (_ asUUID);}, 500); break Case 400: case 500: _ reset (); _ afterLoadWebMMDo (function () {_ aoWin.Log.d ("500, Login Poll Svr Exception");}); break }, error: function (jqXHR, textStatus, errorThrown) {if (textStatus = = 'timeout') {setTimeout (function () {_ self (_ asUUID);}, 500) } else {setTimeout (function () {_ self (_ asUUID);}, 5000); _ logInPage ("_ poll Request Error:" + textStatus); _ afterLoadWebMMDo (function () {_ aoWin.Log.e ("Login Poll Error:" + textStatus) });})

The web client initiates a ssl request to the server every 500ms to request the login information of the current QR code. If the result is returned, it means that the same account login authorization of the scanned QR code terminal has been obtained. When other results are returned, the request will be re-initiated after 500ms.

There are still many application scenarios similar to Wechat landing scenarios, such as authorization between devices through QR codes. For example, using a mobile phone to remotely control a TV box equipped with an android system.

The above is the Wechat QR code login principle that Xiaobian shared for you. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.