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

1. 概述

1.1 版本

報表伺服器版本
11.0

1.2 預期效果

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

1.3 解決思路

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

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

2. 設定自訂登入介面

2.1 建立 HTML 檔案

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

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

點選下載HTML 檔案：login.html

<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>數據決策系統</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>

注：FineReport也支援使用 post 跳轉實現自訂登入，點選下載範常式式碼：register.html

2.2 設定登入網頁

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

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

2.3 效果預覽

支援先預覽自訂登入網頁效果。如下圖所示：

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

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

2.4 儲存配置

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

3. 注意事項

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

若配置了自訂登入介面，且開啟了帳號密碼認證或角色權限認證。

當使用者存取單張範本時，會跳轉到自訂登入介面，登入成功後，可查看範本。

3.2 自訂登入網頁單點登入

若使用者有自己的系統，將 FineReport 整合到自己已有系統中後，該系統有自己的登入介面，希望登入系統的同時也登入報表（即將輸入帳號密碼也傳送到報表服務進行認證），進而存取報表時不需要再次登入，即單點登入。

實現單點登入的操作步驟如下：

1）找到您系統登入頁面如 login.jsp。

2）在 login.jsp 頁面 head 中引入 finereport.js。

3）在 login.jsp 頁面 JavaScript 中獲取到輸入帳號密碼，並透過 iframe 方式或者 Ajax 方式進行認證，詳細程式碼參見文檔：前台單點登入API

4）在 FineReport 平台系統中設定自訂登入網頁面地址為您系統的登入地址。

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

3.3 Session 傳值

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

3.4 行動端存取平台報錯

問題描述：

行動端使用自訂登入網頁存取平台時，報錯：null is not an object(evaluating 'o.access Token')，如下圖所示：

原因分析：

行動端登入不支援重定向到 Web 網頁。

解決方案：

加 filter 過濾行動端請求，才能正常登入。

3.5 不相容相關登入設定項

系統設定自訂登入網頁後，與「系統管理>登入」相關配置項不相容。

例如開啟「初始密碼強制修改」後，自訂登入網頁無法進入密碼修改介面，導致無法登入。

上一篇：自訂登入介面插件

下一篇：還原登入頁設定

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

中文（简体） English 日本語

中文（繁體）

使用HTML自訂登入網頁面