微信QQ的二维码登录原理js代码解析

这篇文章主要大家详细解析了微信QQ的二维码登录原理js代码，
具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在很多地方就是都出现了使用二维码登录，二维码付款，二维码账户等应用(这里的二维码种马，诈骗就不说了)，

二维码验证，多终端辅助授权应用开始多起来，这里先说下啥是二维码，其实二维码就是存了二进制数据的黑白图片，

当出现要求二维码登录的时候，服务器会生成一条临时的唯一的二维码信息，发送到客户端以二维码(图片)的形式写入到网页，

然后你就会看到统一的四个方形的二维码，如果做的好这个二维码信息应该是有时效的，这里暂且不考虑这些，

就简单的微信登录作为例子看看吧：

首先说下整个授权流程：

在客户端网页中会不断向服务器发送https连接，并且这里传输很少的数据之后就断开连接了，下面看下微信网页中这个login1c709c.js文件：

(function($, _aoWin) {  

 _aoWin.QRLogin = {};

  _aoWin.LoginLog = "";

 var _sBaseHost = "",

    _oLoginQrCodeImg = document.getElementById("loginQrCode");

 if (document.domain == "qq.com") {

 _sBaseHost = "weixin.qq.com";

 } else if(location.hostname.match(/(wechat\.com)$/)){

 _sBaseHost = "wechat.com";

 }else{

    _sBaseHost = "wechatapp.com";

  }  

 var show_tip = 1,

 _sCurUUId,

 _oResetTimeout,

    _aWebMMCallbacks = [],

    _oDetactWebMMInterval = setInterval(function(){

      if(_aoWin.WebMM){

        clearInterval(_oDetactWebMMInterval);

        var callback;

        while(callback = _aWebMMCallbacks.shift()){

          if(typeof(callback) != "function") continue;

          callback();

        }

      }

    }, 1000);  

  function _logInPage(_asLog){

    _aoWin.LoginLog = LoginLog + _asLog + "\n";

  }  

  function _afterLoadWebMMDo(callback){

    if(!_aoWin.WebMM){

      _aWebMMCallbacks.push(callback);

    }else{

      callback();

    }

  }  

  function _reportNow(text){

    _logInPage(text);

    _afterLoadWebMMDo(function(){

      WebMM.ossLog({Text: text});

      WebMM.flushOssLog();

    });

  }  

  var reLoadQRImgCount = 0,

    loadQRCodeTime = 0,

    loadQRImgSucc = function(){

      clearInterval(loadQRImgWatchDog);

      _logInPage("Load QRCode Success, time=" + (new Date().getTime() - loadQRCodeTime) + "ms, reload count: " + reLoadQRImgCount);

    },

    loadQRImgFail = function(img){

      _reportNow("Load QRcode fail!" + status + ", src: " + img.src + ", time: " + (new Date().getTime() - loadQRCodeTime) + "ms");

    },

    loadQRImgWatchDog = null;

 function _loadQRImg(uuid) {

    _poll(uuid);

    _logInPage("Load QRCode Start");

    loadQRCodeTime = new Date().getTime();  

    _oLoginQrCodeImg.onload = function(){

      loadQRImgSucc();

      _oLoginQrCodeImg.onload = null;

    };

    _oLoginQrCodeImg.onerror = function(){loadQRImgFail(this)};

    _oLoginQrCodeImg.src = "https://login."+_sBaseHost+"/qrcode/"+uuid+"?t=webwx";  

    loadQRImgWatchDog = setInterval(function(){

      if (reLoadQRImgCount >= 5) {

        _reset();

        return;

      }

      reLoadQRImgCount++;  

      var _img = new Image();

      _img.onload = function () {

        if(!_oLoginQrCodeImg.onload) return;  

        _oLoginQrCodeImg.onload = null;

        _oLoginQrCodeImg.src = this.src;//replace

        loadQRImgSucc();

      };

      _img.onerror = function(){loadQRImgFail(this)};

      _img.src = _oLoginQrCodeImg.src + "&r=" + new Date().getTime();

    }, 5000);

  }  

  var _sSecondRequestTime = 0,

    _nAjaxTimeout = 100 * 1000,

    _nNewLoginFuncErrCount = 0;

 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("Second Request Success, time: " + _sSecondRequestTime + "ms");

  clearTimeout(_oResetTimeout);  

        var _fNewLoginFunc = function(){

          $.ajax({

            url: _aoWin.redirect_uri + "&fun=new",//new login page

            type: "GET",

            success:function(msg) {

              _logInPage("new func reponse, reponseMsg: " + msg);

              var code = msg.match(/<script>(.*)<\/script>/);

              var skey=msg.match(/<skey>(.*)<\/skey>/);

              if(code){

                eval(code[1]);

              }else{

                $("#container").show();

                $("#login_container").hide();

              }

              if(skey && skey[1]){

               WebMM.model("account").setSkey(skey[1]);

              }

            },

            error:function(jqXHR, textStatus, errorThrown){

              _nNewLoginFuncErrCount++;

              if(_nNewLoginFuncErrCount > 5){

                if(confirm("Call new login page func error, refresh?")){location.reload()}

                return;

              }

              _reportNow(_aoWin.redirect_uri + " New login page func error: " + textStatus +" retryCount:" + _nNewLoginFuncErrCount);

              setTimeout(_fNewLoginFunc, 500);

            }

          });

        };

        _fNewLoginFunc();  

        _reportNow("/cgi-bin/mmwebwx-bin/login, Second Request Success, uuid: " + _asUUID + ", time: " + _sSecondRequestTime + "ms");

  break;  

  case 201:

        clearTimeout(_oResetTimeout);

  show_tip = 0;

  $('.errorMsg').hide();

  $('.normlDesc').hide();

  $('.successMsg').show();

        _reportNow("/cgi-bin/mmwebwx-bin/login, First Request Success, uuid: " + _asUUID);

        _reportNow("/cgi-bin/mmwebwx-bin/login, Second Request Start, uuid: " + _asUUID);  

        _sSecondRequestTime = new Date().getTime();  

        //_nAjaxTimeout = 5 * 1000;

        _self(_asUUID);

        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);

        });

  }

 }

 });

 }  

  var getUUIDCount = 0,

    _getUUIDWatchDog,

    _bGetUUIDSuccess = false;//ajax successִ

 function _getUUID() {

    getUUIDCount++;

    var _self = arguments.callee,

      _loadError = function(errorText){

        _reportNow("Load UUID Error! ErrorText: " + errorText + " getUUIDCount=" + getUUIDCount);

        if(getUUIDCount > 5){

          if (confirm("Load uuid error. Refresh?")) {

            location.reload();

          }

        }

        setTimeout(function(){

          _self();

        }, 500);

      };  

    clearTimeout(_getUUIDWatchDog);

    _getUUIDWatchDog = setTimeout(function(){

      if(!_aoWin.QRLogin.code){

        _logInPage("GetUUID Timeout, WatchDog Run");

        _self();

      }

    }, 10000);  

    $.ajax({

      type: "GET",

      url: "https://login." + _sBaseHost + "/jslogin?appid=wx782c26e4c19acffb&redirect_uri="+encodeURIComponent(location.protocol+"//"+location.host+"/cgi-bin/mmwebwx-bin/webwxnewloginpage")+"&fun=new&lang=" + document.lang,

      dataType: "script",

      cache: false,

      success : function(){

        clearTimeout(_getUUIDWatchDog);

        if(_bGetUUIDSuccess) return;

        if (_aoWin.QRLogin && _aoWin.QRLogin.code == 200) {

          _logInPage("GetUUID Success, UUID=" + QRLogin.uuid);

          _bGetUUIDSuccess = true;  

          clearTimeout(_oResetTimeout);

          _oResetTimeout = setTimeout(function(){

            location.reload();//Note: Don't run _reset(). If you run _reset(), there will may have many _poll request, as they get 408 return code

          }, 5 * 60 *1000);//5 mins  

          _loadQRImg(QRLogin.uuid);

        } else {

          var QRLoginCode = (_aoWin.QRLogin && _aoWin.QRLogin.code) ? _aoWin.QRLogin.code : "None";

          _logInPage("GetUUID Error, QRLogin.code=" + QRLoginCode);

          _loadError("QRLogin.code= " + QRLoginCode);

        }

      },

      error : function(xhr, textStatus, errorThrown){

        _logInPage("GetUUID Error, textStatus=" + textStatus);

        _loadError(textStatus);

      }

    });

 }  

  function _reset(){

    location.reload();

  }  

 if ($("#login_container").is(":visible") ) {

    _getUUID();

 }  

 var _bHadLog = false;

 function _ossLog() {

 if (_bHadLog) return;

 _bHadLog = true;

 var _sUvid = document.cookie.match(new RegExp( "(^| )"+"webwxuvid"+"=([^;]*)(;|$)"));

    if(!_sUvid || _sUvid.length < 3) return;

    _sUvid = _sUvid[2];

 (new Image()).src = "/cgi-bin/mmwebwx-bin/webwxstatreport?funkey=indexdemo&uvid="+_sUvid+"&uuid="+_sCurUUId;

 }  

 if($("img.guide").length > 0) {

 var _nTimer = 0,

  _oGuide$ = $(".guide"),

  _oGuideTrigger$ = $("#guideTrigger, #tipTrigger"),

  _oMask$ = $(".mask");  

  function _back() {

  _nTimer = setTimeout(function() {

  _oMask$.stop().animate({opacity:0}, function(){$(".mask").hide()});

  _oGuide$.stop().animate({marginLeft:"-120px",opacity:0}, "400", "swing",function(){

   _oGuide$.hide();

  });

  }, 100);

 }  

 /*guide*/

 _oGuide$.css({"left":"50%", "opacity":0});

 _oGuideTrigger$.css({"backgroundColor":"white", "opacity":"0"});

 _oGuideTrigger$.mouseover(function(){

  clearTimeout(_nTimer);

  _oMask$.show().stop().animate({"opacity":0.2});

  _oGuide$.css("display", "block").stop().animate({marginLeft:"+168px", opacity:1}, 900, "swing", function() {

  _oGuide$.animate({marginLeft:"+153px"}, 300);

  });

  _ossLog();

 }).mouseout(_back);  

 _oGuide$.mouseover(function(){

  clearTimeout(_nTimer);

 }).mouseout(_back);

 }

})(jQuery, window);

其中使用的工具有：抓包工具 Fidller ，Chrome F12开发人员工具，注意偶然的发现，微信的客户端有一个min-webmm1cba21.js ，其中清晰可见的XSS filter规范，这对于那些喜欢白盒测试XSS的鸽子又有希望拿Q仔了！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多支持Myblog。

原文地址：http://www.jb51.net/article/87250.htm