使用者登入數據決策系統時,不希望使用預設登入介面,可透過自訂登入介面的方式修改預設登入介面,如下圖所示:
登入介面,獲取到帳號和密碼的值,傳送到 BI 系統,BI 服務帶着這兩個參數存取認證地址進行認證。
建立 HTML 檔案自訂 BI 工程的登入頁面,並儲存在%BI_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>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="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:37799/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:37799/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
管理者登入數據決策系統,點選「管理系統>外觀配置>登入頁」,選擇登入方式為「設定登入網頁」,並輸入自訂登入網頁面的路徑:「login.html」,如下圖所示:
注:登入頁檔案如果在同一個工程下面網頁 URL 可以用相對路徑,如果在不同工程下跨域使用,請使用http://ip:port/工程名/形式。
請先「預覽」再「儲存」,防止登入頁配置錯誤,導致無法登入。如下圖所示:
注:若在預覽頁登入時跳出 404 報錯介面,說明上文的 HTML 檔案中存在錯誤,請仔細檢查修改,直至無誤。
預覽效果無誤後,使用者可點選右上角「儲存」按鈕,跳出當前帳號,重新登入數據決策系統時,自訂頁面效果如本文 1.2 節預期效果中所示。
使用自訂登入介面,開啟 範本認證 ,存取單張儀表板,跳轉到自訂登入介面登入成功後,可查看儀表板。
範例:
設定自訂登入介面並開啟 帳號密碼認證 ,儀表板預覽連結為:http://localhost:37799/webroot/decision/v5/design/report/6c92aa9694204baa838cadf0e0a9d551/view,另一使用者存取儀表板 URL ,效果如下圖所示:
系統設定自訂登入網頁後,與「系統管理>登入」相關配置項不相容。
例如開啟「初始密碼強制修改」後,自訂登入網頁無法進入密碼修改介面,導致無法登入。
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙