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

1. 问题描述编辑

OA系统与报表系统集成,将报表绑定在OA系统的节点上,对于OA系统中想实现对FineReport的单点登录,用户需要在OA的登录界面中将用户名和密码传入到报表的认证地址进行认证,若OA系统和报表系统不是部署在同一台服务器上,在进行登录时进行跨域,那么要如何通过ajax实现OA系统和报表系统的跨域登录呢?

2. 实现思路编辑

平台系统单点登录接口中介绍了3种单点登录的方式,iframe方式、ajax方式以及表单提交,其中iframe方式和ajax方式两种登陆方式均可实现单点登录的跨域,下面简单介绍ajax单点登录的使用方法,iframe单点登录方式请查看iframe跨域单点登录
ajax登录方式天然支持跨域,故在OA系统的登录界面中直接通过ajax将用户名密码发送到报表服务器进行后台验证,则可解决跨域单点登录问题。

3. 示例编辑

通过简化的OA登录页面说明ajax的实现步骤。
3.1 ajax实现步骤
  • 登陆按钮事件设置
用户输入用户名密码后点击提交或登录按钮时,触发doSubmit()方法,该方法中实现登录事件并且通过ajax将用户名密码发送到报表系统进行验证,并且在验证成功时,触发html中的表单提交事件,实现登录成功页面的跳转,实现报表认证代码如下:
  1. function doSubmit() {    
  2.     var username =document.getElementById("username").value;        
  3.     var password =document.getElementById("password").value;      
  4.  jQuery.ajax({    
  5.     url:"http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器    
  6.     dataType:"jsonp",//跨域采用jsonp方式    
  7.  data:{"fr_username":username,"fr_password":password},   
  8.  jsonp:"callback",    
  9.     timeout:5000,//超时时间(单位:毫秒)    
  10.     success:function(data) {    
  11.            if (data.status === "success") {    
  12.            alert("success"); //登录成功    
  13.    //   document.getElementById("login").submit(); //登录成功提交表单,跳转到index.jsp这个登录成功页面    
  14.     window.location=data.url;//登录成功,直接跳转到数据决策系统页面  
  15.            }     
  16.         else if (data.status === "fail"){    
  17.            alert("fail");//登录失败(用户名或密码错误)    
  18.            }    
  19.     },    
  20.     error:function(){    
  21.          alert("error"); // 登录失败(超时或服务器其他错误)    
  22.     }    
  23. });         
  24.  }    
注:由于使用了ajax,需要引入jquery.js,并且因为编码的问题,要对输入的用户名和密码进行cjkEncode编码,需要引入finereport.js,而FR的finereport.js中包含了jquery.js,所以只需要在head标签中引入finereport.js即可,无需再引入jquery.js,如下:
另:如果在win8下单点登录异常,在ajax传递用户名密码的时候转码一下即可,比如说fr_password":encodeURIComponent(password)。
  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,所以只能手动引入jquery.js,如果需要编码,再自定义cjkEncode函数,示例中就是直接引入jquery.js,且没有进行编码转换。
3.2 完整代码
将上述ajax单点登录的提交事件放到原来OA系统登录页面中,是指点击登录按钮时,触发该事件,修改后即可以实现跨域单点异步登录的代码如下:
  1. <html>        
  2.   <head>        
  3.     <script type="text/javascript" src="jquery.js"></script>          
  4.   <script type="text/javascript">        
  5.     function doSubmit() {    
  6.      var username =document.getElementById("username").value;        
  7.      var password =document.getElementById("password").value;      
  8.      jQuery.ajax({    
  9.      url:"http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器    
  10.      dataType:"jsonp",//跨域采用jsonp方式    
  11.      data:{"fr_username":username,"fr_password":password},    
  12.      jsonp:"callback",    
  13.      timeout:5000,//超时时间(单位:毫秒)    
  14.      success:function(data) {    
  15.             if (data.status === "success") {    
  16.             alert("success"); //登录成功    
  17.   //        document.getElementById("login").submit(); //登录成功提交表单,跳转到index.jsp这个登录成功页面    
  18.             window.location=data.url;//登录成功,直接跳转到平台系统页面   
  19.             }     
  20.             else if (data.status === "fail"){    
  21.             alert("fail");//登录失败(用户名或密码错误)    
  22.             }    
  23.      },    
  24.      error:function(){    
  25.           alert("error"); // 登录失败(超时或服务器其他错误)    
  26.      }    
  27.     });         
  28.   }    
  29.  </script>        
  30. </head>        
  31. <body>        
  32.   <p>请登录</p>        
  33.   <form id="login" name="login" method="POST"  action="" >        
  34.     <p>用户名:<input id="username" type="text" name="username"  /></p>        
  35.     <p>密 码:<input id="password" type="password" name="password" /></p>          
  36.     <input type="button" value="登录"  onClick="doSubmit()" />        
  37.   </form>        
  38.  </body>        
  39. </html>    
说明:用户名密码表单中使用button来触发doSubmit(),您只要将doSubmit()方法加入到您的OA的登录页面中即可,为了简化操作,上面的完整代码没有跳转到指定页面,而是跳转到op=fs页面。

4. 注销用户编辑

当注销项目用户时,同时也希望注销报表用户名的session,这时可在点击退出按钮时的同时也可以实现FR报表的退出登录:
  1. jQuery.ajax({  
  2.      url:"http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=ssout",//单点登录的报表服务器  
  3.      dataType:"jsonp",//跨域采用jsonp方式  
  4.      jsonp:"callback",  
  5.      timeout:5000,//超时时间(单位:毫秒)  
  6.      success:function(data) {  
  7.             if (data.status === "logout") {  
  8.                   //登出成功     
  9.             }   
  10.      },  
  11.      error:function(){  
  12.            // 登出失败(超时或服务器其他错误)  
  13.      }  
  14. });  

5. 安全性编辑

报表通过url传用户名和密码进行验证,传到报表服务器是以session的方式保存,防止被人中途拦截会导致系统泄密,可以对登录进来的密码进行加密,可参考文档权限之密码加密;或者使用https证书,让请求在传输过程中加密,配置方法也很简单,修改下服务器的配置文件就行了。这种方式还存在一个证书合法性问题,用自己生成的证书,客户端在访问报表中浏览器会显示证书非法警告,所以需要去购买合法证书。目前国内最便宜的证书一年是一千多元。