1. 概述
1.1 版本
| FineDataLink 版本 | 功能變更 |
|---|---|
| 4.0 | - |
1.2 預期效果
使用者登入 FineDataLink 時，若不希望使用預設登入介面，可透過自訂登入介面的方式修改預設登入介面，如下圖所示：
1.3 解決思路
在自訂登入介面中，獲取使用者輸入帳號和密碼，併傳送到 FineDataLink 中進行登入認證，認證成功後即可登入 FineDataLink 。
2. 設定自訂登入介面
2.1 建立 HTML 檔案
建立一個 HTML 檔案，自訂 FineDataLink 的登入頁面，並儲存在%FineDataLink_HOME%\webapps\webroot目錄下。完整程式碼如下所示：
注：根據實際情況修改 html 檔案（即下方程式碼）中 URL 的 IP 和埠號。
點選下載並解壓獲取 HTML 檔案：login.zip
<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>FineDataLink資料平台</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:8068/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;
}
/**
* 透過登入API傳送post請求，攜帶帳號密碼等資訊
*/
$.ajax({
url: "http://localhost:8068/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>
注：使用者還可以使用 post 跳轉實現自訂登入，點選下載並解壓獲取HTML檔案：register.zip
2.2 設定登入網頁
管理者登入 FineDataLink ，點選「管理系統>外觀配置>登入頁」，選擇登入方式為「設定登入網頁」，並輸入自訂登入網頁面的路徑：「login.html」，如下圖所示：
注：登入頁檔案如果在同一個工程下面網頁 URL 可以用相對路徑，如果在不同工程下跨域使用，請使用http://ip:port/工程名/形式。
2.3 效果預覽
請先「預覽」再「儲存」，防止登入頁配置錯誤，導致無法登入。如下圖所示：
注：若在預覽頁登入時跳出 404 報錯介面，說明上文的 HTML 檔案中存在錯誤，請仔細檢查修改，直至無誤。
2.4 儲存配置
預覽效果無誤後，使用者可點選右上角「儲存」按鈕，跳出當前帳號，重新登入 FineDataLink 時，自訂登入網頁面效果如下圖所示：
3. 注意事項
FineDataLink 設定自訂登入網頁後，與「系統管理>登入」相關配置項不相容。
例如：開啟「初始密碼強制修改」後，自訂登入網頁無法進入密碼修改介面，導致無法登入。