I. Overview
1) Version
| Report Server Version | JAR | New features |
|---|---|---|
| 10.0 | - | - |
| 10.0 | 2020-06-08 | Section III, User name and Password Authentication and Role permission Authentication support custom login pages |
| 10.0.18 | - | Section III, custom login page, support preview effect before saving |
2) Expected effect
When logging in to the data decision system, users do not want to use the default login interface. They can modify the default login interface by customizing the login interface, as shown in the following figure:
3) Solution
After logging in to the report system, the user name and password are obtained and sent to the report system. The report service uses these two parameters to access the authentication address for authentication.
Note: Please refer to the document: [App] Login page to realize App custom login page
II. Set a custom login page
1) Creating an HTML file
Create a new HTML file to customize the decision platform login page and save it in the %FR_HOME%\webapps\webroot directory. The content of the document 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 HTML document:
<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>
<!-- Custom styles can be used based on actual requirements -->
<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>Data decision system</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">login</button>
</form>
</div>
<!-- Because it is embedded in the project, can be used directly use 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("Please input username");
return false;
}
if (password === "") {
window.alert("Please input password");
return false;
}
/**
* Post requests are sent through the login interface, carrying information such as the user name and password
*/
$.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) {
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("Timeout or other server error");
}
});
}
function getUrlQuery (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r !== null) return r[2];
return "";
}
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: 2019-12-05 and later jars support custom login using post jump. Click here to download sample code:
2) Setting the Login Page
The administrator logs in to the data decision system, click "Manage>System>Appearance>Login page", select "Set the login page" as the login mode, and enter "login. html" as the path of the customized login page, as shown below:
Note: If the login page file is under the same project, the URL can be used relative path. If it is used across different projects, please use http://ip:port/ project name/form.
4) Saving the Configuration
After the preview effect is correct, users can click the "Save" button in the upper right corner to log out of the current account and re-log in to the data decision system. The effect of the customized page is as shown in Section I expected Effect.
III. Precautions
1. Template authentication support customize the login page
JAR 2020-06-08 or later, if the custom login interface is configured, and Authenticate only Username and Password or Role-based authentication is enabled.
When you access a template, the customized login page is displayed. After a successful login, you can view the template.
2. Customizing login page single sign-on
If a user has his or her own system, after FineReport is integrated into the existing system, the system has its own login interface. If the user wants to log in to the system and log in to the report (that is, the user name and password entered are sent to the report service for authentication), the user does not need to log in to the report again, that is, single sign-on (SSO).
To implement single sign-on (SSO), do as follows:
1) Find your system login page such as login.jsp.
2) Introduce finereport.js in the login.jsp page head.
3) Obtain the input user name and password in JavaScript of login.jsp page, and authenticate through IFrame or Ajax. For the detailed code, refer to the document: Platform system Single Sign-on Interface
4) Set the customized login page address in FineReport platform system as your system login address.
Note: If you are an OA system or a reporting system and your project system are not on the same server, the third step can be referred to the documentation: Ajax Asynchronous Cross-domain SSO
3. The session by value
For The Java system, the user name and password can be put in the Session to integrate our report in the same environment, and the report can automatically obtain the value of the user name and password for verification.
4. An error occurs when the mobile terminal accesses the platform
Problem Description:
Error: Null is not an object(evaluating 'o.mccess Token') When a mobile device uses a custom login page to access the platform
Cause analysis:
Mobile login does not support redirection to Web pages.
Solution:
You can log in to the mobile terminal only after filter is added to filter the requests.
Previous：Fresh Style Plugin
