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;
}
/**
* 通过登录接口发送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 方式进行认证，详细代码参见文档：平台系统单点登录接口
4）在 FineReport 平台系统中设置自定义登录页面地址为您系统的登录地址。
注：若您是 OA 系统或者报表系统和您的项目系统不在同一个服务器上，第三步可参考文档：Ajax 跨域异步单点登录
3.3 Session 传值
对于 Java 系统来说，可将用户名与密码放在 Session 中，把我们报表集成在同一环境下面，报表可自动获取到用户名和密码的值进行验证。
3.4 移动端访问平台报错
问题描述：
移动端使用自定义登录页访问平台时，报错：null is not an object(evaluating 'o.access Token')，如下图所示：
原因分析：
移动端登录不支持重定向到 Web 网页。
解决方案：
加 filter 过滤移动端请求，才能正常登录。
3.5 不兼容相关登录设置项
系统设置自定义登录页后，与「系统管理>登录」相关配置项不兼容。
例如开启「初始密码强制修改」后，自定义登录页无法进入密码修改界面，导致无法登录。
