Встраивание объектов
Вы можете встроить опубликованные дашборды и чарты на сайт или в приложение с помощью элемента iframe
.
Функциональность и внешний вид встраиваемых объектов можно определить с помощью передаваемых параметров:
-
_autoupdate
— задает время автообновления для дашбордов и чартов в секундах. По умолчанию они не обновляются автоматически. Работает только на активной вкладке браузера. Если для неактивной вкладки время автообновления уже наступило, оно выполнится, когда вкладка снова станет активной. Минимальная величина:- для дашбордов — 30 секунд;
- для чартов — 15 секунд.
-
_embedded
— скрывает панель навигации. Значение для включения параметра —1
. -
_no_controls
— у чартов скрывает меню . Значение для включения параметра —1
. -
_theme
— задает оформление объекта. Возможные значения:light
— для отображения в светлой теме;dark
— для отображения в темной теме.
-
_no_scroll
— выключает вертикальную прокрутку у дашборда. Значение для включения параметра —1
. -
_lang
— у чартов определяет значение языка для меню, которое открывается при нажатии на значок . Возможные значения:ru
илиen
.
Параметр добавляется к адресу объекта после знака вопроса ?
. Для передачи нескольких параметров перечислите их через знак амперсанда &
, например так:
<iframe frameborder="0" src="https://datalens.yandex/bdzix********?_embedded=1&_no_controls=1&_lang=ru&_theme=dark"></iframe>
Встраивание непубличных чартов
Примечание
Функциональность доступна только в рамках тарифного плана Business.
Вы можете безопасно встроить непубличные чарты на сайт или в приложение с помощью специальных ссылок с JWT-токеном
Встраивание непубличных чартов работает только в новой объектной модели DataLens на уровне воркбуков и доступно только администратору воркбука.
Как встроить непубличный чарт
-
Создайте ключ для встраивания:
Примечание
Один ключ можно использовать для встраивания нескольких объектов.
-
Перейдите на главную страницу
DataLens. -
На панели слева выберите
Коллекции и воркбуки. -
Откройте воркбук, в котором расположен чарт для встраивания.
-
В верхней части интерфейса нажмите значок
и выберите Ключи для встраивания. -
В открывшемся окне:
-
Нажмите кнопку
Создать ключ. -
Введите название ключа и нажмите кнопку Создать.
-
Внизу нажмите кнопку Скачать файл с ключом или скопируйте значение ключа.
Важно
После закрытия окна все данные из него будут потеряны.
Новый ключ для встраивания появится в списке.
-
-
-
Настройте встраивание для непубличного чарта:
Примечание
Для каждого чарта можно настроить несколько встраиваний.
-
В строке с нужным чартом нажмите значок
и выберите Настройки встраивания. -
В открывшемся окне нажмите кнопку
Новое встраивание. -
В окне настроек укажите:
- Название — введите название встраивания.
- Ключ — выберите созданный ранее ключ для встраивания.
- Неподписанные параметры — укажите неподписанные параметры, которые можно передавать в ссылке для встраивания.
-
Нажмите кнопку Создать. В колонке ID скопируйте идентификатор объекта встраивания, а затем нажмите Закрыть.
-
-
Создайте токен:
-
Подготовьте payload для токена — полезную нагрузку, которая содержит информацию об объекте встраивания. Полезная нагрузка содержит следующие поля:
-
embedId
— идентификатор объекта встраивания. -
iat
— время выписки токена JWT в формате Unix Timestamp . -
exp
— время окончания действия токена в формате Unix Timestamp. -
dlEmbedService
— строковая константа идентификатора сервиса:YC_DATALENS_EMBEDDING_SERVICE_MARK
. -
(опционально)
params
— подписанные параметры чарта, которые передаются в составе токена. Их нельзя изменить без повторной генерации токена.Пример:
{ "embedId": "ieez7********", "iat": 1516239022, "exp": 1516240822, "dlEmbedService": "YC_DATALENS_EMBEDDING_SERVICE_MARK", "params": { "param1": "value1", "param2": "value2" } }
-
-
Чтобы создать JWT-токен, подпишите подготовленный payload закрытым ключом, который был получен ранее при создании ключа для встраивания.
Примечание
Используйте при создании JWT алгоритм
PS256
.Для создания JWT-токена используйте примеры кода:
PythonNode.jsGoУстановите модуль
cryptography
для работы с алгоритмомPS256
:pip3 install cryptography
Выполните код:
import time import jwt import json private_key = b"""<закрытый_ключ>""" now = int(time.time()) payload = { 'embedId': "<идентификатор_объекта_встраивания>", 'dlEmbedService': "YC_DATALENS_EMBEDDING_SERVICE_MARK", 'iat': now, 'exp': now + 360, "params": { }} # JWT generation. encoded_token = jwt.encode( payload, private_key, algorithm='PS256', ) print(encoded_token)
Установите пакет jsonwebtoken
с помощью npm :npm install jsonwebtoken
Выполните код:
const privateKey = `<закрытый_ключ>`; const now = Math.floor(Date.now() / 1000); const payload = { embedId: '<идентификатор_объекта_встраивания>', dlEmbedService: 'YC_DATALENS_EMBEDDING_SERVICE_MARK', iat: now, exp: now + 360, params: {}, }; const jwt = require('jsonwebtoken'); const encodedToken = jwt.sign(payload, privateKey, { algorithm: 'PS256', }); console.log(encodedToken);
Установите пакет jwt-go
:go install github.com/golang-jwt/jwt/v5@latest
Выполните код:
package main import ( "fmt" "time" "github.com/golang-jwt/jwt/v5" ) func main() { privateKey, err := jwt.ParseRSAPrivateKeyFromPEM([]byte(`<закрытый_ключ>`)) now := time.Now().Unix() payload := jwt.MapClaims{ "embedId": "<идентификатор_объекта_встраивания>", "dlEmbedService": "YC_DATALENS_EMBEDDING_SERVICE_MARK", "iat": now, "exp": now + 360, "params": map[string]interface{}{}, } token := jwt.NewWithClaims(jwt.SigningMethodPS256, payload) signedToken, err := token.SignedString(privateKey) if err != nil { fmt.Println("Error generating token:", err) return } fmt.Println(signedToken) }
-
Сформируйте ссылку для встраивания:
https://datalens.yandex.cloud/embeds/chart#dl_embed_token=<токен>
Где
<токен>
— JWT-токен.
-
-
Добавьте ссылку для встраивания на свой сайт или в приложение. Например:
<iframe src="https://datalens.yandex.cloud/embeds/chart#dl_embed_token=<токен>" width="600" height="400" frameborder="0"></iframe>
Где:
src
— URL встраивания.<токен>
— JWT-токен.width
— ширина чарта.height
— высота чарта.frameborder
— наличие рамки для чарта.
Неподписанные параметры
При создании объекта встраивания можно указать один или несколько неподписанных параметров. Эти параметры не добавляются в токен. Их можно передать непосредственно в URL перед хешем с токеном. Это позволяет изменять некоторые параметры виджета на стороне клиента без повторного создания токена.
Например, если в чарте используются параметры from
и to
для фильтрации по времени, добавьте такие же неподписанные параметры при создании объекта встраивания. Эти параметры можно передавать в ссылке для встраивания перед хешем с токеном:
<iframe src="https://datalens.yandex.cloud/embeds/chart?from=2022-01-01&to=2023-02-05#dl_embed_token=<токен>" width="600" height="400" frameborder="0"></iframe>
Где:
src
— URL встраивания.<токен>
— JWT-токен.from=2022-01-01&to=2023-02-05
— неподписанные параметры, указанные при настройке встраивания.