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: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>
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:
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.
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.
