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

一、問題描述

對於 OA 系統中想實現對 FineReport 的單點登入，使用者需要在 OA 的登入介面中將使用者名稱和密碼傳入到報表的認證地址進行認證，若 OA 系統和報表系統不是部署在同一臺伺服器上，會在進行登入時進行跨域，在上一節介紹了Ajax 跨域非同步單點登入，那麼要如何透過 iframe 方式實現 OA 系統和報表系統的跨域登入呢？

二、解決思路

在 OA 系統的登入介面中，報表先把權限驗證地址以 iframe 的方式嵌入，解決跨域問題，然後再在 iframe 中觸發表單登入事件，實現登入頁面的跳轉。
注：如果使用跨域 iframe 的方式嵌入報表，出現無法訪問的情況，請關閉【Security Headers】高階設定中的【點選劫持攻擊防護功能】，詳情參見：B11-00 安全防護。

三、示例

透過簡化的 OA 登入頁面說明 iframe 跨域單點登入的實現步驟。
FineReport 報表平臺系統身份驗證地址為：
scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback"。

1

iframe 实现步骤-登入按鈕事件設定。

使用者輸入使用者名稱密碼後點擊【提交】或【登入】按鈕時，執行函式 doSubmit() ，該函式先建立一個 iframe，然後將報表驗證使用者名稱密碼的認證地址指向此 iframe 的 src，並對使用的瀏覽器進行判斷。因為每個瀏覽器註冊寫法不太一樣，然後將此iframe標籤加入到 head 標籤中，實現報表認證程式碼如下。

function doSubmit() {      
    var username = document.getElementById("username").value; //獲取輸入的用戶名
    var password = document.getElementById("password").value;  //獲取輸入的參數
    var scr = document.createElement("iframe");      //創建iframe    
    scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";   //将报表验证用户名密码的地址指向此iframe
    if (scr.attachEvent)
{       //判斷是否為IE瀏覽器 
           scr.attachEvent("onload", function(){                    //如果為IE瀏覽器則頁面加載完成後立即執行 
               window.location=" http://localhost:8075/webroot/decision"; //直接跳轉到數據決策系統
           });  
        } else {  
           scr.onload = function(){              //其他瀏覽器則重新加載onload事件  
               /*跳轉到指定登錄成功頁面,index.jsp  
                var f = document.getElementById("login");  
                f.submit();  */
            window.location=" http://localhost:8075/webroot/decision"; //直接跳轉到數據決策系統
        };  
     }  
   
 document.getElementsByTagName("head")[0].appendChild(scr);   //将iframe標籤嵌入到head中

2

iframe 实现步骤-完整程式碼。

將上述 iframe 單點登入的提交時間放到原來 OA 系統登入頁面中，是指點選登入按鈕時，觸發該事件，修改後即可以實現跨域單點登入，程式碼如下。
注：使用者名稱密碼表單中使用 button 來觸發 doSubmit()，只要將 doSubmit() 加入到您的 OA 的登入頁面中即可，為了簡化操作，完整程式碼中沒有跳轉到指定頁面，直接跳轉到平臺頁面。


<!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://192.168.1.40:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback";   //将报表验证用户名密码的地址指向此iframe
        if (scr.attachEvent)
      {       //判斷是否為IE瀏覽器 
               scr.attachEvent("onload", function(){                    //如果為IE瀏覽器則頁面加載完成後立即執行 
                   window.location="http://192.168.1.40:8075/webroot/decision"; //直接跳轉到數據決策系統
               });  
            } else {  
               scr.onload = function(){              //其它瀏覽器則重新加載onload事件
                   /*跳轉到指定登錄成功頁面,index.jsp  
                    var f = document.getElementById("login");  
                    f.submit();  */
                window.location="http://192.168.1.40:8075/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&gt

3

注意事項-問題描述。

iframe 跨域單點登入在 IE11 瀏覽器上失敗，谷歌瀏覽器上單點登入正常。

4

注意事項-解決方案。

由於 IE11 沒有 attachEvent 這個屬性，需要新增一個 meta 標簽來設定瀏覽器的預設相容模式，透過在 html 的 head 標簽中加入下面程式碼。
<meta http-equiv="X-UA-Compatible" content="IE=10" />。
meta 標簽用來設定瀏覽器的預設相容模式為 IE10，這樣就可以依舊使用 attachEvent 屬性。
另外 IE11瀏覽器需要將報表伺服器的地址加入到受信任的站點中，如下圖所示。