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

1. 概述

1.1 問題描述

OA 系統與報表系統整合，將報表綁定在 OA 系統的節點上，對於 OA 系統中想實現對 FineReport 的單點登入，使用者需要在 OA 的登入介面中將帳號和密碼傳入到報表的認證地址進行認證。

若 OA 系統和報表系統不是部署在同一台伺服器上，在登入時進行跨域，那麼要如何透過 Ajax 實現 OA 系統和報表系統的跨域登入呢？

1.2 解決思路

iframe 方式和 Ajax 方式兩種登入方式均可實現單點登入的跨域，但 Ajax 可以實現非同步的單點登入，並且可對報表系統驗證的結果進行處理，如登入逾時；但是 iframe 不可以非同步處理，並且在進行報表驗證的時候，無法對驗證的結果進行處理。

Ajax 登入方式天然支援跨域，故在 OA 系統的登入介面中直接透過 Ajax 將帳號密碼傳送到報表伺服器進行後台驗證，則可解決跨域單點登入問題。

注：決策平台單點登入API介紹請參見：前台單點登入API

2. 範例

啟動兩個工程，埠號分別為 8075 和 8080，將建立 HTML 檔案 ajaxlogin.html、ajaxlogout.html 放到埠號為 8075 的工程下。存取http://localhost:8075/webroot/ajaxlogin.html，輸入 8080 工程的帳號和密碼，成功存取 8080 工程。

在登入成功的瀏覽器上新開標籤頁，存取http://localhost:8075/webroot/ajaxlogout.html，點選「登出」按鈕，重新整理之前登入成功的 8080 工程頁面，使用者被踢出登入。

注：本章範例適用於 PC 端。

2.1 環境準備

1）本文範例準備的兩個工程分別為：

注：這兩個工程需要有相同的帳號和密碼。

本地工程，埠號為 8075
部署到 Tomcat 上的工程，埠號為 8080

Tomcat 伺服器部署請參見：獨立部署

2）啟動兩個工程。

2.2 建立登入頁面

注1：根據實際情況修改程式碼中的存取路徑或埠號。

注2：內網環境中，下面程式碼引用的 jquery.min.js 檔案無法生效，需下載 JS 檔案到本地並修改對應的路徑，具體步驟請參見：單點登入問題匯總文檔中的 2.4 節內容。

2.2.1 帳號或密碼中無特殊字元

建立 HTML 檔案，命名為「ajaxlogin.html」，程式碼如下所示：

<!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>

2.2.2 帳號或密碼中有特殊字元

帳號或密碼中有特殊字元，例如含有「&#」時，需對帳號或密碼進行轉碼，本節提供兩種轉碼方法：

1）方案一：使用encodeURIComponent()進行轉碼

var url = "http://localhost:8080/webroot/decision/login/cross/domain" + "?fine_username=" +encodeURIComponent(username)
 + "&fine_password=" + encodeURIComponent(password) + "&validity=" + -1;

HTML 程式碼範例：方案一.html

2）方案二：使用 data 傳參

data:{"fine_username":username,"fine_password":password,validity:-1},

HTML 程式碼範例：方案二.html

2.3 註銷使用者頁面

建立 HTML 檔案，命名為「ajaxlogout.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() {  
	 jQuery.ajax({  
     url:"http://localhost:8080/webroot/decision/logout/cross/domain",//單點登入的報表伺服器  
     dataType:"jsonp",//跨域採用jsonp方式  
     jsonp:"callback",  
     timeout:5000,//逾時時間（單位：毫秒）  
     success:function(data) {  
            if (data.status === "success") {  
                  //登出成功
					alert("已登出");
            }   
     },  
     error:function(){  
           // 登出失敗（逾時或伺服器其他錯誤）  
     }  
});
  }  
 </script>      
</head>      
<body>      
  <p>請登出</p>      
  <form id="login" name="login" method="POST"  action="" >            
    <input type="button" value="登出"  onClick="doSubmit()" />      
  </form>      
 </body>      
</html>

2.4 將 HTML 檔案放到指定位置

將儲存後的 ajaxlogin.html、ajaxlogout.html 檔案放到埠號為 8075 工程的%FR_HOME%/webapps/webroot資料夾下，如下圖所示：

2.5 關閉安全防護相關按鈕

1）以管理者身分進入埠號為 8075 工程的平台，點選「管理系統>安全管理」，關閉「內容嗅探攻擊防護」、「點選劫持攻擊防護」，如下圖所示：

2）相同步驟關閉埠號為 8080 工程的「內容嗅探攻擊防護」、「點選劫持攻擊防護」。

2.6 效果查看

1）開啟瀏覽器，存取：http://localhost:8075/webroot/ajaxlogin.html，輸入埠號為 8080 工程的帳號和密碼，成功存取 8080 工程。如下圖所示：

2）在登入成功的瀏覽器上新開標籤頁，存取http://localhost:8075/webroot/ajaxlogout.html，點選「登出」按鈕，切換到之前登入成功的 8080 工程頁面，重新整理該頁面，使用者被踢出登入。如下圖所示：

注：如果埠號為 8075 和埠號為 8080 的兩個工程都開啟簡訊登入驗證，存取http://localhost:8075/webroot/ajaxlogin.html時，ajax 單點登入會跨越簡訊驗證直接登入成功。

3. 注意事項

報表透過 URL 傳帳號和密碼進行驗證，傳到報表伺服器是以 Session 的方式儲存，防止被人中途攔截會導致系統破解，可以對登入進來的密碼進行加密，可參考文檔密碼加密設定

使用者也可以使用 https 憑證，讓請求在傳輸程式中加密，配置方法也很簡單，修改下伺服器的配置檔案就可以。這種方式如果使用自己生成的憑證，用戶端在存取報表中瀏覽器會顯示憑證非法警告，所以需要去購買合法憑證。

上一篇：前台單點登入之密文傳輸範例

下一篇：iframe跨域單點登入

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

AJAX跨域不同步單點登入