https://help.finereport.com/doc-view-881.html
1. 问题描述
OA系统与报表系统集成,将报表绑定在OA系统的节点上,对于OA系统中想实现对FineReport的单点登录,用户需要在OA的登录界面中将用户名和密码传入到报表的认证地址进行认证,若OA系统和报表系统不是部署在同一台服务器上,在进行登录时进行跨域,那么要如何通过ajax实现OA系统和报表系统的跨域登录呢?
ajax:即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
iframe方式和ajax方式的区别
iframe方式和ajax方式均可以实现跨域单点登录,ajax可以实现异步的单点登录,并且可对报表系统验证的结果进行处理,如登录超时,但是iframe不可以异步处理,并且在进行报表验证的时候,无法对验证的结果进行处理。
2. 实现思路
在平台系统单点登录接口中介绍了3种单点登录的方式,iframe方式、ajax方式以及表单提交,其中iframe方式和ajax方式两种登陆方式均可实现单点登录的跨域,下面简单介绍ajax单点登录的使用方法,iframe单点登录方式请查看iframe跨域单点登录
ajax登录方式天然支持跨域,故在OA系统的登录界面中直接通过ajax将用户名密码发送到报表服务器进行后台验证,则可解决跨域单点登录问题。
3. 示例
通过简化的OA登录页面说明ajax的实现步骤。
3.1 ajax实现步骤
1)登陆按钮事件设置
用户输入用户名密码后点击提交或登录按钮时,触发doSubmit()方法,该方法中实现登录事件并且通过ajax将用户名密码发送到报表系统进行验证,并且在验证成功时,触发html中的表单提交事件,实现登录成功页面的跳转,实现报表认证代码如下:
function doSubmit() {
var username = document.getElementById("username").value.trim();
var password = document.getElementById("password").value.trim();
if (username === "") {
window.alert("请输入用户名");
return false;
}
if (password === "") {
window.alert("请输入密码");
return false;
}
var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
jQuery.ajax({
url: url,//单点登录的管理平台报表服务器
timeout: 5000,//超时时间(单位:毫秒)
dataType:"jsonp",//跨域采用jsonp方式
jsonp:"callback",
success: function (res) {
console.log(res);
if (res.errorCode) {
window.alert(res.errorMsg);
}else {
// 保存token并跳转到对应链接
window.location.href = "http://localhost:8080/webroot/decision";
}
},
error: function () {
alert("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)
}
});
}
注:由于使用了ajax,需要引入jquery.js。
另:如果在win8下单点登录异常,在ajax传递用户名密码的时候转码一下即可,比如说fine_password":encodeURIComponent(password)。
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
3.2 完整代码
将上述ajax单点登录的提交事件放到原来OA系统登录页面中,是指点击登录按钮时,触发该事件,修改后即可以实现跨域单点异步登录的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function doSubmit() {
var username = document.getElementById("username").value.trim();
var password = document.getElementById("password").value.trim();
if (username === "") {
window.alert("请输入用户名");
return false;
}
if (password === "") {
window.alert("请输入密码");
return false;
}
var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;
jQuery.ajax({
url: url,//单点登录的管理平台报表服务器
timeout: 5000,//超时时间(单位:毫秒)
dataType:"jsonp",//跨域采用jsonp方式
jsonp:"callback",
success: function (res) {
console.log(res);
if (res.errorCode) {
window.alert(res.errorMsg);
}else {
// 保存token并跳转到对应链接
window.location.href = "http://localhost:8080/webroot/decision";
}
},
error: function () {
alert("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)
}
});
}
</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>
注:用户名密码表单中使用button来触发doSubmit(),您只要将doSubmit()方法加入到您的OA的登录页面中即可,为了简化操作,上面的完整代码没有跳转到指定页面,而是跳转到平台页面。
4. 注销用户
当注销项目用户时,同时也希望注销报表用户名的session,这时可在点击退出按钮时的同时也可以实现FR报表的退出登录:
jQuery.ajax({
url:"http://localhost:8075/webroot/decision/logout/cross/domain",//单点登录的报表服务器
dataType:"jsonp",//跨域采用jsonp方式
jsonp:"callback",
timeout:5000,//超时时间(单位:毫秒)
success:function(data) {
if (data.status === "success") {
//登出成功
}
},
error:function(){
// 登出失败(超时或服务器其他错误)
}
});
5. 安全性
报表通过url传用户名和密码进行验证,传到报表服务器是以session的方式保存,防止被人中途拦截会导致系统泄密,可以对登录进来的密码进行加密,可参考文档权限之密码加密;或者使用https证书,让请求在传输过程中加密,配置方法也很简单,修改下服务器的配置文件就行了。这种方式还存在一个证书合法性问题,用自己生成的证书,客户端在访问报表中浏览器会显示证书非法警告,所以需要去购买合法证书。目前国内最便宜的证书一年是一千多元。
6. 注意事项
跨域单点登录需改将管理系统>安全管理-安全防护的【内容嗅探攻击防护】关闭,否则会报错,如下图所示: