历史版本32 :使用HTML自定义登录页面 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 问题描述

登录决策平台时,不希望使用默认的登录界面,可以通过自定义登录界面的方式修改如下图所示的默认登录界面:222

1.2 解决思路

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

2. 示例编辑

3.1 自定义登录界面

自定义决策平台登录页面: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>
    <script src="http://code.jquery.com/jquery-2.1.4.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>
        <div class="radio-inline">
            <input type="checkbox" id="keep" value="-2"> 保持登录状态 
        </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().toUpperCase().replace("ADMIN","admin");
        var password = document.getElementById("inputPassword").value.trim();
        var validity = 0;
        var objcheck = document.getElementById("keep");
        if (username === "") {
            window.alert("请输入用户名");
            return false;
        }
        if (password === "") {
            window.alert("请输入密码");
            return false;
        }
        if (objcheck.checked){
            validity = -2;
        }else{validity = -1;}
        doSubmit(username,password,validity);
        return false;
    });
    function doSubmit(username,password,validity) {
        var url = "http://localhost:8075/webroot/decision/login/cross/domain" + "?fine_username=" + username + "&fine_password=" + password + "&validity=" + validity;
        jQuery.ajax({
            url: url,//单点登录的管理平台报表服务器
            timeout: 5000,//超时时间(单位:毫秒)
            dataType:"jsonp",//跨域采用jsonp方式
            jsonp:"callback",
            success: function (res) {
                console.log(res);
                if (res.errorCode) {
                    window.alert(res.errorMsg);
                }else {
                    // 保存token并跳转到对应链接
                    window.location.href = "http://localhost:8075/webroot/decision";
                }
            },
            error: function () {
                alert("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)
            }
        });
    }
</script>
</body>
</html>

3.2 调用登录界面

登录决策平台,选择管理系统>外观配置,在登录页选项中选择设置登录网页,并输入自定义登录页面的路径:login.html,如下图所示:

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

Snag_43c45ae4.png

退出重新登录时,自定义页面如下图所示:

Snag_43c5b4b8.png

3. 注意事项编辑

3.1 自定义登录页单点登录

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

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

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

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

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

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

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

3.2 Session 传值

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

3.3 还原默认登录界面

如果在决策系统修改了登录界面后,希望还原成系统默认登录界面,详细的操作方法参见文档:还原登录页设置