扫码登录实现原理，附代码

这里就不做太多的解释了，下面这篇文档写的挺易懂的，首先就是生成二维码，每个二维码有一个唯一标识(id)，进行长轮循，setInterval 每隔一秒调用一次ajax请求后台发送二维码的唯一标识id，后台从可以持久化的Key-Value中取唯一标识id(这个key的值是在手机端扫码时给的值，可以在扫码的时候给一个值，确认登录一个值)，判断id的值判断是否扫过二维码或者唯一标识id是否已经绑定user信息。二维码生成jquery.qrcode

https://www.cnblogs.com/liyasong/p/saoma.html

<script type="text/javascript" src="<%=request.getContextPath()%>/test/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/test/jquery.qrcode.min.js"></script>

//清空二维码
$('#qrcode').html("");

var guuid = genuuid();
//显示二维码
$("#qrcode").qrcode({
    render: "canvas", // 渲染方式有table方式和canvas方式
    width: 120,   //默认宽度
    height: 120, //默认高度
    text:'http://10.0.0.138:8080/xxxx/login/scan-check.do?uuid='+guuid, //二维码内容,此处直接使用生成的uuid，客户端自行拼接回调地址，调用登陆接口
    typeNumber: -1,   //计算模式一般默认为-1
    correctLevel: 2, //二维码纠错级别
    background: "#ffffff",  //背景颜色
    foreground: "#000000"  //二维码颜色

});
var margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2; //控制Logo图标的位置
$("#qrCodeIco").css("margin", margin);

//长连接
myVar = setInterval(function(){qrcodeValidity(guuid);}, 1000);

//长连接调用方法
function qrcodeValidity(uuid) {
    console.info(uuid);
    $.ajax({
        url: '<%=basePath%>login/qr-long-connect-check.do',
        data: {
            uuid:uuid
        },
        type: 'get',
        cache: false,
        dataType: 'json',
        success: function (json) {
            if(json.statusCode==203){
              //do 表示二维码已经扫描
            }
            if(json.statusCode==200){
              //do 表示手机端点击确认登录
                clearInterval(myVar);
                window.location.href=json.path;
            }
        }
    });
    if (number-- == 0) {//时间到了 没有值，清空session中保存的验证码
        clearInterval(myVar);
        number = 300;
    }

}

//随机字符串的生成
function genuuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "";
    var uuid = s.join("");
    return uuid;
}

 

<div id="qrcode" style="text-align:center;display: none;">
</div>

后台长连接方法：我这里使用的kev-value 是封装好的可设置有效时间的单例，ExpiryMap(该文件账户资源中有)

@RequestMapping(value = "qr-long-connect-check", method = RequestMethod.GET)
public @ResponseBody
Map<String, Object> QRLongConnectCheck(HttpServletRequest request, HttpServletResponse response,Model model) {
    String statusCode = "300";
    Map<String, Object> resMap = new HashMap<String, Object>();
    String uuid = request.getParameter("uuid");
    ExpiryMap<String, Object> expiryMap = ExpiryMap.getInstance();
    String status =(String)expiryMap.get("status"+uuid);
    GxSysUser gxSysUser =(GxSysUser)expiryMap.get(uuid);
    if(status!=null){
        statusCode="203";
        if(!StringUtils.isEmpty(gxSysUser)){
            model.addAttribute("user_session", gxSysUser);
            statusCode="200";
            resMap.put("path","http://localhost:8080/oa_ts/home/go-home.do");
        }
    }

    resMap.put("statusCode", statusCode);
    return resMap;
}