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:8080/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:8080/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>
注：2019-12-05 及之後的 JAR 還可以使用 post 跳轉實現自定義登錄，點擊下載代碼：register.html
2.2 設置登錄網頁
以管理員身份進入數據決策系統 ，點擊「管理系統>外觀配置」，在「登錄頁」選項中選擇「設置登錄網頁」，并輸入自定義登錄頁面的路徑：「login.html」，如下圖所示：
注：登錄頁文件如果在同一個工程下面網頁 URL 可以用相對路徑，如果在不同工程下跨域使用，請使用http://ip:port/工程名/形式。
2.3 效果查看
退出當前賬号，重新登錄數據決策系統時，自定義頁面效果如本文 1.1 節預期效果中所示。
注：若登錄時跳出 404 報錯界面，說明上文的 HTML 文件中存在錯誤，請仔細檢查。
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 移動端訪問平台報錯
問題描述：
移動端使用自定義登錄頁訪問平台時，報錯：null is not an object(evaluating 'o.access Token')，如下圖所示：
原因分析：
移動端登錄不支持重定向到 Web 網頁。
解決方案：
加 filter 過濾移動端請求，才能正常登錄。
