历史版本24 :iframe跨域单点登录 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

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:8075/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文件夹下,如下图所示:

1610961558840293.png

2.4 效果查看

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

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

4.gif

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

6.gif

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