Встроенная страница
Для React-интерфейса можно использовать UI Kit, а для серверных API-запросов SDK Axios или SDK Fetch. Подключение библиотек не заменяет проверку параметров запуска, описанную ниже.
Встроенная страница открывает ваше приложение в окне внутри StreamVi. Интерфейс страницы разрабатываете вы; кабинет предоставляет установку приложения и запуск окна. Ниже показано учебное приложение с вымышленными адресами.
Создать приложение
Откройте Для разработчиков → Создать плагин, задайте название, выберите тип Встроенная страница, отметьте нужные разрешения и сохраните. Поля этой формы показаны в создании плагина.
Указать адрес страницы
Откройте приложение → Настройки. В поле Url iFrame укажите адрес своей страницы. Например, https://example.com/streamvi - это только пример; замените его своим адресом. Нажмите Сохранить и дождитесь подтверждения.
Для отдельного адреса разработки включите Режим разработки, заполните Url iFrame develop и сохраните. Проверьте выбранный режим перед запуском. Подробности адресов и ключей - в настройках приложения.
Выдать доступ проекту
Откройте Доступ, оставьте статус Приватный, нажмите Пригласить и укажите ID учебного проекта. Проверьте найденный проект перед подтверждением. Этот шаг открывает приложение для проекта; затем его нужно установить. Форма приватного доступа.
Заполните Информация и Дизайн, чтобы в карточке были понятное название, изображения и ссылки на помощь. Для проверки в своём проекте отправка в публичный каталог не требуется.
Установить и открыть
Переключитесь на разрешённый проект, откройте Плагины → Каталог → Приватные и выберите карточку приложения. Нажмите Установить, проверьте проект и разрешения, затем подтвердите доступ. Окно установки.
После установки нажмите Запустить в карточке. Откроется окно приложения. На снимке показана карточка уже установленного учебного приложения; внутри окна будет ваша страница.
Параметры запуска
При запуске кабинет добавляет к Url iFrame параметры:
| Параметр | Значение |
|---|---|
project_id | Внутренний числовой ID проекта, представленный строкой |
project_external_id | Внешний ID проекта |
token | API-токен установки, если для этого приложения в проекте найдены установка и токен |
sign | Подпись параметров запуска |
Используйте базовый адрес страницы без собственной query-строки и #. У встроенной страницы нет template_id. На сервере страницы проверьте sign по общему примеру проверки подписи, передав тип embedded. Порядок значений: project_id, project_external_id, затем token, если он присутствует, и секрет приложения.
После проверки сохраните токен в серверной сессии. Ваш сервер может вызывать разрешённые методы /method/ с заголовком Authorization: Bearer ... и версией метода, например v=1. Для запроса состояния трансляции нужно разрешение project:read. Этот запуск уже передаёт токен установки; дополнительная OAuth-авторизация для его использования не нужна.
Если token отсутствует, не выполняйте запросы к данным проекта и покажите сообщение о недоступном подключении. Одна подпись не заменяет API-токен. Храните секрет и токен на сервере, не помещайте их в публичные примеры или логи адресов запуска.
Проверить страницу
Проверьте загрузку, прокрутку, формы и закрытие окна на компьютере и телефоне. При пустом окне сначала откройте адрес приложения отдельно, затем проверьте сохранённый URL, режим разработки и разрешение вашего сервера на встраивание в StreamVi.
Если страница работает отдельно, но блокируется внутри кабинета, проверьте заголовки Content-Security-Policy: frame-ancestors и X-Frame-Options на сервере приложения. Для самостоятельного подключения внешнего сайта используйте OAuth.
Обмен данными шаблонов через streamvi:cabinet:init относится к типу «Виджет». Для встроенной страницы кабинет этот обмен не запускает.