1. 问题描述
在登录平台时，不希望使用FR默认的内置登录界面，想通过自定义登录界面实现登录操作，内置登录界面如下图：
2. 解决思路
登录界面，获取到用户名和密码的值，发送到报表系统，报表服务带着这两个参数访问认证地址进行认证。
3. 示例
3.1 自定义登录界面
1）登录界面设置
自定义html登录页面：命名为login.html，并保存在%FR_HOME%\webapps\webroot下，代码如下 ：
<span style="color:#334356"><span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code><html lang=<span style="color:#dd1144">"zh-CN"</span>><span style="color:navy"><<span style="color:navy">head</span>></span>
<span style="color:navy"><<span style="color:navy">meta</span> <span style="color:teal">charset</span>=<span style="color:#dd1144">"utf-8"</span>></span>
<span style="color:navy"><<span style="color:navy">meta</span> <span style="color:teal">http-equiv</span>=<span style="color:#dd1144">"X-UA-Compatible"</span> <span style="color:teal">content</span>=<span style="color:#dd1144">"IE=edge"</span>></span>
<span style="color:navy"><<span style="color:navy">meta</span> <span style="color:teal">name</span>=<span style="color:#dd1144">"viewport"</span> <span style="color:teal">content</span>=<span style="color:#dd1144">"width=device-width, initial-scale=1"</span>></span>
<span style="color:navy"><<span style="color:navy">title</span>></span>登录Demo<span style="color:navy"></<span style="color:navy">title</span>></span>
<span style="color:navy"><<span style="color:navy">link</span> <span style="color:teal">href</span>=<span style="color:#dd1144">"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span style="color:teal">rel</span>=<span style="color:#dd1144">"stylesheet"</span>></span>
<span style="color:navy"><<span style="color:navy">script</span> <span style="color:teal">src</span>=<span style="color:#dd1144">"https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"</span>></span><span style="color:navy"></<span style="color:navy">script</span>></span>
<span style="color:navy"><<span style="color:navy">script</span> <span style="color:teal">src</span>=<span style="color:#dd1144">"https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"</span>></span><span style="color:navy"></<span style="color:navy">script</span>></span>
<span style="color:navy"><<span style="color:navy">style</span>></span>
.container {
<span style="color:teal">display</span>: flex;
<span style="color:teal">justify-content</span>: center;
}
.login-box {
<span style="color:teal">width</span>: <span style="color:teal">300px</span>;
<span style="color:teal">margin-top</span>: <span style="color:teal">100px</span>;
}
.login-box <span style="color:navy">h2</span> {
<span style="color:teal">font-size</span>: <span style="color:teal">26px</span>;
<span style="color:teal">text-align</span>: center;
<span style="color:teal">margin-bottom</span>: <span style="color:teal">25px</span>;
}
.login-item {
<span style="color:teal">margin-bottom</span>: <span style="color:teal">20px</span>;
}
<span style="color:navy"></<span style="color:navy">style</span>></span>
<span style="color:navy"><<span style="color:navy">body</span>></span>
<span style="color:navy"><<span style="color:navy">div</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"container"</span>></span>
<span style="color:navy"><<span style="color:navy">form</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"login-box"</span> <span style="color:teal">action</span>=<span style="color:#dd1144">""</span> <span style="color:teal">method</span>=<span style="color:#dd1144">"post"</span> <span style="color:teal">onsubmit</span>=<span style="color:#dd1144">"return false;"</span>></span>
<span style="color:navy"><<span style="color:navy">h2</span>></span>数据决策系统<span style="color:navy"></<span style="color:navy">h2</span>></span>
<span style="color:navy"><<span style="color:navy">div</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"login-item"</span>></span>
<span style="color:navy"><<span style="color:navy">label</span> <span style="color:teal">for</span>=<span style="color:#dd1144">"inputUsername"</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"sr-only"</span>></span>用户名<span style="color:navy"></<span style="color:navy">label</span>></span>
<span style="color:navy"><<span style="color:navy">input</span> <span style="color:teal">type</span>=<span style="color:#dd1144">"text"</span> <span style="color:teal">id</span>=<span style="color:#dd1144">"inputUsername"</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"form-control"</span> <span style="color:teal">placeholder</span>=<span style="color:#dd1144">"用户名"</span> <span style="color:teal">required</span>=<span style="color:#dd1144">""</span> <span style="color:teal">autofocus</span>=<span style="color:#dd1144">""</span>></span>
<span style="color:navy"></<span style="color:navy">div</span>></span>
<span style="color:navy"><<span style="color:navy">div</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"login-item"</span>></span>
<span style="color:navy"><<span style="color:navy">label</span> <span style="color:teal">for</span>=<span style="color:#dd1144">"inputPassword"</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"sr-only"</span>></span>密码<span style="color:navy"></<span style="color:navy">label</span>></span>
<span style="color:navy"><<span style="color:navy">input</span> <span style="color:teal">type</span>=<span style="color:#dd1144">"password"</span> <span style="color:teal">id</span>=<span style="color:#dd1144">"inputPassword"</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"form-control"</span> <span style="color:teal">placeholder</span>=<span style="color:#dd1144">"密码"</span> <span style="color:teal">required</span>=<span style="color:#dd1144">""</span>></span>
<span style="color:navy"></<span style="color:navy">div</span>></span>
<span style="color:navy"><<span style="color:navy">button</span> <span style="color:teal">class</span>=<span style="color:#dd1144">"btn btn-lg btn-primary btn-block"</span> <span style="color:teal">type</span>=<span style="color:#dd1144">"submit"</span> <span style="color:teal">id</span>=<span style="color:#dd1144">"submitBtn"</span>></span>登录<span style="color:navy"></<span style="color:navy">button</span>></span>
<span style="color:navy"></<span style="color:navy">form</span>></span>
<span style="color:navy"></<span style="color:navy">div</span>></span>
<span style="color:navy"><<span style="color:navy">script</span>></span>
<span style="color:#0086b3">document</span>.getElementById(<span style="color:#dd1144">"submitBtn"</span>).addEventListener(<span style="color:#dd1144">"click"</span>, <span style="color:teal">function</span> () {
<span style="color:teal">var</span> username = <span style="color:#0086b3">document</span>.getElementById(<span style="color:#dd1144">"inputUsername"</span>).value.trim();
<span style="color:teal">var</span> password = <span style="color:#0086b3">document</span>.getElementById(<span style="color:#dd1144">"inputPassword"</span>).value.trim();
<span style="color:teal">if</span> (username === <span style="color:#dd1144">""</span>) {
<span style="color:#0086b3">window</span>.alert(<span style="color:#dd1144">"请输入用户名"</span>);
<span style="color:teal">return</span> false;
}
<span style="color:teal">if</span> (password === <span style="color:#dd1144">""</span>) {
<span style="color:#0086b3">window</span>.alert(<span style="color:#dd1144">"请输入密码"</span>);
<span style="color:teal">return</span> false;
}
<span style="color:teal">var</span> xhr = <span style="color:teal">new</span> XMLHttpRequest();
<span style="color:#999988"><em>// 登录API</em></span>
xhr.open(<span style="color:#dd1144">"post"</span>, <span style="color:#dd1144">"http://localhost:8075/webroot/decision/login"</span>);
xhr.setRequestHeader(<span style="color:#dd1144">"Content-type"</span>,<span style="color:#dd1144">"application/json"</span>);
<span style="color:#999988"><em>// 登录参数</em></span>
xhr.send(<span style="color:#0086b3">JSON</span>.stringify({
username: username,
password: password,
validity: -<span style="color:teal">1</span>
}));
xhr.onreadystatechange = <span style="color:teal">function</span> () {
<span style="color:teal">if</span> (xhr.readyState == <span style="color:teal">4</span> && xhr.status == <span style="color:teal">200</span>) {
<span style="color:teal">var</span> v = <span style="color:#0086b3">JSON</span>.parse(xhr.responseText).data;
<span style="color:teal">if</span> (v) {
<span style="color:#999988"><em>// 保存token并跳转到对应链接</em></span>
addCookie(<span style="color:#dd1144">"fine_auth_token"</span>, v.accessToken, <span style="color:#dd1144">"/"</span>, -<span style="color:teal">1</span>);
<span style="color:#0086b3">window</span>.top.location.href = v.url;
} <span style="color:teal">else</span> {
<span style="color:#0086b3">window</span>.alert(<span style="color:#0086b3">JSON</span>.parse(xhr.responseText).errorMsg);
}
}
};
<span style="color:teal">return</span> false;
});
<span style="color:teal">function</span> <span style="color:#990000"><strong>addCookie</strong></span> (name, value, path, expiresHours) {
<span style="color:teal">var</span> cookieString = name + <span style="color:#dd1144">"="</span> + <span style="color:#0086b3">escape</span>(value);
<span style="color:teal">if</span> (expiresHours && expiresHours > <span style="color:teal">0</span>) {
<span style="color:teal">var</span> date = <span style="color:teal">new</span> <span style="color:#0086b3">Date</span>();
date.setTime(BI.getTime() + expiresHours * <span style="color:teal">3600</span> * <span style="color:teal">1000</span>);
cookieString = cookieString + <span style="color:#dd1144">"; expires="</span> + date.toGMTString();
}
<span style="color:teal">if</span> (path) {
cookieString = cookieString + <span style="color:#dd1144">"; path="</span> + path;
}
<span style="color:#0086b3">document</span>.cookie = cookieString;
}
<span style="color:navy"></<span style="color:navy">script</span>></span>
<span style="color:navy"></<span style="color:navy">body</span>></span><span style="color:navy"></<span style="color:navy">html</span>></span></code></span></span></span>3.2 调用登录界面
登录系统http://localhost:8075/webroot/decision，选择管理系统>外观配置，在登陆页选项中选择设置登录网页，并输入自定义登录页面的路径：login.html，如下图所示：
退出重新登录时，页面显示如下：
4. 总结
比如说若用户有自己的系统，将FR集成到自己已有系统中，该系统有自己的登录界面，希望登录自己系统的同时也登录报表（即将输入的用户名密码也发送到报表服务进行认证），从而访问报表时不需要再次登录即单点登录。步骤如下：
1）找到您系统登录页面如login.jsp；
2）在login.jsp页面head中引入finereport.js；
3）在login.jsp页面javascript中获取到输入的用户名密码，并通过iframe方式或者ajax方式进行认证，详细代码请查看平台系统单点登录接口。
4）在FineReport平台系统中设置自定义登录页面地址为您系统的登录地址。
注：若您是OA系统或者报表系统和您的项目系统不在同一个服务器上，第三步可参考ajax跨域异步单点登录
5. Session传值对于java系统来说，可将用户名与密码放在session中，把我们报表集成在同一环境下面，报表可自动获取到用户名和密码的值进行验证。
6. 还原默认登录界面
如果在决策系统修改了登录界面后，希望还原成系统默认登录界面，应该如何实现呢？
决策系统可以使用的是外接数据库，可以找到一张fine_conf_entity表；然后删除字段AppearanceConfig.loginUrl，并将字段AppearanceConfig.loginType的值改为0，然后重启工程就好了。（也可以直接连接hsql数据集，使用填报的方式进行修改）