AJAX 跨域异步单点登录

编辑
  • 文档创建者:文档助手1
  • 浏览次数:23140次
  • 编辑次数:22次
  • 最近更新:Kevin-s 于 2019-06-08
  • 1. 问题描述

    OA 系统与报表系统集成,将报表绑定在 OA 系统的节点上,对于 OA 系统中想实现对 FineReport 的单点登录,用户需要在 OA 的登录界面中将用户名和密码传入到报表的认证地址进行认证,若 OA 系统和报表系统不是部署在同一台服务器上,在进行登录时进行跨域,那么要如何通过 Ajax 实现 OA 系统和报表系统的跨域登录呢?

    Ajax:即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    iframe 方式和 Ajax 方式的区别

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

    2. 实现思路

    在 平台系统单点登录接口 中介绍了 3 种单点登录的方式,iframe 方式、Ajax 方式以及表单提交,其中 iframe 方式和 Ajax 方式两种登录方式均可实现单点登录的跨域,下面简单介绍ajax单点登录的使用方法,iframe 单点登录方式请查看 iframe 跨域单点登录

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

    3. 示例

    通过简化的 OA 登录页面说明ajax的实现步骤。

    3.1 Ajax 实现步骤

    1)登陆按钮事件设置

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


    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;
        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("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)  
            }
        });
    }

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

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

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

    3.2 完整代码

    将上述 Ajax 单点登录的提交事件放到原来 OA 系统登录页面中,是指点击登录按钮时,触发该事件,修改后即可以实现跨域单点异步登录的代码如下:


    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
        <script src="http://code.jquery.com/jquery-2.1.4.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;
                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>

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

    4. 注销用户

    当注销项目用户时,同时也希望注销报表用户名的 Session,这时可在点击退出按钮时的同时也可以实现 FR 报表的退出登录:

    jQuery.ajax({
         url:"http://localhost:8075/webroot/decision/logout/cross/domain",//单点登录的报表服务器
         dataType:"jsonp",//跨域采用jsonp方式
         jsonp:"callback",
         timeout:5000,//超时时间(单位:毫秒)
         success:function(data) {
                if (data.status === "success") {
                      //登出成功   
                } 
         },
         error:function(){
               // 登出失败(超时或服务器其他错误)
         }
    });

    5. 安全性

    报表通过 URL 传用户名和密码进行验证,传到报表服务器是以 Session 的方式保存,防止被人中途拦截会导致系统泄密,可以对登录进来的密码进行加密,可参考文档 权限之密码加密;或者使用 https 证书,让请求在传输过程中加密,配置方法也很简单,修改下服务器的配置文件就行了。这种方式还存在一个证书合法性问题,用自己生成的证书,客户端在访问报表中浏览器会显示证书非法警告,所以需要去购买合法证书。目前国内最便宜的证书一年是一千多元。

    6. 注意事项

    跨域单点登录需改将管理系统>安全管理-安全防护的【内容嗅探攻击防护】关闭,否则会报错,如下图所示:


    附件列表


    主题: 部署集成
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]