反馈已提交

网络繁忙

iframe跨域单点登录

  • 文档创建者:文档助手1
  • 历史版本:31
  • 最近更新:Wendy123456 于 2021-12-10
  • 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文件夹下,如下图所示:

    1610961558840293.png

    2.4 效果查看

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

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

    4.gif

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

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


    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持