反饋已提交
網絡繁忙
對於 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"。
使用者輸入使用者名稱密碼後點擊【提交】或【登入】按鈕時,執行函式 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中
將上述 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>
iframe 跨域單點登入在 IE11 瀏覽器上失敗,谷歌瀏覽器上單點登入正常。
由於 IE11 沒有 attachEvent 這個屬性,需要新增一個 meta 標簽來設定瀏覽器的預設相容模式,透過在 html 的 head 標簽中加入下面程式碼。
<meta http-equiv="X-UA-Compatible" content="IE=10" />。
meta 標簽用來設定瀏覽器的預設相容模式為 IE10,這樣就可以依舊使用 attachEvent 屬性。
另外 IE11瀏覽器需要將報表伺服器的地址加入到受信任的站點中,如下圖所示。
當將 FineReport 整合到專案中時,登出專案使用者,同時也希望登出系統的使用者名稱 session,即退出系統,其登出方法為:http://192.168.1.40:8075/webroot/decision/logout/cross/domain 就可以實現 FR 系統的登出。
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙