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

2021-06-06 16:04

阅读:538

标签:blog   ready   dmi   jquer   状态   手机   test   qrcode   admin   

步骤       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 heretitle>  
    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>  

问题地址:web扫码登录怎么实现,求个思路

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

标签:blog   ready   dmi   jquer   状态   手机   test   qrcode   admin   

原文地址:http://www.cnblogs.com/moqiutao/p/7337296.html


评论


亲,登录后才可以留言!