Пример простой интеграции с веб-страницей - FineReport Справочная документация|Разработка отчетов|Использование отчетов|Учебные пособия

Пример простой интеграции веб-страницы

1. Обзор

1.1 Версия

Версия сервера FineBI	Функциональные изменения
6.0	-

1.2 Сценарии применения

FineBI представляет данные в различных стилях, таких как таблицы и диаграммы для статистического анализа. Эти таблицы или графики могут быть запрограммированы пользователем при разработке системы, но при этом возникает большой объем работы и сложности с обслуживанием.

1.3 Функциональный профиль

FineBI основан на браузерно-серверной модели архитектуры B/S. В настоящее время системы, разработанные пользователями, в основном базируются на браузерно-серверной модели архитектуры B/S, поэтому некоторые страницы могут быть напрямую интегрированы простым способом со встроенной интеграцией Web-страниц.

Благодаря интеграции пользователи могут получить встроенную интеграцию, обращаясь к серверам FineBI из своих систем по ссылке, используя браузер для вызова веб-страниц FineBI из своих систем.

2. Знакомство с кодом

Встроенная интеграция FineBI обычно состоит из двух этапов: получение токена и вызов других связанных API.

1) Получите токен:

API необходимо сначала получить информацию о токене, FineBI использует JSONP для получения междоменных данных, вы можете использовать следующий метод для получения токена. Код показан ниже:

   
  
  
 // метод получения токена function loginFR(callback) { // значение поля ввода имени пользователя-пароля на странице  
 var username = document.getElementById("username").value; var password =  
  
 document.getElementById("password").value; // login api jQuery.ajax  
 ({ url: url + "/login/cross/domain?fine_username=" +& nbsp;имя пользователя + "&fine_password=" + password + "&validity=-1", //&  
  
 nbsp;тип url логина: "GET", &  
  
 nbsp;dataType: "jsonp", timeout:10000,  
 success:function(data) { alert(JSON.  
 stringify(data)); if (data.status === "  
 success") { alert("  
 успешно!"); } else if (data.status&  
 nbsp;=== "fail"){   
  
 alert("login fail!"); } &  
 nbsp; // Получение токена &  
  
 nbsp; callback && callback(data.accessToken); }  
 error:function(){ alert  
  
  
 ("ошибка входа!"); } }); }

2) Вызовите другие связанные API:

Получив токен, вы можете вызывать другие API, например, получить список шаблонов и создать новую приборную панель, как показано в приведенном ниже коде:

  
  
  
  
 // Метод получения списка шаблонов function GetList(token) { var i=0; jQuery.ajax({ &nbsp ; url: url + "/v5/api/dashboard/user/info?op=api&cmd=get_all_  
 reports_data&fine_auth_token=" + token, type: "GET&  
  
 quot;, таймаут: 10000, dataType  
  
: "jsonp", success:function(res) { &nbsp  
; for(;i < res.data.dashboards.length;i++) {login.md &nbsp ; document.write(JSON.stringify(res.data.dashboards[i  
  
 ].name)+"<br>"); } &  
  
 nbsp; }, error:function(XMLHttpRequest,textStatus,errorThrown){ & nbsp; alert(XMLHttpRequest+"/"+textStatus+"/"  
  
  
  
  
+errorThrown); } }); } // Функция New Dashboard Method  
  
 NewDemo(token) { var name = prompt("name",""); &  
 nbsp;var id = ""; var dir = {name: name, catalog: []  
  
  
 } var flag = 0; jQuery.ajax({ & nbsp;url: url + "/v5/api/platform/dashboard/reports?dir=" + window.encodeURI(JSON.stringify(dir  
 )) + "&fine_auth_token=" + token, type: &  
  
 quot;GET", dataType: "jsonp", &  
  
 nbsp; timeout:10000, success:function(res) { &nbsp ; if(name !  
 = "") { for&  
 nbsp;(var key in res) { &  
 nbsp; if(key=="error") { &  
 nbsp; flag=1; &  
 nbsp; } &  
 nbsp; } &  
 nbsp; if(flag==0) { &nbsp ; window.location.href = url + "/v5/design/report/" + res.data.id&  
 nbsp;+ "/edit"; }&  
 nbsp;else {   
  
 alert("ошибка!"); } &  
 nbsp; } else { &nbsp  
; alert("имя пустое"); &nbsp; }  
  
 nbsp; } }, &  
 nbsp; error:function(XMLHttpRequest,textStatus,errorThrown){ &nbsp  
; //alert(JSON.stringify(data)); alert(XMLHttpRequest  
  
 +"/"+textStatus+"/"+errorThrown);// } })  
; }

Примечание: Все запросы здесь должны сопровождаться типом запроса:dataType: "jsonp", иначе запрос не будет обработан.

Примечание: В FineBI в URL передается JSON-образ, некоторые серверы не поддерживают JSON URL, поэтому для параметра URL типа JSON необходимо закодировать encodeURIComponent(). Например:

3. Примеры

3.1 Необходимые условия для использования

1) Единая регистрация

Все интерфейсы WEB API FineBI, за исключением интерфейса входа в систему, требуют входа в систему.

Перед использованием интеграции рекомендуется настроить единую регистрацию, иначе после встраивания интеграции вам придется неоднократно входить в систему. Дополнительные сведения см. в разделе: Единая регистрация.

2) Аутентификация шаблонов

Адрес шаблона в коде обычно является полным адресом, и рекомендуется, чтобы пользователи могли включить аутентификацию шаблона, чтобы избежать ситуации, когда другие люди получают полный URL шаблона для просмотра данных шаблона.

3) Закрыть заголовки безопасности

Из-за ограничений безопасности платформы вам необходимо отключить ограничение "Заголовки безопасности", прежде чем вы сможете осуществлять кросс-доменную интеграцию.

Администратор входит в систему FineBI, нажимает "System Management > Управление безопасностью > Защита безопасности" и отключает настройку "Заголовки безопасности", как показано на следующем рисунке:

3.2 Подготовка HTML-файла

Создайте новый HTML-файл с именем login.md и поместите его в %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&quot   
  
;> </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", &nbsp  
  
; type: "GET", dataType: "jsonp", &  
  
 nbsp; timeout:10000, success:function(data) { &  
 nbsp; alert(JSON.stringify(data)); &  
 nbsp;if (data.status === "success") { alert("  
  
 успешно!"); } else if (data.status === "fail"){ &nbsp  
; alert("login fail!"); &  
  
 nbsp; } callback && callback(data.accessToken); &  
 nbsp; }, error:function(  
  
 ){ alert("ошибка входа!"); &  
  
 nbsp; } }); }   
  
  
 function GetList(token) { var i=0; &  
 nbsp; jQuery.ajax({ url: url + "/v5/api/  
 dashboard/user/info?op=api&cmd=get_all_reports_data&fine_auth_token=" + token, &nbsp  
  
; type: "GET", timeout: 10000, &nbsp  
 nbsp; dataType: "jsonp", &  
 nbsp;success:function(res) { for(;i < res.data.dashboards.  
 length;i++) { document.write(JSON.stringify(res.  
  
 data.dashboards[i].name)+"<br>"); } &  
 nbsp; }, error:function(  
 XMLHttpRequest,textStatus,errorThrown){ alert(  
  
 XMLHttpRequest+"/"+textStatus+"/"+errorThrown); } &  
   
 nbsp; }); } &  
 nbsp; function NewDemo(token) { var name = prompt("name",& & &  
  
 quot;"); var id = "";  
  
 var dir = {name: name, catalog: []} var flag = 0; &  
 nbsp;jQuery.ajax({ url: url + "/v5/api/platform/dashboard/reports?dir  
 =" + window.encodeURI(JSON.stringify(dir)) + "&fine_auth_token=" + token, &  
  
 nbsp; type: "GET", dataType: "jsonp", &nbsp  
; таймаут:10000,  
 success:function(res) { if(name !  
  
 = "") { for (var key in res) { &  
 nbsp; if(key=="error") { &  
 nbsp; flag=1; &  
 nbsp; } &  
  
 nbsp; } if(flag==0) { & nbsp; window.location.href = url + "/v5/design  
 /report/" + res.data.id + "/edit"; }  
  
 else { alert("error!"); &  
 nbsp; } &  
 nbsp; } else { &nbsp  
  
;alert("имя пустое"); } & nbsp; }, &nbsp; }  
 nbsp; }, error:function(  
 XMLHttpRequest,textStatus,errorThrown){ //alert(JSON.  
 stringify(data)); alert(XMLHttpRequest+"/"+  
  
 textStatus+"/"+errorThrown); } &  
  
   
  
 nbsp; }); } </script> </head> <body&   
 gt; <form id="loginForm" name="loginForm" method="post" action="index.md">&&   
   
   
   
 nbsp; <table> <tbody> <tr class="prop"> &   
 nbsp; <td class="name"><label>Имя пользователя</label></td> <td class=&quot value"><input id="username" type="text" name="username" value="admin" /></td&   
   
   
 gt; </tr> <tr class="prop"> <td class=   
 "name"><label>Пароль</label></td> <td class="value"><   
 input id="password" type="password" name="password" value="1" /></td> &nbsp   
  
;</tr> <tr> <td><input id="btn1" type="button&quot  
   
; name="b1" value="login" onclick="loginFR();" /></td> </tr> <tr> &nbsp  
 <tr> <td><input id="btn2" type="button" name="b2" value=&&  
   
 quot;login &amp; get list" onclick="loginFR(GetList);" /></td> </tr> &  
 nbsp; <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> & nbsp; <td><input id="btn4" type="button" name="b4" value="new" onclick=&  
   
   
 quot;loginFR(NewDemo);" /></td> </tr> </tbody> </   
   
   
 table> <div class="actionButtons"> </div> </form>   
  
</body> </html>

3.3 Демонстрация эффектов

Запустите проект FineBI и зайдите на сайт http://localhost:37799/webroot/login.md, как показано ниже:

Примечание: Первая кнопка входа в систему представляет собой проект входа в систему; нажатие на первую кнопку входа в систему, а затем на третью открытую кнопку не приведет вас на страницу входа в систему, где вам будет предложено войти в систему.