Руководство по интеграции Online Designer

Продукты: МоиОтчеты Облако, МоиОтчеты Корпоративный Сервер, МоиОтчеты Публикатор

Это руководство предоставляет подробные инструкции по интеграции Online Designer в ваши веб-приложения с использованием iframe.

Базовая настройка iframe

Online Designer можно встроить в ваше веб-приложение с помощью iframe. Это позволяет открывать и редактировать шаблоны отчетов прямо внутри существующего пользовательского интерфейса.

<iframe 
  src="https://yourdomain.ru/designer/?uuid=your-template-id&apikey=your-api-key&lang=ru"
  width="100%"
  height="800px"
  frameborder="0"
  style="border: 1px solid #ccc;">
</iframe>

🔗 Структура URL

URL-адрес источника iframe следует такому шаблону:

https://yourdomain.ru/designer/?uuid={template-id}&apikey={api-key}

Пример: https://xn--80ab2acne.xn--e1aflibyb2b0b.xn--p1ai/designer/?uuid={template-id}&apikey={api-key}

Где:

{template-id}: идентификатор шаблона отчета
{api-key}: API-ключ для авторизации в сервисе

Если шаблон открывается по ключу доступа, используйте формат:

https://yourdomain.ru/designer/?uuid={template-id}:{access-key}

Параметры аутентификации

Аутентификация по API-ключу

<!-- Для аутентификации по API-ключу -->
<iframe src="https://yourdomain.ru/designer/?uuid=template-123&apikey=your-api-key-here"></iframe>

Параметр: apikey

Обязательный: Да (для аутентификации по API-ключу)
Описание: Ваш API-ключ МоиОтчеты Облако, МоиОтчеты Корпоративный Сервер или МоиОтчеты Публикатор
Пример: apikey=dw3ized7i7i97qjsrg4mesn3n8r1bpi54wbyhywpfier7er3nqjo
Особенность: после загрузки страницы скрипт cloud-inject.js автоматически добавляет заголовок Authorization: Basic ... ко всем same-origin запросам fetch и XMLHttpRequest, которые выполняет Online Designer

Аутентификация по ключу доступа

<!-- Для аутентификации по ключу доступа -->
<iframe src="https://yourdomain.ru/designer/?uuid=template-123:your-access-key"></iframe>

Параметр: uuid

Обязательный: Да
Формат: uuid=ИдентификаторШаблона:КлючДоступа
Описание: Открывает шаблон по временному ключу доступа без передачи API-ключа
Пример: uuid=66f1d8a5b7c4a1250d9f1234:temp-key-abc123def456

Параметры шаблона

Для открытия существующего шаблона используйте параметр uuid:

<iframe src="https://yourdomain.ru/designer/?uuid=template-123&apikey=your-key"></iframe>

Параметр: uuid

Формат: uuid=ИдентификаторШаблона
Описание: Определяет шаблон, который будет открыт в Online Designer
Примеры:
- По API-ключу: uuid=66f1d8a5b7c4a1250d9f1234
- По ключу доступа: uuid=66f1d8a5b7c4a1250d9f1234:temp-key-abc123def456

Для редактирования существующего шаблона параметр uuid должен указывать на шаблон отчета, доступный текущему пользователю или ключу доступа.

Локализация пользовательского интерфейса

Сервис автоматически определяет язык из:

Конфигурации сервера (если доступно)
Настроек языка браузера

Локализация отчета

Локализация текста, ресурсов и значений внутри шаблона определяется самим шаблоном отчета и параметрами рабочей области.

Примеры адаптивных iframe

Адаптивный на всю ширину

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="https://yourdomain.ru/designer/?uuid=template-123&apikey=your-key"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

Интеграция в модальное окно/диалог

<div class="modal" id="designerModal">
  <div class="modal-content" style="width: 95%; height: 95%;">
    <iframe 
      id="designerFrame"
      src="https://yourdomain.ru/designer/?uuid=template-123&apikey=your-key"
      style="width: 100%; height: 100%; border: none;">
    </iframe>
  </div>
</div>

<script>
function openDesigner(uuid, apiKey, accessKey = null) {
  const fullUuid = accessKey ? `${uuid}:${accessKey}` : uuid;
  const baseUrl = 'https://yourdomain.ru/designer/index.html';
  const params = new URLSearchParams({ uuid: fullUuid });

  if (apiKey) {
    params.set('apikey', apiKey);
  }

  document.getElementById('designerFrame').src = baseUrl + '?' + params.toString();
  document.getElementById('designerModal').style.display = 'block';
}

// Использование
openDesigner('template-123', 'your-api-key');
</script>

Соображения безопасности

Защита API-ключа: API-ключ в query string виден на стороне клиента, поэтому в продакшене используйте только ключи с минимально необходимыми правами
Ключи доступа: Для временного доступа к конкретному шаблону по возможности используйте ключи доступа
HTTPS: Всегда используйте HTTPS для источников iframe в продакшене
Заголовки CSP: Настройте политику безопасности контента для разрешения frame-src и connect-src к домену Online Designer

<iframe src="..."></iframe>

Справочник параметров

Параметр	Тип	Обязательный	Описание	Пример
`uuid`	Строка	Да	Идентификатор шаблона или идентификатор шаблона с ключом доступа	`uuid=66f1d8a5b7c4a1250d9f1234`
`apikey`	Строка	Да*	API-ключ МоиОтчеты Облако, МоиОтчеты Корпоративный Сервер или МоиОтчеты Публикатор	`apikey=your-api-key`
`accessKey`	Строка	Да*	Временный ключ доступа, передаваемый в составе `uuid`	`uuid=66f1d8a5b7c4a1250d9f1234:temp-key-abc123def456`

* Требуется либо apikey, либо ключ доступа в составе uuid.

Table of Contents