反馈已提交

网络繁忙

使用HTML自定义登录页面

  • 文档创建者:文档助手1
  • 历史版本:52
  • 最近更新:Catqiu 于 2024-01-23
  • 1. 概述

    1.1 版本

    报表服务器版本
    11.0

    1.2 预期效果

    用户登录数据决策系统时,不希望使用默认的登录界面,可通过自定义登录界面的方式修改默认登录界面,如下图所示:

    1.3 解决思路

    登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证。

    注:实现 App 自定义登录页请参考文档:[APP]登录页

    2. 设置自定义登录界面

    2.1 新建 HTML 文件

    新建 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

    2.2 设置登录网页

    管理员登录数据决策系统,点击「管理系统>外观配置>登录页」,选择登录方式为「设置登录网页」,并输入自定义登录页面的路径:「login.html」,如下图所示:

    注:登录页文件如果在同一个工程下面网页 URL 可以用相对路径,如果在不同工程下跨域使用,请使用http://ip:port/工程名/形式。

    2.3 效果预览

    支持先预览自定义登录页效果。如下图所示:

    注1:请先「预览」再「保存」,防止登录页配置错误,导致无法登录。

    注2:若在预览页登录时跳出 404 报错界面,说明上文的 HTML 文件中存在错误,请仔细检查修改,直至无误。

    2024-01-23_10-51-51.png

    2.4 保存配置

    预览效果无误后,用户可点击右上角「保存」按钮,退出当前账号,重新登录数据决策系统时,自定义页面效果如本文 1.2 节预期效果中所示。

    3. 注意事项

    3.1 模板认证支持自定义登录页

    若配置了自定义登录界面,且开启了 用户名密码认证 或 角色权限认证

    当用户访问单张模板时,会跳转到自定义登录界面,登录成功后,可查看模板。

    4.gif

    3.2 自定义登录页单点登录

    若用户有自己的系统,将 FineReport 集成到自己已有系统中后,该系统有自己的登录界面,希望登录系统的同时也登录报表(即将输入的用户名密码也发送到报表服务进行认证),从而访问报表时不需要再次登录,即单点登录。

    实现单点登录的操作步骤如下:

    1)找到您系统登录页面如 login.jsp。

    2)在 login.jsp 页面 head 中引入 finereport.js。

    3)在 login.jsp 页面 JavaScript 中获取到输入的用户名密码,并通过 iframe 方式或者 Ajax 方式进行认证,详细代码参见文档:平台系统单点登录接口

    4)在 FineReport 平台系统中设置自定义登录页面地址为您系统的登录地址。

    注:若您是 OA 系统或者报表系统和您的项目系统不在同一个服务器上,第三步可参考文档:Ajax 跨域异步单点登录

    3.3 Session 传值

    对于 Java 系统来说,可将用户名与密码放在 Session 中,把我们报表集成在同一环境下面,报表可自动获取到用户名和密码的值进行验证。

    3.4 移动端访问平台报错

    问题描述:

    移动端使用自定义登录页访问平台时,报错:null is not an object(evaluating 'o.access Token'),如下图所示:

    1.jpg

    原因分析:

    移动端登录不支持重定向到 Web 网页。

    解决方案:

    加 filter 过滤移动端请求,才能正常登录。

    3.5 不兼容相关登录设置项

    系统设置自定义登录页后,与「系统管理>登录」相关配置项不兼容。

    例如开启「初始密码强制修改」后,自定义登录页无法进入密码修改界面,导致无法登录。

    附件列表


    主题: 数据决策系统
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持