历史版本20 :使用HTML自定义登录页面 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 问题描述编辑
在登陆平台时，不希望使用FR默认的内置登录界面，想通过自定义登录界面实现登录操作，内置登录界面如下图：
2. 解决思路编辑
登陆界面，获取到用户名和密码的值，发送到报表系统，报表服务带着这两个参数访问认证地址进行认证。
3. 示例编辑
3.1 自定义登陆界面
（1）登陆界面设置自定义html登陆页面：命名为login.html，并保存在%FR_HOME%\webapps\webroot下，代码如下 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/lib/bootstrap.min.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<div class="login-content">
<div class="transition"></div>
<div class="default-login">
<div class="login-close"></div>
<div class="login-title">帆软通行证登录</div>
<input class="user-info" type="text" placeholder="用户名/邮箱/手机号" autofocus="autofocus"/>
<input id="password" class="password" type="password" placeholder="密码"/>
<label class="error-msg"></label>
<input class="login-btn" type='button' value="登录"/>
<ul>
<li>还没有账号？| <a id="register" class="register">立即注册</a></li>
<li><a id="forget" class="forget">忘记密码？</a></li>
</ul>
</div>
<!--暂时先隐藏-->
<!--<div class="qq-login">-->
<!--<div class="quick-login">快捷登录:</div>-->
<!--<input class="qq-login-btn" type='button' value="用QQ账号登录"/>-->
<!--</div>-->
</div>
</body>
<script type="text/javascript" src="js/lib/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript">
$(document).ready(function () {
assemb.build();
});
</script>
</html>
注：dosubmit()是主要的逻辑判断，实现的是将对应的值传给报表服务的逻辑实现过程.
3.2 调用登陆界面
登录系统http://localhost:8075/webroot/decision，选择管理系统>外观配置，在选项中选择，并输入自定义登录页面的路径：login.html，如下图所示：
4. 总结编辑
比如说若用户有自己的系统，将FR集成到自己已有系统中，该系统有自己的登陆界面，希望登录自己系统的同时也登录报表（即将输入的用户名密码也发送到报表服务进行认证），从而访问报表时不需要再次登录即单点登录。步骤如下：
1）找到您系统登录页面如login.jsp；
2）在login.jsp页面head中引入finereport.js；
3）在login.jsp页面javascript中定义function如dosubmit，在dosubmit中获取到输入的用户名密码，并通过iframe方式或者ajax方式进行认证，详细代码请查看平台系统单点登录接口。
4）在FineReport平台系统中设置自定义登录页面地址为您系统的登录地址。
注：若您是OA系统或者报表系统和您的项目系统不在同一个服务器上，第三步可参考ajax跨域异步单点登录
5. Session传值编辑
对于java系统来说，可将用户名与密码放在session中，把我们报表集成在同一环境下面，报表可自动获取到用户名和密码的值进行验证。
6. 还原默认登录界面编辑
如果在决策系统修改了登陆界面后，希望还原成系统默认登录界面，应该如何实现呢？
决策系统使用的是外接数据库，可以找到一张fine_conf_entity表；然后删除这个字段AppearanceConfig.loginUrl。