Custom Login Pgae- FineBI Document

Last update： 2023-10-16

Overview

Version

FineBI Version	Functional Change
6.0	/

Demonstration

When logging into decision-making platform, you may want to modify the default login page and customize a new interface.

Solution

Username and password obtained on the login page will be sent to the FineBI system, and then the server accesses the authentication URL to verify the two values.

Setting Custom Login Interface

Creating an HTML File

Create an HTML file for custom login page and save it under the%BI_HOME%\webapps\webroot path. The file content 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.

Click to download and unzip 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 LoginDDEMO</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>FineBI 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 directly used -->
<script src="http://localhost:37799/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:37799/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 post to achieve custom login. Click to download and unzip the HTML file:

Setting the Login Page

Log into decision-making platform as admin, go to Login Page under System Management > Appearance Configuration, set Login Method to Custom Login Page, and enterlogin.html in Webpage URL.

Note: If the login page file is in the same project, you can enter a relative path as the Webpage URL. If the file is put in different projects, you need to conform to the format: http://ip:port/project_name/

Demonstration

Click Save before Preview to prevent login page configuration errors, which may cause login issues.

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.

Saving Configuration

After previewing the page, you can click Save in the upper right corner, log out of the current account, and log into the decision-making platform again.

Accessing a Dashboard After Enabling Template Authentication

Enable Template Authentication, go to custom login page, paste the preview link of the dashboard, and you can view the dashboard after successful login.

Example:

Setting a custom login page and enable Authentication user password only in Template Authentication. The dashboard preview link is: http://localhost:37799/webroot/decision/v5/design/report/6c92aa9694204baa838cadf0e0a9d551/view.

834动图.gif

Notes

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

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

Helpful
Not helpful
Only read

中文（简体）中文（繁體）日本語

English

feedback

鼠标选中内容，快速反馈问题

鼠标选中存在疑惑的内容，即可快速反馈问题，我们将会跟进处理。

不再提示

10s后关闭

Custom Login Pgae

Overview

Version

Demonstration

Solution

Setting Custom Login Interface

Creating an HTML File

Setting the Login Page

Demonstration

Saving Configuration

Accessing a Dashboard After Enabling Template Authentication

Notes

附件列表