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>
<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. 注意事项编辑
跨域单点登录需改将管理系统>安全管理-安全防护的【内容嗅探攻击防护】关闭，否则会报错，如下图所示：
