实现思路
在平台系统单点登录中介绍了3种单点登录的方式，iframe方式、ajax方式以及表单提交，其中iframe方式和ajax方式两种登陆方式均可实现单点登录的跨域，下面简单介绍ajax单点登录的使用方法，iframe单点登录方式请查看iframe跨域单点登录
ajax登录方式天然支持跨域，故在OA系统的登录界面中直接通过ajax将用户名密码发送到报表服务器进行后台验证，则可解决跨域单点登录问题。
1、示例通过简化的OA登录页面说明ajax的实现步骤。
ajax实现步骤
登陆按钮事件设置
用户输入用户名密码后点击提交或登录按钮时，触发doSubmit()方法，该方法中实现登录事件并且通过ajax将用户名密码发送到报表系统进行验证，并且在验证成功时，触发html中的表单提交事件，实现登录成功页面的跳转，实现报表认证代码如下：
function doSubmit() {
var username =document.getElementById("username").value;
var password =document.getElementById("password").value;
jQuery.ajax({
url:":8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器
dataType:"jsonp",//跨域采用jsonp方式
data:{"username":username,"password":password},
jsonp:"callback",
timeout:5000,//超时时间（单位：毫秒）
success:function(data) {
if (data.status === "success") {
alert("success"); //登录成功
// document.getElementById("login").submit(); //登录成功提交表单，跳转到index.jsp这个登录成功页面
window.location=data.url;//登录成功，直接跳转到数据决策系统页面
}
else if (data.status === "fail"){
alert("fail");//登录失败（用户名或密码错误）
}
},
error:function(){
alert("error"); // 登录失败（超时或服务器其他错误）
}
});
}
注：由于使用了ajax，需要引入jquery.js，并且因为编码的问题，要对输入的用户名和密码进行cjkEncode编码，需要引入finereport.js，而FR的finereport.js中包含了jquery.js，所以只需要在head标签中引入finereport.js即可，无需再引入jquery.js，如下：
另：如果在win8下单点登录异常，在ajax传递用户名密码的时候转码一下即可，比如说password:encodeURIComponent(passwrod)。
<script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>
FR.cjkEncode(document.getElementById("username").value); //使用FR的内置编码函数进行编码转化
也可以自己写cjkEncode函数，实现方法见编码转换文档。
另：如果登录页面所在工程不是FineReport的工程，则无法引入finereport.js，所以只能手动引入jquery.js，如果需要编码，再自定义cjkEncode函数，示例中就是直接引入jquery.js，且没有进行编码转换。
2、完整代码将上述ajax单点登录的提交事件放到原来OA系统登录页面中，是指点击登录按钮时，触发该事件，修改后即可以实现跨域单点异步登录的代码如下：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function doSubmit() {
var username =document.getElementById("username").value;
var password =document.getElementById("password").value;
jQuery.ajax({
url:":8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器
dataType:"jsonp",//跨域采用jsonp方式
data:{"username":username,"password":password},
jsonp:"callback",
timeout:5000,//超时时间（单位：毫秒）
success:function(data) {
if (data.status === "success") {
alert("success"); //登录成功
// document.getElementById("login").submit(); //登录成功提交表单，跳转到index.jsp这个登录成功页面
window.location=data.url;//登录成功，直接跳转到平台系统页面
}
else if (data.status === "fail"){
alert("fail");//登录失败（用户名或密码错误）
}
},
error:function(){
alert("error"); // 登录失败（超时或服务器其他错误）
}
});
}
</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>
相关文章
精彩导读
热门资讯
关注我们
