/
Встраивание дашборда на сторонний сайт с помощью <iframe>

Встраивание дашборда на сторонний сайт с помощью <iframe>

Вы можете добавить созданный дашборд на какой-либо внешний ресурс (например, на страницу стороннего сайта) с помощью HTML-тега <iframe>, при этом можно встроить дашборд, который требует авторизацию, или который не требует ее. Для этой цели нужно выполнить следующие шаги:

  1. Администратору платформы необходимо выполнить настройки в Keycloak (если просмотр дашборда требует авторизации).

  2. Скопировать ссылку на дашборд и встроить ее на требуемую страницу сайта.

Выполнение администратором настроек в Keycloak

  1. Откройте Keycloak по адресу:
    <domain>/v3/keycloak/admin/Visiology/console/
    где <domain> – домен или IP-адрес сервера платформы.

  2. В боковой панели нажмите Настройки Realm:

    realm-settings.png

     

  3. В открывшемся окне перейдите на вкладку Защита безопасности и в поле Content-Security-Policy введите следующую строку:
    frame-src 'self'; frame-ancestors 'self' <адрес сайта>; object-src 'none';
    где <адрес сайта> – адрес портала или сайта, куда вы хотите встроить дашборд (указывается только адрес домена. Адрес целевой страницы указывать не нужно). Например, https://site.ru

    settings.png

  4. Нажмите Сохранить в нижней части окна.

  • Обратите внимание, что протокол передачи данных платформы, на которой размещён дашборд, должен быть таким же, как и у целевого сайта или портала, куда вы хотите интегрировать этот дашборд. Иначе говоря, дашборд с протоколом HTTP можно внедрить только на сайт с протоколом HTTP, а дашборд с протоколом HTTPS – только на сайт с протоколом HTTPS.

  • Чтобы успешно встроить дашборд на сайт, убедитесь, что в файле /var/lib/visiology/scripts/config.env  установлено следующее значение:

    SAMEORIGIN=false.

Встраивание дашборда на сайт

  1. Выполните шаги, описанные в разделе Публикация дашбордов, чтобы скопировать ссылку на дашборд.

  2. Откройте в режиме редактирования страницу сайта, на котором вы хотите разметить дашборд, и добавьте в нужное место следующую строку:
    <iframe src="XXX" style="position: absolute; height: 100%; width: 100%; border: none;"></iframe>
    где ХХХ – скопированная на шаге 1 ссылка на дашборд.

Если для редактирования страниц сайта применяются визуальные средства (например, страницы в Confluence), то ссылку на дашборд можно добавить с их помощью.

В нашем примере мы добавили дашборд на страницу Confluence:

embedded.png
Дашборд, встроенный на странице Confluence

Смотрите также

На этой странице

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой, или нажмите кнопку помощи в приложении, чтобы задать вопрос.