自訂登入介面- FineReport帮助文档 - 全面的报表使用教程和学习资料

一、概述

1

版本。

報表伺服器版本	JAR	新增功能
10.0	-	-
10.0	2020-06-08	【使用者密碼認證】和【角色權限認證】支持自訂登入頁
10.0.18	-	自訂登入頁，支援先預覽效果再儲存

2

預期效果。

使用者登入數據決策系統時，不希望使用預設登入介面，可透過自訂登入介面的方式修改預設登入介面，如下圖所示。

3

解決思路。

登入介面，獲取到帳號和密碼的值，傳送到報表系統，報表服務帶着這兩個參數存取認證位址進行認證。

注：實現 App 自訂登入網頁請參考文檔：[APP]登入頁

二、設定自訂登入介面

1

建立 HTML 檔案。

建立 HTML 檔案自訂決策平台登入頁面，並儲存在%FR_HOME%\webapps\webroot目錄下。檔案內容如下。
點擊下載HTML 檔案：login.html

注：根據實際情況修改 html 檔案（即下方代碼）中 URL 的 IP 和埠號。

<html>
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自訂登入Demo</title>
 
    <!-- 自訂樣式，根據實際需求使用 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 
    <style>
        .container {
            display: flex;
            justify-content: center;
        }
 
        .login-box {
            width: 300px;
            margin-top: 100px;
        }
 
        .login-box h2 {
            font-size: 26px;
            text-align: center;
            margin-bottom: 25px;
        }
 
        .login-item {
            margin-bottom: 20px;
        }
    </style>
</head>
 
<body>
<div class="container">
    <form class="login-box" action="" method="post" onsubmit="return false;">
        <h2>FineReport數據決策系統</h2>
        <div class="login-item">
            <label for="inputUsername" class="sr-only">帳號</label>
            <input type="text" id="inputUsername" class="form-control" placeholder="帳號" required="" autofocus="">
        </div>
        <div class="login-item">
            <label for="inputPassword" class="sr-only">密碼</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="密碼" required="">
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">登入</button>
    </form>
</div>
<!-- 由於是內嵌在工程中，可以直接使用fineui -->
<script src="http://localhost:8075/webroot/decision/file?path=/com/fr/web/ui/fineui.min.js&type=plain&parser=plain">
</script>
<script>
    document.getElementById("submitBtn").addEventListener("click", function () {
        doSubmit();
    });
 
    function doSubmit() {
        var username = document.getElementById("inputUsername").value.trim();
        var password = document.getElementById("inputPassword").value.trim();
        if (username === "") {
            window.alert("請輸入帳號");
            return false;
        }
        if (password === "") {
            window.alert("請輸入密碼");
            return false;
        }
        /**
         * 透過登入API傳送post請求，攜帶帳號密碼等資訊
         */
        $.ajax({
            url: "http://localhost:8075/webroot/decision/login",
            contentType: "application/json",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({
                username: username,
                password: password,
                validity: -1,
                origin: getUrlQuery("origin")
            }),
            success: function (res) {
                // 登入成功後儲存是否保持登入狀態以及token
                if (res.data) {
                    var data = res.data;
                    var day = data.validity === -2 ? (14 * 24) : -1;
                    BI.Cache.addCookie("fine_remember_login", data.validity, "/", day);
                    BI.Cache.addCookie("fine_auth_token", data.accessToken, "/", day);
 
                    // 然後跳轉到相應的頁面
                    var response = data.originUrlResponse;
                    if (BI.toUpperCase(response.method) === "GET") {
                        window.location.href = response.originUrl;
                    } else {
                        doActionByForm(response.originUrl, response.parameters, {method: response.method});
                    }
                } else {
                    // 提示錯誤資訊
                    alert(res.errorMsg);
                }
            },
            error: function () {
                alert("逾時或伺服器其他錯誤");
            }
        });
    }
 
    // 查詢url參數
    function getUrlQuery (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r !== null) return r[2];
        return "";
    }
 
    // 透過form表單跳轉
    function doActionByForm (url, data, options) {
            options = options || {};
            var config = {
                method: options.method,
                url: url,
                data: data,
                target: options.target
            };
            var $form = $("<form method=\"" + config.method + "\" />");
            $form.attr("action", config.url);
            $form.attr("method", config.method || "post");
            $form.attr("target", config.target || "_self");
            for (var key in config.data) {
                $form.append("<input type=\"hidden\" name=\"" + key + "\" value=\"" + config.data[key] + "\" />");
            }
            $(document.body).append($form);
            $form[0].submit();
            $form.destroy();
        }
</script>
</body>
 
</html>

注：2019-12-05 及之後的 JAR 支援使用 post 跳轉實現自訂登入，點選下載範例代碼：register.zip

2

設定登入網頁。

管理者登入數據決策系統，點選【管理系統】→【外觀配置】→【登入頁】，選擇登入方式為【設定登入網頁】，並輸入自訂登入網頁面的路徑：【login.html】，如下圖所示。

注：登入頁檔案如果在同一個工程下面網頁 URL 可以用相對路徑，如果在不同工程下跨域使用，請使用http://ip:port/工程名/形式。

3

效果預覽。

10.0.18 及之後版本的報表工程，支援先預覽自訂登入網頁效果。如下圖所示。

注1：請先【預覽】再【儲存】，防止登入頁配置錯誤，導緻無法登入。

注2：若在預覽頁登入時跳出 404 報錯介面，說明上文的 HTML 檔案中存在錯誤，請仔細檢查修改，直至無誤。

4

儲存配置。

預覽效果無誤後，使用者可點選右上角【儲存】按鈕，跳出當前帳號，重新登入數據決策系統時，自訂頁面效果如本文第一章預期效果中所示。

三、注意事項

1

範本認證支援自訂登入網頁。

2020-06-08 及之後的JAR，若配置了自訂登入介面，且開啓了帳號密碼認證或角色權限認證。
當使用者存取單張範本時，會跳轉到自訂登入介面，登入成功後，可查看範本。

2

自訂登入網頁單點登入。

若使用者有自己的系統，將 FineReport 整合到自己已有系統中後，該系統有自己的登入介面，希望登入系統的同時也登入報表（即將輸入帳號密碼也傳送到報表服務進行認證），進而存取報表時不需要再次登入，即單點登入。
實現單點登入的操作步驟如下：1）找到您系統登入頁面如 login.jsp；2）在 login.jsp 頁面 head 中引入 finereport.js；3）在 login.jsp 頁面 JavaScript 中獲取到輸入帳號密碼，並透過 iframe 方式或者 Ajax 方式進行認證，詳細代碼參見文檔：平台系統單點登入API；4）在 FineReport 平台系統中設定自訂登入網頁面位址為您系統的登入位址。

注：若您是 OA 系統或者報表系統和您的項目系統不在同一個伺服器上，第三步可參考文檔：AJAX跨域不同步單點登入

3

Session 傳值。

對於 Java 系統來說，可將帳號與密碼放在 Session 中，把我們報表整合在同一環境下面，報表可自動獲取到帳號和密碼的值進行驗證。

4

行動端存取平台報錯。

問題描述：行動端使用自訂登入網頁存取平台時，報錯：null is not an object(evaluating 'o.access Token')。
原因分析：行動端登入不支援重定向到 Web 網頁。
解決方案：加 filter 過濾行動端請求，才能正常登入。

已經是第一篇

已經是最後一篇

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

中文（简体） English 日本語

中文（繁體）

文檔回饋

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

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

不再提示

10s後關閉

自訂登入介面