web扫码登录怎么实现,思路?

提供者:Smallbyte.cn2017/9/22 16:59:57已有211人阅读
步骤       WEB平台                手机
第1步      生成二维码
第2步     (ajax监控后台)          扫码
第3步     (ajax监控后台)          确定(后台异步通知WEB平台)
第4步      AJAX发现状态改变,登陆成功

ajax监控后台的流程:生成二维码后

setTimeout(function(){    //AJAX请求,检测状态},5000);

整体思路:

  • 1.前端调用后台生成二维码的API,获取到二维码图片和所包含的信息(通常是一个唯一ID)

  • 2.前端检测(通过轮询或者websock,自己选择)是否有手机扫码,通过调用后台接口API,参数为上面的唯一ID

  • 3.手机扫描二维码登陆,手机端可以获取到二维码里的信息ID,带上当前登陆用户ID和二维码里的ID调用后台接口。后台存储这个二维码的数据,加上登录用户信息,当前台调用API时,给返回登录成功。

  • 4.前端获取到登录成功,进行跳转

微信与支付宝的扫码登录是有一些区别的,微信目前是一个持续27s的长连接请求;而支付宝是持续循环的短连接请求。其实原理是一样的。

首先,前端调用二维码接口,获取图片二维码以及用户唯一表示uid,然后与服务器建立长连接请求,询问是否有用户扫码登录。

用户用APP扫码之后,会请求服务器接口,将用户信息与二维码的uid绑定,前端的长连接就可以请求到当前uid对应的用户,从而进行登录操作。
前端的长连接请求类似以下代码:

   <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="UTF-8">  
    <title>Insert title here</title>  
    </head>  
    <script src="http://code.jquery.com/jquery-latest.js"></script>  
    <body>  
        <div id="divCon">  
            <img src="" id="QrCodeImg" />  
        </div>  
    </body>  
    <script type="text/javascript">  
        $(document).ready(function() {  
            var uuid = 131422035;  
            function validateLogin(){  
                $.get("/walletadminV2/api/testServlet/testLogin?uuid="   uuid , function(data, status) {  
                    if(data == ""){  
                        validateLogin();  
                    }else{  
                        var obj = eval("("   data   ")");  
                        alert("登录成功了:"   obj.uname);  
                    }  
                });  
            }  
              
            validateLogin();  
        });  
    </script>  
    </html>

评论列表

发表评论

评论内容:
新随笔