首页 > 代码库 > 微信QQ的二维码登录原理浅析

微信QQ的二维码登录原理浅析

      在非常多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用開始多起来,这里先说下啥是二维码,事实上二维码就是存了二进制数据的黑白图片,当出现要求二维码登录的时候,server会生成一条暂时的唯一的二维码信息,发送到client以二维码(图片)的形式写入到网页,然后你就会看到统一的四个方形的二维码,假设做的好这个二维码信息应该是有时效的,这里暂且不考虑这些,就简单的微信登录作为样例看看吧:

技术分享



首先说下整个授权流程:

技术分享


在client网页中会不断向server发送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 = http://www.mamicode.com/"https://login."+_sBaseHost+"/qrcode/"+uuid+"?t=webwx";>
细读js之后,你就会从网页client这边看到请求登录的一面,网页client每隔500毫秒就向server发起ssl请求,请求当前的二维码是否被其它client(手机)授权,假设返回结果是201,就是说明已经获取扫描二维码终端同样的账号登录授权,假设是其它情况就再隔500毫秒再循环发请求。这个过程会一直持续到二维码被扫描通过或者二维码超时(失效)为止。

当中使用的工具有: 抓包工具 Fidller ,Chrome F12开发者工具,注意偶然的发现,微信的client有一个min-webmm1cba21.js ,当中清晰可见的XSS filter规范, 这对于那些喜欢白盒測试XSS的鸽子又有希望拿Q仔了!!!


微信QQ的二维码登录原理浅析