iframe跨域单点登录- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 问题描述

企业往往会有多个报表平台或多个相关的平台，用户希望只登录一次就可以访问其他的系统，例如登录 OA 系统的同时登录报表系统，即将输入的用户名密码也发送到报表服务器进行认证，从而访问报表时不需要再次登录。

在上一节介绍了 Ajax 跨域异步单点登录，那么如何通过 iframe 方式实现 OA 系统和报表系统的跨域单点登录呢？

1.2 解决思路

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

2. 示例

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

在登录成功的浏览器上新开标签页，访问http://localhost:8080/webroot/decision/logout/cross/domain，切换到之前登录成功的 8080 工程页面，刷新该页面，用户被踢出登录。

2.1 环境准备

1）本文示例准备的两个工程分别为：

注：这两个工程需要有相同的用户名和密码。

本地工程，端口号为 8075
部署到 Tomcat 上的工程，端口号为 8080

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

2）启动两个工程。

2.2 新建登录页面

新建 HTML 文件，命名为「iframe.html」，代码如下所示：

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

<!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://localhost:8080/webroot/decision/login/cross/domain?fine_username=" + encodeURIComponent(username) + "&fine_password=" + encodeURIComponent(password) + "&validity=" + -1 + "&callback=callback";   //将报表验证用户名密码的地址指向此iframe
        if (scr.attachEvent)
      {       //判断是否为ie浏览器  
               scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行  
                   window.location="http://localhost:8080/webroot/decision"; //直接跳转到数据决策系统
               });  
            } else {  
               scr.onload = function(){              //其他浏览器则重新加载onload事件  
                   /*跳转到指定登录成功页面,index.jsp  
                    var f = document.getElementById("login");  
                    f.submit();  */
                window.location="http://localhost:8080/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>

1）代码说明：

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

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

2）访问 FineReport 模板

本节所示代码单点到 8080 工程的平台界面，若用户只希望访问 8080 工程的某张模板，只需要将代码中window.location后面的 URL 链接修改为模板访问链接即可，模板访问链接格式如下所示：

示例一：http://localhost:8080/webroot/decision/view/report?viewlet=GettingStarted.cpt

示例二：http://localhost:8080/webroot/decision/view/form?viewlet=/doc/frm/example.frm

2.3 将 HTML 文件放到指定位置

将 HTML 文件命名为iframe.html，放到端口号为 8075 工程的%FR_HOME%/webapps/webroot文件夹下，如下图所示：

2.4 效果查看

1）访问http://localhost:8075/webroot/iframe.html，输入 8080 工程的账号和密码，成功访问 8080 工程。如下图所示：

注：若出现无法访问的情况，请在两个工程中尝试关闭安全防护中的「点击劫持攻击防护」按钮和「内容嗅探攻击防护」按钮。

2）在登录成功的浏览器上新开标签页，访问http://localhost:8080/webroot/decision/logout/cross/domain，切换到之前登录成功的 8080 工程页面，刷新该页面，用户被踢出登录。如下图所示：

4. 注意事项

4.1 IE11 浏览器跨域单点登录失败

问题描述：

iframe 跨域单点登录在 IE11 浏览器上失败，谷歌浏览器上单点登录正常。

解决方案：

1）由于 IE11 没有 attachEvent 这个属性，需要添加一个 meta 标签来设置浏览器的默认兼容模式，通过在 html 的 head 标签中加入下面代码：

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

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

2）另外 IE11 浏览器需要将报表服务器的地址加入到受信任的站点中，如下图所示：

222

已經是第一篇

下一篇：更新日誌索引

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

iframe跨域单点登录