Custom Login Page- FineDataLink Help Document

Last update: July 10, 2025

Overview

Expected Effect

When logging in to FineDataLink, if you do not want to use the default login page, you can modify it by customizing the login page, as shown in the following figure.

1.2.png

Implementation Method

In the customized login page, enter the username and password, which are sent to FineDataLink for login authentication. Upon successful authentication, you can log in to FineDataLink.

Setting Custom Login Page

Creating an HTML File

Create an HTML file to customize the FineDataLink login page and save it in FineDataLink installation directory\webapps\webroot.The complete code is as follows.

Note:

Modify the IP and port number of the URL in the HTML file (the code below) according to the actual situation.

You can download and decompress the HTML file: Login.zip.

<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>Custom LoginDemo</title>
 
    <!-- Customize style according to actual conditions -->
    <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>FineDataLink Login Page</h2>
        <div class="login-item">
            <label for="inputUsername" class="sr-only">Username</label>
            <input type="text" id="inputUsername" class="form-control" placeholder="Username" required="" autofocus="">
        </div>
        <div class="login-item">
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">Log</button>
    </form>
</div>
<!-- As it is embedded in the project, fineui can be used directly -->
<script src="http://localhost:8068/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("Please enter username");
            return false;
        }
        if (password === "") {
            window.alert("Please enter password");
            return false;
        }
        /**
         * Send a post request through the login interface, carrying information such as username and password
         */
        $.ajax({
            url: "http://localhost:8068/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) {
                // Save whether to maintain login status and token after successful login
                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);
 
                    // Then jump to the corresponding page
                    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 {
                    // Prompt error message
                    alert(res.errorMsg);
                }
            },
            error: function () {
                alert("Time out or other server errors");
            }
        });
    }
 
    // Query URL parameters
    function getUrlQuery (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r !== null) return r[2];
        return "";
    }
 
    // Jump through the 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>

Note:

You can also use the POST request method to achieve login page customization. You can download and decompress the HTML file: .

Custom Login Page

Log in to FineDataLink as the admin, choose System Management > Appearance Configuration > Login Page, select Custom Login Page as Login Method, and enter login.html in Webpage URL.

Note:

If the login page files are in the same project, you can enter a relative path as the Webpage URL. If the files are put in different projects, you need to conform to the format: http://IP address:port number/project name/.

2.2.png

Effect Display

Click Preview before Save to check if there are login page configuration errors that may cause login issues, as shown in the following figure.

Note:

If a 404 error page pops up when you preview the page, you need to check the HTML file carefully and correct the errors.

2.3.png

Saving Configuration

After confirming the preview effect is correct, click Save in the upper right corner, exit the current account, and log in to FineDataLink again. The custom login page is displayed as shown in the following figure.

2.4.gif

Notes

After the configuration of a custom login page, the setting items are not compatible with those under System Management > System Setting > Login.

For example, after enabling Forced Initial Password Change, you cannot access the password modification page when you log in to FineDataLink through the custom login page, resulting in login failure.

Helpful
Not helpful
Only read

中文（简体）

English

Custom Login Page

Overview

Expected Effect

Implementation Method

Setting Custom Login Page

Creating an HTML File

Custom Login Page

Effect Display

Saving Configuration

Notes

附件列表