反饋已提交
網絡繁忙
用户登录数据决策系统时,不希望使用默认的登录界面,可通过自定义登录界面的方式修改默认登录界面,如下图所示:
登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证。
注:实现 App 自定义登录页请参考文档:[APP]登录页
新建 HTML 文件自定义决策平台登录页面,并保存在%FR_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></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>
注:FineReport也支持使用 post 跳转实现自定义登录,点击下载示例代码:register.html
管理员登录数据决策系统,点击「管理系统>外观配置>登录页」,选择登录方式为「设置登录网页」,并输入自定义登录页面的路径:「login.html」,如下图所示:
注:登录页文件如果在同一个工程下面网页 URL 可以用相对路径,如果在不同工程下跨域使用,请使用http://ip:port/工程名/形式。
支持先预览自定义登录页效果。如下图所示:
注1:请先「预览」再「保存」,防止登录页配置错误,导致无法登录。
注2:若在预览页登录时跳出 404 报错界面,说明上文的 HTML 文件中存在错误,请仔细检查修改,直至无误。
预览效果无误后,用户可点击右上角「保存」按钮,退出当前账号,重新登录数据决策系统时,自定义页面效果如本文 1.2 节预期效果中所示。
若配置了自定义登录界面,且开启了 用户名密码认证 或 角色权限认证 。
当用户访问单张模板时,会跳转到自定义登录界面,登录成功后,可查看模板。
若用户有自己的系统,将 FineReport 集成到自己已有系统中后,该系统有自己的登录界面,希望登录系统的同时也登录报表(即将输入的用户名密码也发送到报表服务进行认证),从而访问报表时不需要再次登录,即单点登录。
实现单点登录的操作步骤如下:
1)找到您系统登录页面如 login.jsp。
2)在 login.jsp 页面 head 中引入 finereport.js。
3)在 login.jsp 页面 JavaScript 中获取到输入的用户名密码,并通过 iframe 方式或者 Ajax 方式进行认证,详细代码参见文档:平台系统单点登录接口
4)在 FineReport 平台系统中设置自定义登录页面地址为您系统的登录地址。
注:若您是 OA 系统或者报表系统和您的项目系统不在同一个服务器上,第三步可参考文档:Ajax 跨域异步单点登录
对于 Java 系统来说,可将用户名与密码放在 Session 中,把我们报表集成在同一环境下面,报表可自动获取到用户名和密码的值进行验证。
问题描述:
移动端使用自定义登录页访问平台时,报错:null is not an object(evaluating 'o.access Token'),如下图所示:
原因分析:
移动端登录不支持重定向到 Web 网页。
解决方案:
加 filter 过滤移动端请求,才能正常登录。
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙