fanreport自定义登陆界面

约定不等于承诺〃 2023-10-11 12:24 57阅读 0赞

## 1. 问题描述 ##

在登录平台时，不希望使用 FR 默认的内置登录界面，想通过自定义登录界面实现登录操作，内置登录界面如下图：![format_png][]

## 2. 解决思路 ##

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

## 3. 示例 ##

### 3.1 自定义登录界面 ###

1）登录界面设置

自定义 HTML 登录页面：命名为 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>
    <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>
    <script>
        document.getElementById("submitBtn").addEventListener("click", function () {
            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;
            }
            var xhr = new XMLHttpRequest();
            // 登录API
            xhr.open("post", "http://localhost:8075/webroot/decision/login");
            xhr.setRequestHeader("Content-type","application/json");
            // 登录参数
            xhr.send(JSON.stringify({
                username: username,
                password: password,
                validity: -1
            }));
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var v = JSON.parse(xhr.responseText).data;
                    if (v) {
                        // 保存token并跳转到对应链接
                        addCookie("fine_auth_token", v.accessToken, "/", -1);
                        window.top.location.href = v.url;
                    } else {
                        window.alert(JSON.parse(xhr.responseText).errorMsg);
                    }
                }
            };
            return false;
        });
        function addCookie (name, value, path, expiresHours) {
            var cookieString = name + "=" + escape(value);
            if (expiresHours && expiresHours > 0) {
                var date = new Date();
                date.setTime(BI.getTime() + expiresHours * 3600 * 1000);
                cookieString = cookieString + "; expires=" + date.toGMTString();
            }
            if (path) {
                cookieString = cookieString + "; path=" + path;
            }
            document.cookie = cookieString;
        }
    </script>
    </body>
    </html>

### 3.2 调用登录界面 ###

登录数据决策平台 http://localhost:8075/webroot/decision，选择管理系统>外观配置，在登陆页选项中选择「设置登录网页」，并输入自定义登录页面的路径：login.html，如下图所示：

![format_png 1][]

退出重新登录时，页面显示如下：

![format_png 2][]

## 4. 总结 ##

比如说若用户有自己的系统，将 FR 集成到自己已有系统中，该系统有自己的登录界面，希望登录自己系统的同时也登录报表（即将输入的用户名密码也发送到报表服务进行认证），从而访问报表时不需要再次登录即单点登录。步骤如下：

1）找到您系统登录页面如 login.jsp；

2）在 login.jsp 页面 head 中引入 finereport.js；

3）在 login.jsp 页面 JavaScript 中获取到输入的用户名密码，并通过 iframe 方式或者 Ajax 方式进行认证，详细代码请查看 [平台系统单点登录接口][Link 1]。

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

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

## 5. Session 传值 ##

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

## 6. 还原默认登录界面 ##

如果在决策系统修改了登录界面后，希望还原成系统默认登录界面，应该如何实现呢？

决策系统可以使用的是外接数据库，可以找到一张 fine\_conf\_entity 表；然后删除字段 AppearanceConfig.loginUrl，并将字段 AppearanceConfig.loginType的值改为 0，然后重启工程就好了。详细请参见 [还原登录页设置][Link 2]。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA5LzE1MzY3NDMxOTZONEhKSGc1Vy5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzQ5MDk5NzJTanQ3SEs5eC5wbmc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODExLzE1NDM0ODQwNjJ0cGNtd2JNYS5wbmc?x-oss-process=image/format,png
[Link 1]: http://help.finereport.com/doc-view-884.html
[Ajax]: http://help.finereport.com/doc-view-881.html
[Link 2]: http://help.finereport.com/doc-view-2713.html