1. 概述
1.1 問題描述
企業往往會有多個 BI 平台或多個相關的平台，使用者希望只登入一次就可以存取其他的系統，例如登入 OA 系統的同時登入 BI 系統，即將輸入帳號密碼也傳送到 BI 系統中進行認證，進而存取 BI 系統時不需要再次登入。
在上一節介紹了 Ajax 跨域非同步單點登入 ，那麼如何透過 iframe 方式實現 OA 系統和 BI 系統的跨域單點登入呢？
1.2 解決思路
在 OA 系統登入介面中，BI 先把權限驗證地址以 iframe 的方式嵌入，解決跨域問題，然後再在 iframe 中觸發表單登入事件，實現登入頁面的跳轉。
2. 範例
啟動兩個工程，埠號分別為 37799 和 8080，將建立 HTML 檔案 iframe.html 放到埠號為 37799 的工程下，存取http://localhost:37799/webroot/iframe.html，輸入 8080 工程的帳號和密碼，成功存取 8080 工程。
在登入成功的瀏覽器上新開標籤頁，存取http://localhost:37799/webroot/decision/logout/cross/domain，切換到之前登入成功的 8080 工程頁面，重新整理該頁面，使用者被踢出登入。
2.1 環境準備
1）本文範例準備的兩個工程分別為：
注：這兩個工程需要有相同的帳號和密碼。
本地工程，埠號為 37799
部署到 Tomcat 上的工程，埠號為 8080
Tomcat 伺服器部署請參見：Tomcat伺服器部署
2）啟動兩個工程。
2.2 建立登入頁面
建立 HTML 檔案，命名為「iframe.html」，程式碼如下所示：
注：根據實際情況修改程式碼中的存取路徑或埠號。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<script type="text/javascript">
function doSubmit() {
var username = document.getElementById("username").value; //獲取輸入帳號
var password = document.getElementById("password").value; //獲取輸入參數
var scr = document.createElement("iframe"); //建立iframe
scr.src = "http://localhost:8080/webroot/decision/login/cross/domain?fine_username=" + encodeURIComponent(username) + "&fine_password=" + encodeURIComponent(password) + "&validity=" + -1 + "&callback=callback"; //將報表驗證帳號密碼的地址指向此iframe
if (scr.attachEvent)
{ //判斷是否為ie瀏覽器
scr.attachEvent("onload", function(){ //如果為ie瀏覽器則頁面載入完成後立即執行
window.location="http://localhost:8080/webroot/decision"; //直接跳轉到數據決策系統
});
} else {
scr.onload = function(){ //其他瀏覽器則重新載入onload事件
/*跳轉到指定登入成功頁面,index.jsp
var f = document.getElementById("login");
f.submit(); */
window.location="http://localhost:8080/webroot/decision"; //直接跳轉到數據決策系統
};
}
document.getElementsByTagName("head")[0].appendChild(scr); //將iframe標籤嵌入到head中
}
</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() ，該函式先建立一個 iframe，然後將 BI 驗證帳號密碼的認證地址指向此 iframe 的 src，並對使用的瀏覽器進行判斷（因為每個瀏覽器註冊寫法不太一樣），然後將此 iframe 標籤加入到 head 標籤中。
注：帳號密碼表單中使用 button 來觸發 doSubmit()，您只要將 doSubmit() 加入到您的 OA 的登入頁面中即可，為了簡化操作，完整程式碼中沒有跳轉到指定頁面，直接跳轉到平台頁面。
2.3 將 HTML 檔案放到指定位置
將 HTML 檔案命名為iframe.html，放到埠號為 37799 工程的%BI_HOME%/webapps/webroot資料夾下，如下圖所示：
2.4 效果查看
1）存取http://localhost:37799/webroot/iframe.html，輸入 8080 工程的帳號和密碼，成功存取 8080 工程。如下圖所示：
注：若出現無法存取的情況，請在兩個工程中嘗試關閉 安全防護 中的「點選劫持攻擊防護」按鈕和「內容嗅探攻擊防護」按鈕。
2）在登入成功的瀏覽器上新開標籤頁，存取http://localhost:37799/webroot/decision/logout/cross/domain，切換到之前登入成功的 8080 工程頁面，重新整理該頁面，使用者被踢出登入。如下圖所示：
