iframe跨域單點登入- FineBI帮助文档 FineBI帮助文档

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 工程頁面，重新整理該頁面，使用者被踢出登入。如下圖所示：

上一篇：Ajax 跨域非同步單點登入

下一篇：CAS單點登入

有帮助
没帮助
只是浏览
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

iframe跨域單點登入