Ajax 跨域非同步單點登入- FineBI帮助文档 FineBI帮助文档

1. 概述

1.1 問題描述

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

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

1.2 解決思路

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

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

2. 範例

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

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

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

2.1 環境準備

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

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

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

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

2）啟動兩個工程。

2.2 建立登入頁面

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

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

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 程式碼範例：方案一.zip

2）方案二：使用 data 傳參

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

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

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>