反馈已提交

网络繁忙

iframe跨域单点登录

  • 文档创建者:Wendy123456
  • 编辑次数:3次
  • 最近更新:Wendy123456 于 2021-01-19
  • 1. 概述

    1.1 问题描述

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

    在上一节介绍了 Ajax 跨域单点登录 ,那么如何通过 iframe 方式实现 OA 系统和 BI 系统的跨域单点登录呢?

    1.2 解决思路

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

    2. 示例

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

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

    2.1 环境准备

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

    • 本地工程,端口号为 37799

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

    Tomcat 服务器部署请参见: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>

    代码说明:

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

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

    2.3 将 HTML 文件放到指定位置

    将 HTML 文件命名为iframe.html,放到端口号为 37799 工程的%BI_HOME%/webapps/webroot文件夹下,如下图所示:

    3.png

    2.4 效果查看

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

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

    6.gif

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

    9.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


    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭