1. 概述
1.1 問題描述
企業往往會有多個報表平台或多個相關的平台，用戶希望只登錄一次就可以訪問其他的系統，例如登錄 OA 系統的同時登錄報表系統，即将輸入的用戶名密碼也發送到報表服務器進行認證，從而訪問報表時不需要再次登錄。
在上一節介紹了 Ajax 跨域單點登錄 ，那麽如何通過 iframe 方式實現 OA 系統和報表系統的跨域單點登錄呢？
1.2 解決思路
在 OA 系統的登錄界面中，報表先把權限驗證地址以 iframe 的方式嵌入，解決跨域問題，然後再在 iframe 中觸發表單登錄事件，實現登錄頁面的跳轉。
2. 示例
啓動兩個工程，端口号分别爲 8075 和 8080，将新建 HTML 文件 iframe.html 放到端口号爲 8075 的工程下，訪問http://localhost:8075/webroot/iframe.html，輸入 8080 工程的用戶名和密碼，成功訪問 8080 工程。
在登錄成功的浏覽器上新開标簽頁，訪問http://localhost:8075/webroot/decision/logout/cross/domain，切換到之前登錄成功的 8080 工程頁面，刷新該頁面，用戶被踢出登錄。
2.1 環境準備
1）本文示例準備的兩個工程分别爲：
本地工程，端口号爲 8075
部署到 Tomcat 上的工程，端口号爲 8080
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>
1）代碼說明：
用戶輸入用戶名密碼後點擊提交或登錄按鈕時，執行函數 doSubmit() ，該函數先創建一個 iframe，然後将報表驗證用戶名密碼的認證地址指向此 iframe 的 src，并對使用的浏覽器進行判斷（因爲每個浏覽器注冊寫法不太一樣），然後将此 iframe 标簽加入到 head 标簽中。
注：用戶名密碼表單中使用 button 來觸發 doSubmit()，您只要将 doSubmit() 加入到您的 OA 的登錄頁面中即可，爲了簡化操作，完整代碼中沒有跳轉到指定頁面，直接跳轉到平台頁面。
2）訪問 FineReport 模板
本節所示代碼單點到 8080 工程的平台界面，若用戶只希望訪問 8080 工程的某張模板，只需要将代碼中window.location後面的 URL 鏈接修改爲模板訪問鏈接即可，模板訪問鏈接格式如下所示：
示例一：http://localhost:8080/webroot/decision/view/report?viewlet=GettingStarted.cpt
示例二：http://localhost:8080/webroot/decision/view/form?viewlet=/doc/frm/example.frm
2.3 将 HTML 文件放到指定位置
将 HTML 文件命名爲iframe.html，放到端口号爲 8075 工程的%FR_HOME%/webapps/webroot文件夾下，如下圖所示：
2.4 效果查看
1）訪問http://localhost:8075/webroot/iframe.html，輸入 8080 工程的賬号和密碼，成功訪問 8080 工程。如下圖所示：
注：若出現無法訪問的情況，請在兩個工程中嘗試關閉安全防護中的「點擊劫持攻擊防護按鈕」。
2）在登錄成功的浏覽器上新開标簽頁，訪問http://localhost:8075/webroot/decision/logout/cross/domain，切換到之前登錄成功的 8080 工程頁面，刷新該頁面，用戶被踢出登錄。如下圖所示：
4. 注意事項
4.1 IE11 浏覽器跨域單點登錄失敗
問題描述：
iframe 跨域單點登錄在 IE11 浏覽器上失敗，谷歌浏覽器上單點登錄正常。
解決方案：
1）由於 IE11 沒有 attachEvent 這個屬性，需要添加一個 meta 标簽來設置浏覽器的默認兼容模式，通過在 html 的 head 标簽中加入下面代碼：
<meta http-equiv="X-UA-Compatible" content="IE=10" />
meta 标簽用來設置浏覽器的默認兼容模式爲 IE10，這樣就可以依舊使用 attachEvent 屬性。
2）另外 IE11 浏覽器需要将報表服務器的地址加入到受信任的站點中，如下圖所示：
