反饋已提交
網絡繁忙
OA 系統與報表系統整合,將報表繫結在 OA 系統的節點上,對於 OA 系統中想實現對 FineReport 的單點登入,使用者需要在 OA 的登入介面中將使用者名稱和密碼傳入到報表的認證地址進行認證,若 OA 系統和報表系統不是部署在同一臺伺服器上,在進行登入時進行跨域,那麼要如何透過 Ajax 實現 OA 系統和報表系統的跨域登入呢?
Ajax:即“Asynchronous Javascript And XML”(非同步 JavaScript 和 XML),是指一種建立互動式網頁應用的網頁開發技術。透過在後臺與伺服器進行少量資料交換,Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
iframe 方式和 Ajax 方式的區別:
iframe 方式和 Ajax 方式均可以實現跨域單點登入,Ajax 可以實現非同步的單點登入,並且可對報表系統驗證的結果進行處理,如登入超時,但是 iframe 不可以非同步處理,並且在進行報表驗證的時候,無法對驗證的結果進行處理。
Ajax 登入方式天然支援跨域,故在 OA 系統的登入介面中直接透過 Ajax 將使用者名稱密碼傳送到報表伺服器進行後臺驗證,則可解決跨域單點登入問題。
透過簡化的 OA 登入頁面說明ajax的實現步驟。
登陸按鈕事件設定。
使用者輸入使用者名稱密碼後點擊提交或登入按鈕時,觸發 doSubmit() 方法,該方法中實現登入事件並且透過 Ajax 將使用者名稱密碼傳送到報表系統進行驗證,並且在驗證成功時,觸發 HTML 中的表單提交事件,實現登入成功頁面的跳轉,實現報表認證程式碼如下。
注1:由於使用了 Ajax,需要引入 jquery.js。
注2:如果在 Win8 下單點登入異常,在 Ajax 傳遞使用者名稱密碼的時候轉碼一下即可,比如说fine_password":encodeURIComponent(password)。
function doSubmit() { var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); if (username === "") { window.alert("請輸入使用者名稱"); return false; } if (password === "") { window.alert("請輸入密碼"); return false; } var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1; jQuery.ajax({ url: url,//單點登入的管理平臺報表伺服器 timeout: 5000,//超時時間(單位:毫秒) dataType:"jsonp",//跨域採用jsonp方式 jsonp:"callback", success: function (res) { console.log(res); if (res.errorCode) { window.alert(res.errorMsg); }else { // 儲存token並跳轉到對應連結 window.location.href = "http://localhost:8080/webroot/decision"; } }, error: function () { alert("超時或伺服器其他錯誤");// 登入失敗(超時或伺服器其他錯誤) } });}<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
將上述 Ajax 單點登入的提交事件放到原來 OA 系統登入頁面中,是指點選登入按鈕時,觸發該事件,修改後即可以實現跨域單點非同步登入的程式碼如下。
注:使用者名稱密碼錶單中使用 button 來觸發 doSubmit(),您只要將 doSubmit() 方法加入到您的 OA 的登入頁面中即可,為了簡化操作,上面的完整程式碼沒有跳轉到指定頁面,而是跳轉到平臺頁面。
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; " charset="UTF-8"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> function doSubmit() { var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); if (username === "") { window.alert("請輸入使用者名稱"); return false; } if (password === "") { window.alert("請輸入密碼"); return false; } var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + -1;alert(url); jQuery.ajax({ url: url,//單點登入的管理平台報表伺服器 timeout: 5000,//超時時間(單位:毫秒) dataType:"jsonp",//跨域采用jsonp方式 jsonp:"callback", success: function (res) { console.log(res); if (res.errorCode) { window.alert(res.errorMsg); }else { // 保存token并跳轉到對應鏈接 window.location.href = "http://localhost:8080/webroot/decision"; } }, error: function () { alert("超時或服務器其他錯誤");// 登入失敗(超時或伺服器其他錯誤) } }); } </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>
當登出專案使用者時,同時也希望登出報表使用者名稱的 Session,這時可在點選退出按鈕時的同時也可以實現 FR 報表的退出登入。
jQuery.ajax({ url:"http://localhost:8075/webroot/decision/logout/cross/domain",//单点登录的报表服务器 dataType:"jsonp",//跨域採用jsonp方式 jsonp:"callback", timeout:5000,//超時時間(單位:毫秒) success:function(data) { if (data.status === "success") { //登出成功 } }, error:function(){ // 登出失敗(超時或伺服器其他錯誤) }});
報表透過 URL 傳使用者名稱和密碼進行驗證,傳到報表伺服器是以 Session 的方式儲存,防止被人中途攔截會導致系統洩密,可以對登入進來的密碼進行加密,可參考文件 密碼加密設定;或者使用 https 證書,讓請求在傳輸過程中加密,配置方法也很簡單,修改下伺服器的配置檔案就行了。這種方式還存在一個證書合法性問題,用自己生成的證書,客戶端在訪問報表中瀏覽器會顯示證書非法警告,所以需要去購買合法證書。目前國內最便宜的證書一年是一千多元。
跨域單點登入需改將【管理系統】→【安全管理】→【安全防護】的【內容嗅探攻擊防護】以及【點選劫持攻擊防護】關閉,否則會報錯,如下圖所示:
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉