1. 概述
1.1 问题描述
用户在 HTML5 端预览 FineBI 工程时，默认需要输入用户名密码，如何实现单点登录呢？
1.2 实现思路
本文提供两种方法，调用登录接口实现 HTML5 端单点登录：
1）Ajax 跨域单点登录
2）iframe 跨域单点登录
注：实现 HTML5 端单点登录，需要先安装 HTML5 移动端展现插件，详情请参见：HTML5 端访问仪表板/工程
2. AJAX 跨域单点登录
2.1 新建 login.html
在 FineBI 工程%BI_HOME%/webapps/webroot/目录下，新建login.html文件，具体代码如下：
注1：代码中的 URL、用户名、密码需要根据实际使用情况进行修改。IP 不可写 localhost。
注2：HTML5 移动端展现插件版本为 V10.2.0 之前，移动端登录需要带__device__=iPhone&terminal=H5参数
URL 写法为：http://IP:端口号/webroot/decision/login/cross/domain?__device__=iPhone&terminal=H5
若未注册移动决策平台功能点，单点登录时将报错11100016，删除__device__=iPhone&terminal=H5参数即可
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function doSubmit() {
/*-------------------AJAX方式-------------------*/
jQuery.ajax({
//h5插件版本为10.2.0之前,移动端登录需要带__device__=iPhone&terminal=H5参数
//url: 'http://IP:端口号/webroot/decision/login/cross/domain?__device__=iPhone&terminal=H5',
//h5插件版本为10.2.0之后,移动端登录无需带__device__=iPhone&terminal=H5参数
//若未注册移动决策平台功能点,单点登录时报错11100016,删除__device__=iPhone&terminal=H5参数即可
url: 'http://IP:端口号/webroot/decision/login/cross/domain',
data: {'fine_username': '用户名', 'fine_password': '密码', 'validity': -1},
timeout: 5000,
dataType: 'jsonp',
jsonp:"callback",
success: function (res) {
// alert('登录成功');
var token = res.accessToken;
window.location.href = "http://IP:端口号/webroot/decision/url/mobile?fine_auth_token=" + token;
},
error: function () {
alert('登录失败');
}
});
}
doSubmit();
</script>
</head>
</html>
2.2 HTML5 端预览
HTML5 端输入：http://IP:端口号/webroot/login.html
1）单点登录成功时，返回工程目录/首页，如下图所示：
2）单点登录失败时，返回提示「登录失败」，如下图所示：
3. iframe 跨域单点登录
3.1 新建 login.html
在 FineBI 工程%BI_HOME%/webapps/webroot/目录下，新建login.html文件，具体代码如下：
注1：代码中的 URL、用户名、密码需要根据实际使用情况进行修改。IP 不可写 localhost。
注2：HTML5 移动端展现插件版本为 V10.2.0 之前，移动端登录需要带__device__=iPhone&terminal=H5参数
URL 写法为：http://IP:端口号/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=admin&fine_password=123456&validity=-1&callback=callback
若未注册移动决策平台功能点，单点登录时将报错11100016，删除__device__=iPhone&terminal=H5参数即可
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; " charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function doSubmit() {
var scr = document.createElement("iframe");
//将BI工程验证用户名密码的地址指向此iframe
//h5插件版本为10.2.0之前,移动端登录需要带__device__=iPhone&terminal=H5参数
//scr.src = "http://IP:端口号/webroot/decision/login/cross/domain?__deviceType__=iPhone&terminal=H5&fine_username=用户名&fine_password=密码&validity=-1&callback=callback";
//h5插件版本为10.2.0之后,移动端登录无需带__device__=iPhone&terminal=H5参数
//若未注册移动决策平台功能点,单点登录时报错11100016,删除__device__=iPhone&terminal=H5参数即可
scr.src = "http://IP:端口号/webroot/decision/login/cross/domain?fine_username=用户名&fine_password=密码&validity=-1&callback=callback";
scr.id = "login";
var token = "";
if (scr.attachEvent)
{ //判断是否为ie浏览器
// alert("ie");
scr.attachEvent("onload", function(){ //如果为ie浏览器则页面加载完成后立即执行
//原则上下面token不需要传，现在临时获取登录返回的token拼接到跳转url的后面
token = document.getElementById("login").contentWindow.document.body.innerHTML;
token = token.substring(token.indexOf("accessToken")+14, token.indexOf("url")-3);
window.location="http://IP:端口号/webroot/decision/url/mobile?fine_auth_token=" + token; //直接跳转到数据决策系统
});
} else {
// alert("not ie");
scr.onload = function(){ //其他浏览器则重新加载onload事件,进行onload以获得单点服务器的通过
//原则上下面token不需要传，现在临时获取登录返回的token拼接到跳转url的后面
token = document.getElementById("login").contentWindow.document.body.innerHTML;
token = token.substring(token.indexOf("accessToken")+14, token.indexOf("url")-3);
window.location="http://IP:端口号/webroot/decision/url/mobile?fine_auth_token=" + token; //直接跳转到数据决策系统
};
}
document.getElementsByTagName("head")[0].appendChild(scr); //将iframe标签嵌入到head中
}
doSubmit();
</script>
</head>
</html>
3.2 HTML5 端预览
HTML5 端输入：http://IP:端口号/webroot/login.html，单点登录成功时，返回工程目录/首页，如下图所示：
注：如果使用跨域 iframe 的方式嵌入报表，请关闭「Security Headers」高级设置中的「点击劫持攻击防护功能」，详情请参见：安全防护。
上一篇：[APP]关于
