目录:
1. 概述编辑
1.1 版本
| 报表服务器版本 | JAR | 新增功能 |
|---|---|---|
| 10.0 | - | - |
| 10.0 | 2020-06-08 | 3.1节，「用户名密码认证」和「角色权限认证」支持自定义登录页 |
| 10.0.18 | - | 2.3节，自定义登录页，支持先预览效果再保存 |
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>
<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="text" id="inputPassword" οnfοcus="this.type='password'" class="form-control" placeholder="密码" required="">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">登录</button>
</form>
</div>
<script>
document.getElementById("submitBtn").addEventListener("click", function () {
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;
}
var xhr = new XMLHttpRequest();
// 登录API
xhr.open("post", "http://localhost:8075/webroot/decision/login");
xhr.setRequestHeader("Content-type","application/json");
// 登录参数
xhr.send(JSON.stringify({
username: username,
password: password,
validity: -1
}));
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var v = JSON.parse(xhr.responseText).data;
if (v) {
// 保存token并跳转到对应链接
addCookie("fine_auth_token", v.accessToken, "/", -1);
window.top.location.href = v.url;
} else {
window.alert(JSON.parse(xhr.responseText).errorMsg);
}
}
};
return false;
});
function addCookie (name, value, path, expiresHours) {
var cookieString = name + "=" + escape(value);
if (expiresHours && expiresHours > 0) {
var date = new Date();
date.setTime(BI.getTime() + expiresHours * 3600 * 1000);
cookieString = cookieString + "; expires=" + date.toGMTString();
}
if (path) {
cookieString = cookieString + "; path=" + path;
}
document.cookie = cookieString;
}
</script>
</body>
</html>
注：2019-12-05 及之后的 JAR 支持使用 post 跳转实现自定义登录，点击下载示例代码：register.html
2.2 设置登录网页
管理员登录数据决策系统，点击「管理系统>外观配置>登录页」，选择登录方式为「设置登录网页」，并输入自定义登录页面的路径：「login.html」，如下图所示：
注：登录页文件如果在同一个工程下面网页 URL 可以用相对路径，如果在不同工程下跨域使用，请使用http://ip:port/工程名/形式。
2.3 效果预览
10.0.18 及之后版本的报表工程，支持先预览自定义登录页效果。如下图所示：
注1：请先「预览」再「保存」，防止登录页配置错误，导致无法登录。
注2：若在预览页登录时跳出 404 报错界面，说明上文的 HTML 文件中存在错误，请仔细检查修改，直至无误。
2.4 保存配置
预览效果无误后，用户可点击右上角「保存」按钮，退出当前账号，重新登录数据决策系统时，自定义页面效果如本文 1.2 节预期效果中所示。
3. 注意事项编辑
3.1 模板认证支持自定义登录页
2020-06-08 及之后的JAR，若配置了自定义登录界面，且开启了 用户名密码认证 或 角色权限认证 。
当用户访问单张模板时，会跳转到自定义登录界面，登录成功后，可查看模板。
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 过滤移动端请求，才能正常登录。