iframe跨域單點登入- FineReport帮助文档 - 全面的报表使用教程和学习资料

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:8080/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:8080/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 瀏覽器需要將報表伺服器的地址加入到受信任的地點中，如下圖所示：

已經是第一篇

已經是最後一篇

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

iframe跨域單點登入