iframe跨域单点登录

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

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

    2. 实现思路

    在 OA 系统的登录界面的 JS 中将报表先把权限验证地址以 iframe 的方式嵌入,解决 JS 跨域问题,然后再在 iframe 里面触发表单登录事件,实现登录页面的跳转。

    注:如果使用跨域 iframe 的方式嵌入报表,出现无法访问的情况,请关闭 「Security Headers」高级设置中的「点击劫持攻击防护功能」,详情参见:安全防护

    3. 示例

    通过简化的 OA 登录页面说明 iframe 跨域单点登录的实现步骤:

    FineReport 报表平台系统身份验证地址为:

    scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";

    3.1 iframe 实现步骤

    1)登陆按钮事件设置

    用户输入用户名密码后点击提交或登录按钮时,触发 doSubmit() 方法,该方法中先创建一个 iframe,然后将报表验证用户名密码的认证地址指向此 iframe 的 src,并对使用的浏览器进行判断因为每个浏览器注册写法不太一样,然后将此iframe标签加入到 head 标签中,实现报表认证代码如下:


    function doSubmit() {      
        var username = document.getElementById("username").value; //获取输入的用户名
        var password = document.getElementById("password").value;  //获取输入的参数
        var scr = document.createElement("iframe");      //创建iframe    
        scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";   //将报表验证用户名密码的地址指向此iframe
        if (scr.attachEvent)
    {       //判断是否为ie浏览器  
               scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行  
                   window.location=" http://localhost:8075/webroot/decision"; //直接跳转到数据决策系统
               });  
            } else {  
               scr.onload = function(){              //其他浏览器则重新加载onload事件  
                   /*跳转到指定登录成功页面,index.jsp  
                    var f = document.getElementById("login");  
                    f.submit();  */
                window.location=" http://localhost:8075/webroot/decision"; //直接跳转到数据决策系统
            };  
         }  
       
     document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe标签嵌入到head中    
    }

    3.2 完整代码

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


    <!DOCTYPE html>
    <html>
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=10" />
      <script type="text/javascript">
        function doSubmit() {      
            var username = document.getElementById("username").value; //获取输入的用户名
            var password = document.getElementById("password").value;  //获取输入的参数
            var scr = document.createElement("iframe");      //创建iframe    
            scr.src = "http://192.168.1.40:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";   //将报表验证用户名密码的地址指向此iframe
            if (scr.attachEvent)
          {       //判断是否为ie浏览器  
                   scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行  
                       window.location="http://192.168.1.40:8075/webroot/decision"; //直接跳转到数据决策系统
                   });  
                } else {  
                   scr.onload = function(){              //其他浏览器则重新加载onload事件  
                       /*跳转到指定登录成功页面,index.jsp  
                        var f = document.getElementById("login");  
                        f.submit();  */
                    window.location="http://192.168.1.40:8075/webroot/decision"; //直接跳转到数据决策系统
                };  
             }  
           
         document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe标签嵌入到head中    
        }   
     </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 的登录页面中即可,为了简化操作,完整代码中没有跳转到指定页面,直接跳转到平台页面。

    3.3 注意事项

    由于 IE11 没有 attachEvent 这个属性,那么我们可以添加一个 meta 标签来设置浏览器的默认兼容模式,通过在 html 的 head 标签中加入 

     <meta http-equiv="X-UA-Compatible" content="IE=10" />

     这个 meta 标签来设置浏览器的默认兼容模式为 IE10。 这样就可以依旧使用 attachEvent 属性。

    另外 IE 浏览器需要将报表服务器的地址加入到受信任的站点中,如下图:



    4. 注销用户

    4.1 平台系统的登出


    当将 FineReport 集成到项目中时,注销项目用户,同时也希望注销系统的用户名 session,即退出系统,其登出方法为:http://192.168.1.40:8075/webroot/decision/logout/cross/domain  就可以实现 FR 系统的登出。

    附件列表


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

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

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