OA 系統與 BI 系統整合，將 BI 綁定在 OA 系統的節點上，對於 OA 系統中想實現對 FineBI 的單點登入，使用者需要在 OA 的登入介面中將帳號和密碼傳入到 BI 的認證位址進行認證。
若 OA 系統和 BI 系統不是部署在同一臺伺服器上，在登入時進行跨域，那麼要如何透過 Ajax 實現 OA 系統和 BI 系統的跨域登入呢？
iframe 方式和 Ajax 方式兩種登入方式均可實現單點登入的跨域，但 Ajax 可以實現非同步的單點登入，並且可對 BI 系統驗證的結果進行處理，如登入逾時；但是 iframe 不可以非同步處理，並且在進行驗證的時候，無法對驗證的結果進行處理。
Ajax 登入方式天然支援跨域，故在 OA 系統的登入介面中直接透過 Ajax 將帳號密碼傳送到 BI 伺服器進行後臺驗證，則可解決跨域單點登入問題。
啟動兩個工程，埠號分別為 37799 和 8080，將建立 HTML 檔案 ajaxlogin.html、ajaxlogout.html 放到埠號為 37799 的工程下。存取http://localhost:37799/webroot/ajaxlogin.html，輸入 8080 工程的帳號和密碼，成功存取 8080 工程。
在登入成功的瀏覽器上新開標籤頁，存取http://localhost:37799/webroot/ajaxlogout.html，點選「登出」按鈕，重新整理之前登入成功的 8080 工程頁面，使用者被踢出登入。
注：本章範例適用於 PC 端。
1）本文範例準備的兩個工程分別為：
注：這兩個工程需要有相同的帳號和密碼。
本地工程，埠號為 37799
部署到 Tomcat 上的工程，埠號為 8080
Tomcat 伺服器部署請參見：Tomcat伺服器部署
2）啟動兩個工程。
注1：根據實際情況修改代碼中的存取路徑或埠號。
注2：內網環境中，下面代碼引用的 jquery.min.js 檔案無法生效，需下載 JS 檔案到本地並修改對應的路徑，具體步驟請參見：單點登入問題彙總 文檔中的 2.3 節內容。
建立 HTML 檔案，命名為「ajaxlogin.html」，代碼如下所示：
<!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(); 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=" +encodeURIComponent(username) + "&fine_password=" + encodeURIComponent(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>
帳號或密碼中有特殊字元，例如含有「&#」時，需對帳號或密碼進行轉碼，本節提供兩種轉碼方法：
1）方案一：使用encodeURIComponent()進行轉碼
var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" +encodeURIComponent(username) + "&fine_password=" + encodeURIComponent(password) + "&validity=" + -1;
HTML 代碼範例：方案一.html
2）方案二：使用 data 傳參
data:{"fine_username":username,"fine_password":password,validity:-1},
HTML 代碼範例：方案二.html
建立 HTML 檔案，命名為「ajaxlogout.html」，代碼如下所示：
注：根據實際情況修改代碼中的存取路徑或埠號。
<!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"; alert(url); jQuery.ajax({ url: url,//單點登入的管理平台報表伺服器 timeout: 5000,//逾時時間（單位：毫秒） dataType:"jsonp",//跨域採用jsonp方式 data:{"fine_username":username,"fine_password":password,validity:-1}, 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>
將儲存後的 ajaxlogin.html、ajaxlogout.html 檔案放到埠號為 37799 工程的%BI_HOME%/webapps/webroot資料夾下，如下圖所示：
1）以管理者身分進入埠號為 37799 工程的平台，點選「管理系統>安全管理」，關閉「內容嗅探攻擊防護」、「點選劫持攻擊防護」，如下圖所示：
2）相同步驟關閉埠號為 8080 工程的「內容嗅探攻擊防護」、「點選劫持攻擊防護」。
1）開啟瀏覽器，存取：http://localhost:37799/webroot/ajaxlogin.html，輸入埠號為 8080 工程的帳號和密碼，成功存取 8080 工程。如下圖所示：
2）在登入成功的瀏覽器上新開標籤頁，存取http://localhost:37799/webroot/ajaxlogout.html，點選「登出」按鈕，切換到之前登入成功的 8080 工程頁面，重新整理該頁面，使用者被踢出登入。如下圖所示：
注：如果埠號為 37799 和埠號為 8080 的兩個工程都開啓 簡訊登入驗證 ，存取http://localhost:37799/webroot/ajaxlogin.html時，ajax 單點登入會跨越簡訊驗證直接登入成功。