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

1. 问题描述编辑

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

2. 实现思路编辑

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

3. 示例编辑

通过简化的OA登录页面说明iframe跨域单点登录的实现步骤：
FineReport报表平台系统身份验证地址为：
  1. scr.src = " http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso&fr_username=" + username + "&fr_password=" + password;  
3.1 iframe实现步骤
  • 登陆按钮事件设置
用户输入用户名密码后点击提交或登录按钮时，触发doSubmit()方法，该方法中先创建一个iframe，然后将报表验证用户名密码的认证地址指向此iframe的src，并对使用的浏览器进行判断因为每个浏览器注册写法不太一样，然后将此iframe标签加入到head标签中，实现报表认证代码如下：
  1. function doSubmit() {        
  2.       var username =document.getElementById("username").value;      
  3.       var password =document.getElementById("password").value;        
  4.       var scr = document.createElement("iframe");      //创建iframe      
  5.       scr.src = " http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso&fr_username=" + username + "&fr_password=" + password;   //将报表验证用户名密码的地址指向此iframe        
  6.  if (scr.attachEvent){       //判断是否为ie浏览器    
  7.        scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行    
  8.            /*跳转到指定登录成功页面，index.jsp   
  9.            var f = document.getElementById("login");   
  10.                f.submit();  */  
  11.     window.location=" http://localhost:8075/WebReport/ReportServer?op=fs"; //直接跳转到数据决策系统    
  12.        });    
  13.     } else {    
  14.        scr.onload = function(){              //其他浏览器则重新加载onload事件    
  15.            /*跳转到指定登录成功页面,index.jsp   
  16.             var f = document.getElementById("login");   
  17.                 f.submit(); */   
  18.         window.location=" http://localhost:8075/WebReport/ReportServer?op=fs"; //直接跳转到数据决策系统    
  19.        };    
  20.  }    
  21.        
  22.    document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe标签嵌入到head中      
  23.  }  
注：由于编码的问题，要对输入的用户名和密码进行cjkEncode编码，需要引入finereport.js，在head标签中引入finereport.js，如下：
  1. <script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>  
  1. FR.cjkEncode(document.getElementById("username").value);    //使用FR的内置编码函数进行编码转化  
也可以自己写cjkEncode函数，实现方法见cjk编码转换文档。
另：如果登录页面所在工程不是FineReport的工程，则无法引入finereport.js，自定义cjkEncode函数，示例中没有进行编码转换。
3.2 完整代码
将上述iframe单点登录的提交时间放到原来OA系统登录页面中，是指点击登录按钮时，触发该事件，修改后即可以实现跨域单点登录的代码如下：
  1. <html>        
  2.   <head>        
  3.   <script type="text/javascript">        
  4.     function doSubmit() {        
  5.         var username =document.getElementById("username").value;      
  6.         var password =document.getElementById("password").value;        
  7.         var scr = document.createElement("iframe");      //创建iframe      
  8.         scr.src = " http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso&fr_username=" + username + "&fr_password=" + password;   //将报表验证用户名密码的地址指向此iframe        
  9.    if (scr.attachEvent){       //判断是否为ie浏览器    
  10.                scr.attachEvent("onload", function(){                    //如果为ie浏览器则页面加载完成后立即执行    
  11.                    /*跳转到指定登录成功页面，index.jsp   
  12.                    var f = document.getElementById("login");   
  13.                    f.submit(); */   
  14.       window.location=" http://localhost:8075/WebReport/ReportServer?op=fs"; //直接跳转到数据决策系统  
  15.                });    
  16.             } else {    
  17.                scr.onload = function(){              //其他浏览器则重新加载onload事件    
  18.                    /*跳转到指定登录成功页面,index.jsp   
  19.                     var f = document.getElementById("login");   
  20.                     f.submit();  */  
  21.                 window.location=" http://localhost:8075/WebReport/ReportServer?op=fs"; //直接跳转到数据决策系统    
  22.                };    
  23.          }    
  24.          
  25.      document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe标签嵌入到head中      
  26.    }     
  27.  </script>        
  28. </head>        
  29. <body>        
  30.   <p>请登录</p>        
  31.   <form id="login" name="login" method="GET"  action="" >        
  32.     <p>用户名:<input id="username" type="text" name="username" /></p>        
  33.     <p>密 码:<input id="password" type="password" name="password"/></p>          
  34.     <input type="button" value="登录" onClick="doSubmit()" />        
  35.   </form>        
  36.  </body>        
  37. </html>   
说明：用户名密码表单中使用button来触发doSubmit()，您只要将doSubmit()方法加入到您的OA的登录页面中即可，为了简化操作，完整代码中没有跳转到指定页面，直接跳转到op=fs页面。

4. 注销用户编辑

4.1 平台系统的登出

当将FineReport集成到项目中时，注销项目用户，同时也希望注销系统的用户名session，即退出系统，其登出方法为：/WebReport/ReportServer?op=fs_load&cmd=logout就可以实现FR系统的登出。