历史版本8 :自定义登录页面 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 版本
| BI 服务器版本 | JAR | 功能变更 |
|---|---|---|
| 5.0 | - | - |
| 5.1 | 2020-08-04 | 使用自定义登录界面，开启 模板认证 后，访问单张仪表板，跳转到自定义登录界面登录成功后，可查看仪表板 |
| 5.1.15 | - | 2.3节，自定义登录页，支持先预览效果再保存 |
1.2 预期效果
用户登录数据决策系统时，不希望使用默认的登录界面，可通过自定义登录界面的方式修改默认登录界面，如下图所示：
1.3 解决思路
登录界面，获取到用户名和密码的值，发送到 BI 系统，BI 服务带着这两个参数访问认证地址进行认证。
2. 设置自定义登录界面编辑
2.1 新建 HTML 文件
新建 HTML 文件自定义 BI 工程的登录页面，并保存在%BI_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>FineBI商业智能</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:37799/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>
注：2020-01-15 及之后的 JAR 还可以使用 post 跳转实现自定义登录，点击下载代码：register.html
2.2 设置登录网页
管理员登录数据决策系统，点击「管理系统>外观配置>登录页」，选择登录方式为「设置登录网页」，并输入自定义登录页面的路径：「login.html」，如下图所示：
注：登录页文件如果在同一个工程下面网页 URL 可以用相对路径，如果在不同工程下跨域使用，请使用http://ip:port/工程名/形式。
2.3 效果预览
5.1.15 及之后版本的 BI 工程，支持先预览自定义登录页效果。如下图所示：
注1：请先「预览」再「保存」，防止登录页配置错误，导致无法登录。
注2：若在预览页登录时跳出 404 报错界面，说明上文的 HTML 文件中存在错误，请仔细检查修改，直至无误。
2.4 保存配置
预览效果无误后，用户可点击右上角「保存」按钮，退出当前账号，重新登录数据决策系统时，自定义页面效果如本文 1.2 节预期效果中所示。
