1. 概述编辑
1.1 版本
报表服务器版本 | JAR | 新增功能 |
---|---|---|
10.0 | 2020-06-08 | 使用自定义登录界面,开启用户名密码认证或角色权限认证后,访问单张模板,跳转到自定义登录界面登录成功后,可查看模板 |
1.2 预期效果
用户登录数据决策系统时,不希望使用默认的登录界面,可通过自定义登录界面的方式修改默认登录界面,如下图所示:
1.3 解决思路
登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证。
2. 设置自定义登录界面编辑
2.1 新建 HTML 文件
注:根据实际情况修改 login.html 文件(即下方代码)中 URL 的 IP 和端口号。
自定义决策平台登录页面:login.html,并保存在%FR_HOME%\webapps\webroot目录下。
代码如下所示:
<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>
2.2 设置登录网页
以管理员身份进入数据决策系统 ,点击管理系统>外观配置,在登录页选项中选择设置登录网页,并输入自定义登录页面的路径:login.html,如下图所示:
注:登录页文件如果在同一个工程下面网页 URL 可以用相对路径,如果在不同工程下跨域使用,请使用http://ip:port/工程名/形式。
2.3 效果查看
退出当前账号,重新登录数据决策系统时,自定义页面效果如本文1.1节预期效果中所示。
3. 开启模板认证后访问模板编辑
2020-06-08及之后 的 JAR,使用自定义登录界面,开启 用户名密码认证 或 角色权限认证 ,访问单张模板,跳转到自定义登录界面登录成功后,可查看模板。
示例:
设置自定义登录界面并开启 用户名密码认证 ,在 FineReport 设计器中分页预览GettingStarted.cpt模板,URL 为:http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt,另一用户访问模板 URL ,效果如下图所示:
4. 注意事项编辑
4.1 自定义登录页单点登录
若用户有自己的系统,将 FineReport 集成到自己已有系统中后,该系统有自己的登录界面,希望登录系统的同时也登录报表(即将输入的用户名密码也发送到报表服务进行认证),从而访问报表时不需要再次登录,即单点登录。
实现单点登录的操作步骤如下:
1)找到您系统登录页面如 login.jsp。
2)在 login.jsp 页面 head 中引入 finereport.js。
3)在 login.jsp 页面 JavaScript 中获取到输入的用户名密码,并通过 iframe 方式或者 Ajax 方式进行认证,详细代码参见文档:平台系统单点登录接口
4)在 FineReport 平台系统中设置自定义登录页面地址为您系统的登录地址。
注:若您是 OA 系统或者报表系统和您的项目系统不在同一个服务器上,第三步可参考文档:Ajax 跨域异步单点登录
4.2 Session 传值
对于 Java 系统来说,可将用户名与密码放在 Session 中,把我们报表集成在同一环境下面,报表可自动获取到用户名和密码的值进行验证。
4.3 还原默认登录界面
如果在决策系统修改了登录界面后,希望还原成系统默认登录界面,详细的操作方法参见文档:还原登录页设置
4.4 移动端
移动端不支持重定向到 Web 网页,需要加 filter 过滤移动端请求。