Ajax 跨域异步单点登录

  • 文档创建者:文档助手1
  • 编辑次数:26次
  • 最近更新:Wendy123456 于 2020-08-27
  • 1. 概述

    1.1 问题描述

    OA 系统与报表系统集成,将报表绑定在 OA 系统的节点上,对于 OA 系统中想实现对 FineReport 的单点登录,用户需要在 OA 的登录界面中将用户名和密码传入到报表的认证地址进行认证。

    若 OA 系统和报表系统不是部署在同一台服务器上,在登录时进行跨域,那么要如何通过 Ajax 实现 OA 系统和报表系统的跨域登录呢?

    1.2 解决思路

    iframe 方式和 Ajax 方式两种登录方式均可实现单点登录的跨域,但 Ajax 可以实现异步的单点登录,并且可对报表系统验证的结果进行处理,如登录超时;但是 iframe 不可以异步处理,并且在进行报表验证的时候,无法对验证的结果进行处理。

    Ajax 登录方式天然支持跨域,故在 OA 系统的登录界面中直接通过 Ajax 将用户名密码发送到报表服务器进行后台验证,则可解决跨域单点登录问题。

    注:决策平台单点登录接口介绍请参见:决策平台单点登录接口 

    2. 示例

    启动两个工程,端口号分别为 8075 和 8080,将新建 HTML 文件 ajaxlogin.html、ajaxlogout.html 放到端口号为 8075 的工程下。访问http://localhost:8075/webroot/ajaxlogin.html,输入 8080 工程的用户名和密码,成功访问 8080 工程。

    在登录成功的浏览器上新开标签页,访问http://localhost:8075/webroot/ajaxlogout.html,点击「登出」按钮,刷新之前登录成功的 8080 工程页面,用户被踢出登录。

    注:本章示例适用于 PC 端。

    2.1 环境准备

    1)本文示例准备的两个工程分别为:

    • 本地工程,端口号为 8075

    • 部署到 Tomcat 上的工程,端口号为 8080

    Tomcat 服务器部署请参见:独立部署 

    2)启动两个工程。

    2.2 新建登录页面

    新建 HTML 文件,命名为「ajaxlogin.html」,代码如下所示:

    注:根据实际情况修改代码中的访问路径或端口号。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            function doSubmit() {
                var username = document.getElementById("username").value.trim();
                var password = document.getElementById("password").value.trim();
                if (username === "") {
                    window.alert("请输入用户名");
                    return false;
                }
                if (password === "") {
                    window.alert("请输入密码");
                    return false;
                }
                var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
    alert(url);
                jQuery.ajax({
                    url: url,//单点登录的管理平台报表服务器
                    timeout: 5000,//超时时间(单位:毫秒)
                    dataType:"jsonp",//跨域采用jsonp方式
                    jsonp:"callback",
                    success: function (res) {
                        console.log(res);
                        if (res.errorCode) {
                            window.alert(res.errorMsg);
                        }else {
                            // 保存token并跳转到对应链接
                            window.location.href = "http://localhost:8080/webroot/decision";
                        }
                    },
                    error: function () {
                        alert("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)  
                    }
                });
            }
        </script>
    </head>
    <body>
    <p>请登录</p>
    <form id="login" name="login" method="POST" action="">
        <p>用户名:<input id="username" type="text" name="username"/></p>
        <p>密 码:<input id="password" type="password" name="password"/></p>
        <input type="button" value="登录" onClick="doSubmit()"/>
    </form>
    </body>
    </html>

    代码说明:

    用户输入用户名密码后点击提交或登录按钮时,触发「doSubmit()」方法,该方法中实现登录事件并且通过 Ajax 将用户名密码发送到报表系统进行验证,并且在验证成功时,触发 HTML 中的表单提交事件,实现登录成功页面的跳转。

    用户名密码表单中使用 button 来触发 doSubmit(),您只要将 doSubmit() 方法加入到您的 OA 的登录页面中即可,为了简化操作,上面的完整代码没有跳转到指定页面,而是跳转到平台页面。  

    注1:由于使用了 Ajax,需要引入  jquery.js。

    注2:如果在 Win8 下单点登录异常,在 Ajax 传递用户名密码的时候转码一下即可,比如说 fine_password":encodeURIComponent(password)。

    2.3 注销用户页面

    新建 HTML 文件,命名为「ajaxlogout.html」,代码如下所示:

    注:根据实际情况修改代码中的访问路径或端口号。

    <html>      
      <head>      
      <meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>    
      <script type="text/javascript">      
        function doSubmit() {  
     jQuery.ajax({  
         url:"http://localhost:8080/webroot/decision/logout/cross/domain",//单点登录的报表服务器  
         dataType:"jsonp",//跨域采用jsonp方式  
         jsonp:"callback",  
         timeout:5000,//超时时间(单位:毫秒)  
         success:function(data) {  
                if (data.status === "success") {  
                      //登出成功
    alert("已登出");
                }   
         },  
         error:function(){  
               // 登出失败(超时或服务器其他错误)  
         }  
    });
      }  
     </script>      
    </head>      
    <body>      
      <p>请登出</p>      
      <form id="login" name="login" method="POST"  action="" >            
        <input type="button" value="登出"  onClick="doSubmit()" />      
      </form>      
     </body>      
    </html>

    2.4 将 HTML 文件放到指定位置

    将保存后的 ajaxlogin.html、ajaxlogout.html 文件放到端口号为 8075 工程的%FR_HOME%/webapps/webroot文件夹下,如下图所示:

    2.png

    2.5 关闭安全防护相关按钮

    1)以管理员身份进入端口号为 8075 工程的平台,点击「管理系统>安全管理」,关闭「内容嗅探攻击防护」、「点击劫持攻击防护」,如下图所示:

    3.png

    2)相同步骤关闭端口号为 8080 工程的「内容嗅探攻击防护」、「点击劫持攻击防护」。

    2.6 效果查看

    1)打开浏览器,访问:http://localhost:8075/webroot/ajaxlogin.html,输入端口号为 8080 工程的账号和密码,成功访问 8080 工程。如下图所示:

    7.gif

    2)在登录成功的浏览器上新开标签页,访问http://localhost:8075/webroot/ajaxlogout.html,点击「登出」按钮,切换到之前登录成功的 8080 工程页面,刷新该页面,用户被踢出登录。如下图所示:

    8.gif

    注:如果端口号为 8075 和端口号为 8080 的两个工程都开启 短信登录验证 ,访问http://localhost:8075/webroot/ajaxlogin.html时,ajax 单点登录会跳过短信验证直接登录成功。

    3. 注意事项

    报表通过 URL 传用户名和密码进行验证,传到报表服务器是以 Session 的方式保存,防止被人中途拦截会导致系统泄密,可以对登录进来的密码进行加密,可参考文档 密码加密设置 

    用户也可以使用 https 证书,让请求在传输过程中加密,配置方法也很简单,修改下服务器的配置文件就可以。这种方式如果使用自己生成的证书,客户端在访问报表中浏览器会显示证书非法警告,所以需要去购买合法证书。

    附件列表


    主题: 数据决策系统
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!