反饋已提交

網絡繁忙

iframe跨域單點登入

一、問題描述

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

二、解決思路

  1. 在 OA 系統的登入介面中,報表先把權限驗證地址以 iframe 的方式嵌入,解決跨域問題,然後再在 iframe 中觸發表單登入事件,實現登入頁面的跳轉。

  2. 注:如果使用跨域 iframe 的方式嵌入報表,出現無法訪問的情況,請關閉【Security Headers】高階設定中的【點選劫持攻擊防護功能】,詳情參見:B11-00 安全防護

1.png

三、示例

  1. 透過簡化的 OA 登入頁面說明 iframe 跨域單點登入的實現步驟。

  2. FineReport 報表平臺系統身份驗證地址為:

    scr.src = " http://localhost:8075/webroot/decision/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1 + "&callback=callback"。

1
iframe 实现步骤-登入按鈕事件設定。
  1. 使用者輸入使用者名稱密碼後點擊【提交】或【登入】按鈕時,執行函式 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 实现步骤-完整程式碼。
  1. 將上述 iframe 單點登入的提交時間放到原來 OA 系統登入頁面中,是指點選登入按鈕時,觸發該事件,修改後即可以實現跨域單點登入,程式碼如下。

  2. 注:使用者名稱密碼表單中使用 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
注意事項-問題描述。
  1. iframe 跨域單點登入在 IE11 瀏覽器上失敗,谷歌瀏覽器上單點登入正常。

4
注意事項-解決方案。
  1. 由於 IE11 沒有 attachEvent 這個屬性,需要新增一個 meta 標簽來設定瀏覽器的預設相容模式,透過在 html 的 head 標簽中加入下面程式碼。

    <meta http-equiv="X-UA-Compatible" content="IE=10" />。

    meta 標簽用來設定瀏覽器的預設相容模式為 IE10,這樣就可以依舊使用 attachEvent 屬性。

  2. 另外 IE11瀏覽器需要將報表伺服器的地址加入到受信任的站點中,如下圖所示。

2.png

四、登出使用者

1
平臺系統的登出。
  1. 當將 FineReport 整合到專案中時,登出專案使用者,同時也希望登出系統的使用者名稱 session,即退出系統,其登出方法為:http://192.168.1.40:8075/webroot/decision/logout/cross/domain  就可以實現 FR 系統的登出。

附件列表


主題: 部署集成
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙