1. 概述
1.1 問題描述
OA 系統與報表系統集成，将報表綁定在 OA 系統的節點上，對於 OA 系統中想實現對 FineReport 的單點登錄，用戶需要在 OA 的登錄界面中将用戶名和密碼傳入到報表的認證地址進行認證。
若 OA 系統和報表系統不是部署在同一台服務器上，在登錄時進行跨域，那麽要如何通過 Ajax 實現 OA 系統和報表系統的跨域登錄呢？
1.2 解決思路
iframe 方式和 Ajax 方式兩種登錄方式均可實現單點登錄的跨域，但 Ajax 可以實現異步的單點登錄，并且可對報表系統驗證的結果進行處理，如登錄超時；但是 iframe 不可以異步處理，并且在進行報表驗證的時候，無法對驗證的結果進行處理。
Ajax 登錄方式天然支持跨域，故在 OA 系統的登錄界面中直接通過 Ajax 将用戶名密碼發送到報表服務器進行後台驗證，則可解決跨域單點登錄問題。
注：決策平台單點登錄接口介紹請參見：決策平台單點登錄接口
2. 示例
啓動兩個工程，端口号分别爲 8075 和 8080，将新建 HTML 文件 ajaxlogin.html、ajaxlogout.html 放到端口号爲 8075 的工程下。訪問http://localhost:8075/webroot/ajaxlogin.html，輸入 8080 工程的用戶名和密碼，成功訪問 8080 工程。
在登錄成功的浏覽器上新開标簽頁，訪問http://localhost:8075/webroot/ajaxlogout.html，點擊「登出」按鈕，刷新之前登錄成功的 8080 工程頁面，用戶被踢出登錄。
注：本章示例适用於 PC 端。
2.1 環境準備
1）本文示例準備的兩個工程分别爲：
本地工程，端口号爲 8075
部署到 Tomcat 上的工程，端口号爲 8080
Tomcat 服務器部署請參見：獨立部署
2）啓動兩個工程。
2.2 新建登錄頁面
新建 HTML 文件，命名爲「ajaxlogin.html」，代碼如下所示：
注1：根據實際情況修改代碼中的訪問路徑或端口号。
注2：内網環境中，下面代碼引用的 jquery.min.js 文件無法生效，需下載 JS 文件到本地并修改對應的路徑，具體步驟請參見：單點登錄問題彙總 文檔中的 2.4 節内容。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.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;
alert(url);
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>
代碼說明：
用戶輸入用戶名密碼後點擊提交或登錄按鈕時，觸發「doSubmit()」方法，該方法中實現登錄事件并且通過 Ajax 将用戶名密碼發送到報表系統進行驗證，并且在驗證成功時，觸發 HTML 中的表單提交事件，實現登錄成功頁面的跳轉。
用戶名密碼表單中使用 button 來觸發 doSubmit()，您只要将 doSubmit() 方法加入到您的 OA 的登錄頁面中即可，爲了簡化操作，上面的完整代碼沒有跳轉到指定頁面，而是跳轉到平台頁面。
注1：由於使用了 Ajax，需要引入 jquery.js。
注2：如果在 Win8 下單點登錄異常，在 Ajax 傳遞用戶名密碼的時候轉碼一下即可，比如說 fine_password":encodeURIComponent(password)。
2.3 注銷用戶頁面
新建 HTML 文件，命名爲「ajaxlogout.html」，代碼如下所示：
注：根據實際情況修改代碼中的訪問路徑或端口号。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="UTF-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function doSubmit() {
jQuery.ajax({
url:"http://localhost:8080/webroot/decision/logout/cross/domain",//單點登錄的報表服務器
dataType:"jsonp",//跨域采用jsonp方式
jsonp:"callback",
timeout:5000,//超時時間（單位：毫秒）
success:function(data) {
if (data.status === "success") {
//登出成功
alert("已登出");
}
},
error:function(){
// 登出失敗（超時或服務器其他錯誤）
}
});
}
</script>
</head>
<body>
<p>請登出</p>
<form id="login" name="login" method="POST" action="" >
<input type="button" value="登出" onClick="doSubmit()" />
</form>
</body>
</html>
2.4 将 HTML 文件放到指定位置
将保存後的 ajaxlogin.html、ajaxlogout.html 文件放到端口号爲 8075 工程的%FR_HOME%/webapps/webroot文件夾下，如下圖所示：
2.5 關閉安全防護相關按鈕
1）以管理員身份進入端口号爲 8075 工程的平台，點擊「管理系統>安全管理」，關閉「内容嗅探攻擊防護」、「點擊劫持攻擊防護」，如下圖所示：
2）相同步驟關閉端口号爲 8080 工程的「内容嗅探攻擊防護」、「點擊劫持攻擊防護」。
2.6 效果查看
1）打開浏覽器，訪問：http://localhost:8075/webroot/ajaxlogin.html，輸入端口号爲 8080 工程的賬号和密碼，成功訪問 8080 工程。如下圖所示：
2）在登錄成功的浏覽器上新開标簽頁，訪問http://localhost:8075/webroot/ajaxlogout.html，點擊「登出」按鈕，切換到之前登錄成功的 8080 工程頁面，刷新該頁面，用戶被踢出登錄。如下圖所示：
注：如果端口号爲 8075 和端口号爲 8080 的兩個工程都開啓 短信登錄驗證 ，訪問http://localhost:8075/webroot/ajaxlogin.html時，ajax 單點登錄會跳過短信驗證直接登錄成功。
3. 注意事項
報表通過 URL 傳用戶名和密碼進行驗證，傳到報表服務器是以 Session 的方式保存，防止被人中途攔截會導緻系統洩密，可以對登錄進來的密碼進行加密，可參考文檔 密碼加密設置
用戶也可以使用 https 證書，讓請求在傳輸過程中加密，配置方法也很簡單，修改下服務器的配置文件就可以。這種方式如果使用自己生成的證書，客戶端在訪問報表中浏覽器會顯示證書非法警告，所以需要去購買合法證書。
