1. 概述
1.1 版本
| FineBI服务器版本 | 功能变更 |
|---|---|
| 6.0 | - |
1.2 应用场景
FineBI 通过各种样式如表格、图表等来呈现数据，进行统计分析。这些数据表格或图表，用户在开发系统的时候也可以自己编程来实现，但是工作量大，维护难。
1.3 功能简介
FineBI 是基于 B/S 架构的浏览器/服务器模式，现在用户开发的系统基本上趋向于 B/S 架构的浏览器/服务器模式，因此有些页面完全可以直接采用 Web 页面嵌入式集成的简易方式完成集成。
通过集成，用户从自己的系统通过链接使用浏览器访问 FineBI 的服务器，从而在自己系统内调用 FineBI 的 Web 页面，来实现嵌入式集成。
2. 代码简介
FineBI 在进行嵌入式集成时一般分为两步：获取 Token 和调用其他相关 API 。
1）获取 Token：
API 在调用需要先获取 Token 信息。FineBI 通过 JSONP 获取跨域数据，可以通过以下方法来获取 Token 。代码如下所示：
// 获取token方法
function loginFR(callback) {
// 页面上的用户名密码输入框值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 登录api
jQuery.ajax({
url: url + "/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=-1", // 登录url
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(data) {
alert(JSON.stringify(data));
if (data.status === "success") {
alert("successful!");
} else if (data.status === "fail"){
alert("login fail!");
}
// 获取到token
callback && callback(data.accessToken);
},
error:function(){
alert("login error!");
}
});
}
2）调用其他相关 API：
获取到 Token 后可以调用其他 API ，比如获取模板列表，新建仪表板，代码如下所示：
// 获取模板列表方法
function GetList(token) {
var i=0;
jQuery.ajax({
url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token,
type: "GET",
timeout: 10000,
dataType: "jsonp",
success:function(res) {
for(;i < res.data.dashboards.length;i++) {login.html
document.write(JSON.stringify(res.data.dashboards[i].name)+"<br>");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
// 新建仪表板方法
function NewDemo(token) {
var name = prompt("name","");
var id = "";
var dir = {name: name, catalog: []}
var flag = 0;
jQuery.ajax({
url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token,
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(res) {
if(name != "") {
for (var key in res) {
if(key=="error") {
flag=1;
}
}
if(flag==0) {
window.location.href = url + "/v5/design/report/" + res.data.id + "/edit";
} else {
alert("error!");
}
} else {
alert("name is empty");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert(JSON.stringify(data));
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);//
}
});
}
注：此处的所有请求都需要带上请求类型：dataType: "jsonp"，否则请求无法处理。
注：FineBI 中 URL 传递 JSON 对像，有些服务器不支持 JSON 对象的 URL ，因此需要把 JSON 类型的 URL 参数值先进行编码encodeURIComponent()。例如：
3. 示例
3.1 使用前提
1）单点登录
除了登录的接口之外，FineBI所有的WEB API接口，都需要登录才能使用。
建议在使用集成之前，配置单点登录，否则嵌入式集成后，需要反复登录。详情请参见：单点登录。
2）模板认证
代码中模板地址一般为完整地址，建议用户可开启 模板认证，避免出现其他人得到模板完整 URL 查看模板数据的情况。
3）关闭 Security Headers
由于平台安全限制，在集成时，需要先关闭「Security Headers」限制才可跨域。
管理员登录FineBI系统，点击「管理系统>安全管理>安全防护」，关闭「Security Headers」设置，如下图所示：
3.2 准备HTML文件
新建 HTML 文件，命名为 login.html，放到%BI_HOME%\webapps\webroot下。
点击下载并解压获取文件：login.zip
代码内容如下所示：
注：文件中 URL 地址为 FineBI 初始默认地址：http://localhost:37799/webroot/decision，用户可根据需要修改为自身工程的地址及端口；代码中的用户名、密码需要根据实际情况修改。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"> </script>
<script type="text/javascript">
var url = "http://localhost:37799/webroot/decision";
function loginFR(callback) {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
jQuery.ajax({
url: url + "/login/cross/domain?fine_username=" + username + "&fine_password=" + password + "&validity=-1",
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(data) {
alert(JSON.stringify(data));
if (data.status === "success") {
alert("successful!");
} else if (data.status === "fail"){
alert("login fail!");
}
callback && callback(data.accessToken);
},
error:function(){
alert("login error!");
}
});
}
function GetList(token) {
var i=0;
jQuery.ajax({
url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token,
type: "GET",
timeout: 10000,
dataType: "jsonp",
success:function(res) {
for(;i < res.data.dashboards.length;i++) {
document.write(JSON.stringify(res.data.dashboards[i].name)+"<br>");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
function NewDemo(token) {
var name = prompt("name","");
var id = "";
var dir = {name: name, catalog: []}
var flag = 0;
jQuery.ajax({
url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token,
type: "GET",
dataType:"jsonp",
timeout:10000,
success:function(res) {
if(name != "") {
for (var key in res) {
if(key=="error") {
flag=1;
}
}
if(flag==0) {
window.location.href = url + "/v5/design/report/" + res.data.id + "/edit";
} else {
alert("error!");
}
} else {
alert("name is empty");
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
//alert(JSON.stringify(data));
alert(XMLHttpRequest+"/"+textStatus+"/"+errorThrown);
}
});
}
</script>
</head>
<body>
<form id="loginForm" name="loginForm" method="post" action="index.html">
<table>
<tbody>
<tr class="prop">
<td class="name"><label> Username</label></td>
<td class="value"><input id="username" type="text" name="username" value="admin" /></td>
</tr>
<tr class="prop">
<td class="name"><label> Password</label></td>
<td class="value"><input id="password" type="password" name="password" value="1" /></td>
</tr>
<tr>
<td><input id="btn1" type="button" name="b1" value="login" onclick="loginFR();" /></td>
</tr>
<tr>
<td><input id="btn2" type="button" name="b2" value="login & get list" onclick="loginFR(GetList);" /></td>
</tr>
<tr>
<td><a href="http://localhost:37799/webroot/decision/v5/design/report/4cfe6152a47a4b3794adec43048aa553/view"> <input id="btn3" type="button" name="b3" value="open" onclick="loginFR();" /> </a></td>
</tr>
<tr>
<td><input id="btn4" type="button" name="b4" value="new" onclick="loginFR(NewDemo);" /></td>
</tr>
</tbody>
</table>
<div class="actionButtons">
</div>
</form>
</body>
</html>3.3 效果展示
启动 FineBI 工程，访问http://localhost:37799/webroot/login.html，如下图所示：
注：第一个 login 按钮，代表登录工程；点击第一个 login 按钮，再点击第三个 open 按钮，则不会进入登录页提示登录的。
上一篇：Web页面集成
