--- title: Interactive embedding redirect_from: - /docs/latest/enterprise-guide/full-app-embedding - /docs/latest/embedding/full-app-embedding --- # Интерактивное встраивание Доступно лишь на платных планах Metabase и не входит в возможности GlarusBI. GlarusBI предлагает несколько [типов встраивания](./introduction.md) с разными уровнями настройки и безопасности. Если вы хотите настроить только фиксированное количество фильтров и представлений детализации ваших данных (т.е. запретить людям создавать свои собственные вопросы), вы можете предпочесть [Подписанное встраивание](. /signed-embedding.md). ## Демо интерактивного встраивания приложения Для того, чтобы понять, что вы можете сделать с интерактивным встраиванием приложения, посмотрите наш [демо интерактивного встраивания приложения](https://www.metabase.com/embedding-demo). Чтобы увидеть конструктор запросов в действии, нажмите **Отчеты** > **+ Новый** > **Вопрос**. ## Quick start Check out the [Interactive embedding quick start](https://www.metabase.com/learn/customer-facing-analytics/interactive-embedding-quick-start). ## Предварительные условия для интерактивного встраивания 1. Убедитесь, что у вас есть [токен лицензии](../paid-features/activating-the-enterprise-edition.md) для [платного плана](https://store.metabase.com/checkout/login-details). 2. Организуйте людей в GlarusBI [группы](../people-and-groups/start.md). 3. Настройте [разрешения](../permissions/introduction.md) для каждой группы. 4. Настройте [SSO](../people-and-groups/start.md#authentication), чтобы автоматически применять разрешения и показывать людям правильные данные при входе в систему. In general, **we recommend using [SSO with JWT](../people-and-groups/authenticating-with-jwt.md)**. ## Включение интерактивного встраивания приложения в GlarusBI 1. Перейдите в **Настройки** > **Настройки администратора** > **Встраивание**. 2. Нажмите **Включить**. 3. Нажмите **Интерактивное встраивание приложения**. 4. В разделе **Авторизованные источники** добавьте URL-адрес веб-сайта или веб-приложения, в которое вы хотите встроить GlarusBI (например, `https://*.example.com`). ## Настройка встраивания на ваш сайт 1. Создайте iframe с атрибутом `src`, установленным на: - [URL](#pointing-an-iframe-to-a-metabase-url) страницы GlarusBI, которую вы хотите внедрить, или - [точка аутентификации](#pointing-an-iframe-to-an-authentication-endpoint), которая перенаправляет на URL-адрес вашей GlarusBI. 2. Необязательно: в зависимости от того, как настроено ваше веб-приложение, задайте для [переменные среды](../configuring-metabase/environment-variables.md): - [Добавьте токен лицензии](../configuring-metabase/environment-variables.md#mb_premium_embedding_token). - [Встроить GlarusBI в другой домен](#embedding-metabase-in-a-other-domain). - [Защитите встраивание полного приложения](#securing-interactive-embeds). 3. Необязательно: включите связь со встроенной GlarusBI и из нее с помощью поддерживаемых сообщений [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage): - [Из GlarusBI](#supported-postmessage-messages-from-embedded-metabase) - [В GlarusBI](#supported-postmessage-messages-to-embedded-metabase) 4. Необязательно: установите для параметров значение [показать или скрыть компоненты пользовательского интерфейса GlarusBI](#showing-or-hiding-metabase-ui-components). Когда вы будете готовы развернуть свое интерактивное встраивание приложения, убедитесь, что люди **разрешают** файлы cookie браузера из GlarusBI, иначе они не смогут войти в систему. ### Указание iframe на URL-адрес GlarusBI Перейдите в свой экземпляр GlarusBI и найдите страницу, которую хотите встроить. Например, чтобы встроить домашнюю страницу вашей GlarusBI, установите для атрибута `src` ваш [URL-адрес сайта](../configuring-metabase/settings.md#site-url), например: ``` http://metabase.yourcompany.com/ ``` Чтобы встроить определенную панель управления GlarusBI, используйте URL-адрес панели управления, например: ``` http://metabase.yourcompany.com/dashboard/1 ``` ### Указание iframe на конечную точку аутентификации Используйте эту опцию, если вы хотите направлять людей прямо на экран входа в систему SSO (т. е. пропускать экран входа в GlarusBI с помощью кнопки SSO) и автоматически перенаправлять в GlarusBI после аутентификации. Вам нужно будет установить атрибут `src` на вашу конечную точку аутентификации с `return_to` параметром, содержащим закодированный URL-адрес GlarusBI. Например, чтобы отправить людей на вашу страницу входа SSO и автоматически перенаправить их на `http://metabase.yourcompany.com/dashboard/1`: ``` https://metabase.example.com/auth/sso?return_to=http%3A%2F%2Fmetabase.yourcompany.com%2Fdashboard%2F1 ``` Если вы используете [JWT](../people-and-groups/authenticating-with-jwt.md), вы можете использовать относительный путь для перенаправления (т. е. URL-адрес вашей GlarusBI без [URL-адрес сайта](../configuring-metabase/settings.md#site-url)). Например, чтобы отправить людей на страницу GlarusBI в `/dashboard/1`: ``` https://metabase.example.com/auth/sso?jwt=&return_to=%2Fdashboard%2F1 ``` Вы должны кодировать URL (или дважды кодировать, в зависимости от настроек вашего веб-сайта) все параметры в вашей ссылке перенаправления, включая параметры для фильтров (например, `filter=value`) и [настройки пользовательского интерфейса](#showing-or-hiding-metabase-ui-components) (например, `top_nav=true`). Например, если вы добавили два параметра фильтра в пример JWT, показанный выше, ваша ссылка `src` станет такой: ``` https://metabase.example.com/auth/sso?jwt=&redirect=%2Fdashboard%2F1%3Ffilter1%3Dvalue%26filter2%3Dvalue ``` ## Кросс-браузерная совместимость Чтобы убедиться, что ваша встроенная GlarusBI работает во всех браузерах, поместите GlarusBI и приложение для внедрения в один и тот же домен верхнего уровня (TLD). TLD обозначается последней частью веб-адреса, например `.com` или `.org`. Обратите внимание, что ваше интерактивно встраиваемое приложение должно быть совместимо с Safari, чтобы работать в _любом_ браузере iOS (например, Chrome в iOS). ## Встраивание GlarusBI в другой домен Если GlarusBI и домен, куда вы ее встраиваете, уже находятся в одном и том же домене высшего уровня (TLD) - можете пропустить этот раздел. Если вы хотите встроить GlarusBI в другой домен (скажем, если GlarusBI размещена в `metabase.yourcompany.com`, но вы хотите встроить GlarusBI в `yourcompany.github.io`), you can tell Metabase to set the session cookie's SameSite value to "none". You can set session cookie's SameSite value in **Admin settings** > **Embedding** > **Interactive embedding** > **SameSite cookie setting**. SameSite values include: - **Lax** (default): Allows cookies to be sent when someone navigates to the origin site from an external site (like when following a link). - **None**: Allows all cross-site requests. Incompatible with most Safari and iOS browsers, such as Chrome on iOS. If you set this environment variable to "None", you must use HTTPS in Metabase to prevent browsers from rejecting the request. - **Strict** (not recommended): Never allows cookies to be sent on a cross-site request. Warning: this will prevent users from following external links to Metabase. You can also set the the [`MB_SESSION_COOKIE_SAMESITE` environment variable](../configuring-metabase/environment-variables.md#mb_session_cookie_samesite). If you're using Safari, you'll need to [allow cross-site tracking](https://support.apple.com/en-tj/guide/safari/sfri40732/mac). Depending on the browser, you may also run into issues when viewing emdedded items in private/incognito tabs. Learn more about [SameSite cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite). ## Защита приложений, использующих интерактивное встраивание GlarusBI использует файлы cookie HTTP для аутентификации людей и сохранения их входа в вашу встроенную GlarusBI, даже когда кто-то закрывает сеанс браузера. Если вы хотите использовать диаграммы потоков аутентификации, см. [Интерактивное встраивание приложений с SSO](https://www.metabase.com/learn/customer-facing-analytics/securing-embeds). Чтобы ограничить время, в течение которого человек остается в системе, установите [`MAX_SESSION_AGE`](../configuring-metabase/environment-variables.md#max_session_age) число в минутах. Значение по умолчанию — 20160 (две недели). Например, чтобы люди оставались в системе не более 24 часов: ```sh MAX_SESSION_AGE=1440 ``` Чтобы автоматически очистить файлы cookie для входа пользователя после завершения сеанса браузера: ```sh MB_SESSION_COOKIES=true ``` Чтобы вручную выйти из GlarusBI, загрузите следующий URL-адрес (например, в скрытом iframe на странице выхода вашего приложения): ```sh https://metabase.yourcompany.com/auth/logout ``` Если вы используете [JWT](../people-and-groups/authenticating-with-jwt.md) для единого входа, мы рекомендуем установить для свойства `exp` (срок действия) короткую продолжительность (например, 1 минуту). ## Поддерживаемые сообщения postMessage _from_ встроенной GlarusBI Чтобы не отставать от изменений URL-адреса встроенной GlarusBI (например, при применении фильтра), настройте свое приложение для прослушивания сообщений «местоположение» из встроенной GlarusBI. Если вы хотите использовать это сообщение для создания ссылок, обратите внимание, что «location» отражает «window.location». ```json { "metabase": { "type": "location", "location": LOCATION_OBJECT_OR_URL } } ``` Чтобы встроенная страница GlarusBI (например, вопрос) заполнила весь iframe в вашем приложении, настройте свое приложение для прослушивания сообщения "frame" в "нормальном" режиме из GlarusBI: ```json { "metabase": { "type": "frame", "frame": { "mode": "normal" } } } ``` Чтобы указать размер iframe в вашем приложении, чтобы он соответствовал встроенной странице GlarusBI (например, панели инструментов), настройте свое приложение для прослушивания сообщения «frame» с режимом «fit» из GlarusBI: ```json { "metabase": { "type": "frame", "frame": { "mode": "fit", "height": HEIGHT_IN_PIXELS } } } ``` ## Поддерживаемые сообщения postMessage _to_ встроенной GlarusBI Чтобы изменить URL-адрес встраивания, отправьте сообщение «местоположение» из своего приложения в GlarusBI: ```json { "metabase": { "type": "location", "location": LOCATION_OBJECT_OR_URL } } ``` ## Group strategies with sandboxing If you want multiple people from a single customer account to collaborate on questions and dashboards, you'll need to set up one [group](../people-and-groups/managing.md#groups) per customer account. You can handle [data sandboxing](../permissions/data-sandboxes.md) with a single, separate group that just sandboxes your data. For example, each person could be part of a customer group that sets up data permissions with sandboxing via a certain attribute that applies to everyone across all your customer accounts. Additionally, each person within a single customer account could also be a member of a group specific to that customer account. That way they can collaborate on collections with other people in their organization, without seeing stuff created by people from other customers' accounts. ## Отображение или скрытие компонентов пользовательского интерфейса GlarusBI Чтобы изменить интерфейс вашего интерактивно встраиваемого приложения, вы можете добавить параметры в конец URL-адреса встраивания. Если вы хотите изменить цвета или шрифты во встраивании, см. раздел [Настройка внешнего вида](../configuring-metabase/appearance.md). Например, вы можете отключить в GlarusBI [верхнюю панель навигации](#top_nav) и [боковое меню навигации](#side_nav) следующим образом: ``` your_embedding_url?top_nav=false&side_nav=false ``` ![Верхняя и боковая навигация отключены](./images/no-top-no-side.png) Options include: - [Action buttons](#action_buttons) - [Additional info](#additional_info) - [Breadcrumbs](#breadcrumbs) - [Header](#header) - [Locale](#locale) - [Logo](#logo) - [New button](#new_button) - [Search](#search) - [Side nav](#side_nav) - [Top nav](#top_nav) ### `action_buttons` Visible by default on question pages when the [header](#header) is enabled. To hide the action buttons such as **Filter**, **Summarize**, the query builder button, and so on: ``` header=false&action_buttons=false ``` ![Action buttons](./images/action-buttons.png) ### `additional_info` Visible by default on question and dashboard pages, when the [header](#header) is enabled. To hide the gray text "Edited X days ago by FirstName LastName", as well as the breadcrumbs with collection, database, and table names: `header=false&additional_info=false` ![Additional info](./images/additional-info.png) ### `breadcrumbs` Shown by default in the top nav bar. Collection breadcrumbs show the path to the item (i.e., the collection(s) the item is in). To hide the breadcrumbs: ``` breadcrumbs=false ``` ### `header` Visible by default on question and dashboard pages. To hide a question or dashboard's title, [additional info](#additional_info), and [action buttons](#action_buttons): `header=false` ### `locale` You can localize the user interface via a parameter. For example, to set the locale to Spanish: ``` locale=es-ES ``` Check out the [locales Metabase supports](https://github.com/metabase/metabase/tree/master/locales). And read more about [localization](../configuring-metabase/localization.md). ### `logo` Whether to show the logo that opens and closes the sidebar nav. Default is true. How Metabase displays the logo depends on the `side_nav` setting. Here's a rough breakdown of how these two parameters interact: If `logo=true` and: - `side_nav=true`: Looks like regular Metabase (with whatever logo you have set). - `side_nav=false`: There is no sidebar, so nothing happens when you hover over the logo. If `logo=false` and: - `side_nav=true`: Metabase shows the generic sidebar icon, with a gray color in normal state, and a brand color on hover. - `side_nav=false`: There is no side nav nor logo, so the breadcrumbs move all the way to the left of the screen. ### `new_button` Hidden by default. To show the **+ New** button used to create queries or dashboards: ``` top_nav=true&new_button=true ``` ### `search` Hidden by default. To show the search box in the top nav: ``` top_nav=true&search=true ``` ### `side_nav` The navigation sidebar is shown on `/collection` and home page routes, and hidden everywhere else by default. To allow people to minimize the sidebar: ``` top_nav=true&side_nav=true ``` ![Side nav](./images/side-nav.png) ### `top_nav` Shown by default. To hide the top navigation bar: ``` top_nav=false ``` ![Top nav bar](./images/top-nav.png) `search`, `new_button`, and `breadcrumbs` all depend on `top_nav` being set to `true`. If these three children (`search`, `new_button`, and `breadcrumbs`) are all false, Metabase will hide the top nav bar. ## Справочные приложения To build a sample interactive embed using SSO with JWT, see our reference apps: - [Node.js + Express](https://github.com/metabase/metabase-nodejs-express-interactive-embedding-sample) (with [quick start guide](https://www.metabase.com/learn/customer-facing-analytics/interactive-embedding-quick-start)) - [Node.js + React](https://github.com/metabase/sso-examples/tree/master/app-embed-example) ## Дополнительная информация - [Interactive embedding quick start](https://www.metabase.com/learn/customer-facing-analytics/interactive-embedding-quick-start) - [Стратегии предоставления клиентской аналитики. Документация Metabase](https://www.metabase.com/learn/embedding/embedding-overview). - [Стратегии разрешений. Документация Metabase](https://www.metabase.com/learn/permissions/strategy). - [Настройка внешнего вида GlarusBI](../configuring-metabase/appearance.md).