java实现简单扫码登录功能(模仿微信网页版扫码)

java实现简单扫码登录功能

• 模仿微信pc网页版扫码登录
• 使用js代码生成qrcode二维码减轻服务器压力
• js循环请求服务端,判断是否qrcode被扫
• 二维码超时失效功能
• 二维码被扫成功登录,服务端产生sessionId,传到页面使用js保存cookie
• 多线程

生成qrcode相关js jquery.qrcode.js

<div class="pc_qr_code">
              <input type="hidden" id="uuid" value="${uuid }"/>
</div>
  <div id="result">请使用手机扫码</div>

//生成二维码
        !function(){
             var uuid = $("#uuid").val();
             var content;
             content = "..........do?uuid="+uuid;
             //console.dir(content);
             $('.pc_qr_code').qrcode({
                 render:"canvas",
                 width:200,
                 height:200,
                 correctLevel:0,
                 text:content,
                 background:"#ffffff",
                 foreground:"black",
                 src:"/logo.png"
                 });  
            setCookie("sid", 123, -1*60*60*1000);
            keepPool();//自动循环调用
        }();

        function keepPool(){
            var uuid = $("#uuid").val();
            $.get(ctx+"/web/login/pool.do",{uuid:uuid,},function(msg){//如果放入一个不存在的网址怎么办?
                //console.log(msg);
                if(msg.successFlag == '1'){
                    $("#result").html("扫码成功");
                    setCookie(msg.data.cname, msg.data.cvalue, 3*60*60*1000);
                    //alert("将跳转...");
                    window.location.href = ctx +"/webstage/login/success.do";
                }else if(msg.successFlag == '0'){
                    $("#result").html("该二维码已经失效,请重新获取");
                }else{
                    keepPool();
                }

            }); 
        }

        //设置cookie
        function setCookie(cname, cvalue, expireTime) {
         var d = new Date();
         d.setTime(d.getTime() + expireTime);//设置过期时间
         var expires = "expires="+d.toUTCString();
         var path = "path=/"
         document.cookie = cname + "=" + cvalue + "; " + expires + "; " + path;
        }

 

 

https://blog.csdn.net/gentlu/article/details/78592571

为什么要有这两个条件呢？那是因为微信在确认是否允许登录到网页版的时候，微信需要提取当前app的登录信息并将上面的session ID一并发给服务器，这样服务器收到了登录信息和sessionID后就可以确认两件事：一是用来确认登录的客户端的用户是验证过的；二是通过session ID服务器知道将反馈结果推送到哪个网页。 
  所以针对第一点，我们的关键在于，在扫描前要确保用户是已经被验证过且合法的用户（验证方式可以是用户名+密码，也可以是一个secure key），在选择是否登录时将这个结果一并推送到服务器端，就好了。如果用户没有验证是否合法，可以像微信的处理方式一样直接告诉用户二维码不可识别或提示请先登录到app。 
  有了身份验证，那么现在就解决第二个问题，如何将反馈结果实时地显示在网页上呢？有朋友可能会说，客户端这边很简单发一个请求到后台就好了，而网页上用ajax定时发送到服务器端看是否有反馈。我不赞成这种做法，因为ajax轮询方式十分消耗客户端和服务器端资源！这里涉及到另一个技术-web实时推送技术，使用推送技术可以节约服务器端和客户端的资源，可以稳定地推送和接收任何消息。我在实现的过程中我采用了第三方推送服务-GoEasy推送，用它是实现非常简单，我们项目里的其他功能也用到了GoEasy web实时推送服务，所以在此我直接就用的GoEasy推送来将登录反馈结果推送到服务器。我的实现步骤非常简单，将传送的session ID作为客户端与网页端的通信channel，网页端订阅用session ID作为值得channel，客户端将验证结果和session ID发送到服务器端，服务器端可以通过这个channel主动将结果推送给网页版！如果客户端也需要做相应的反馈的话，那么客户端也只需要订阅这个channel,然后服务器端会同时将结果推送给网页版和客户端，收到消息后，就可以根据需求在goeasy的回调函数里做你想做的事情了。关于goeasy推送的使用，大家可以参考这篇博客： http://www.cnblogs.com/jishaochengduo/articles/5552645.html， 另外GoEasy推送官网上也有二维码登录的demo,大家可以去看看效果：http://goeasy.io/www/demo/qrcodelogin