Внедрение веб-интерфейса Azure Data Explorer в iframe

Статья
03/22/2025

Область применения: ✅Microsoft Fabric ✅Azure Data Explorer

Веб-интерфейс Azure Data Explorer можно внедрить в iframe и разместить на сторонних веб-сайтах. В этой статье описывается внедрение веб-интерфейса Azure Data Explorer в iframe.

Снимок экрана веб-интерфейса Azure Data Explorer.

Все функциональные возможности тестируются на доступность и поддерживают темные и светлые темы на экранах.

Внедрение веб-интерфейса в iframe

Добавьте следующий код на веб-сайт:

<iframe
  src="https://dataexplorer.azure.com/?f-IFrameAuth=true&f-UseMeControl=false&workspace=<guid>"
></iframe>

Параметр f-IFrameAuth запроса сообщает веб-интерфейсу не перенаправлять для получения маркера аутентификации, а параметр f-UseMeControl=false сообщает веб-интерфейсу не показывать всплывающее окно информации об учетной записи пользователя. Эти действия необходимы, так как веб-сайт размещения отвечает за проверку подлинности.

Параметр workspace=<guid> запроса создает отдельную рабочую область для внедренного iframe. Рабочая область — это единица логики, содержащая вкладки, запросы, параметры и подключения. Задав его уникальное значение, он предотвращает общий доступ к данным между внедренной и не внедренной версией https://dataexplorer.azure.com.

Управление аутентификацией

При внедрении веб-интерфейса страница размещения отвечает за проверку подлинности. На следующих схемах описан поток проверки подлинности.

Чтобы работать с аутентификацией, выполните следующие действия.

В приложении прослушивайте сообщение getToken .

window.addEventListener('message', (event) => {
   if (event.origin === "https://dataexplorer.azure.com" && event.data.type === "getToken") {
     // CODE-1: Replace this placeholder with code to get the access token from Microsoft Entra ID and
     //         then post a "postToken" message with an access token and an event.data.scope
   }
})

Определите функцию для сопоставления event.data.scope в рамках Microsoft Entra. Используйте следующую таблицу, чтобы решить, как сопоставить event.data.scope области Microsoft Entra:

Ресурс	event.data.scope	Область Microsoft Entra
Кластер	`query`	`https://{your_cluster}.{your_region}.kusto.windows.net/.default`
График	`People.Read`	`People.Read`, `User.ReadBasic.All`, `Group.Read.All`
Панели мониторинга	`https://rtd-metadata.azurewebsites.net/user_impersonation`	`https://rtd-metadata.azurewebsites.net/user_impersonation`

Например, следующая функция сопоставляет области на основе сведений в таблице.

    function mapScope(scope) {
        switch(scope) {
            case "query": return ["https://your_cluster.your_region.kusto.windows.net/.default"];
            case "People.Read": return ["People.Read", "User.ReadBasic.All", "Group.Read.All"];
            default: return [scope]
        }
    }

Получите токен доступа JWT при проведении аутентификации одностраничного приложения (SPA) для области. Этот код заменяет заглушку CODE-1.

Например, можно использовать @azure/MSAL-react для получения токена доступа. В примере используется функция mapScope , определенная ранее.
```
import { useMsal } from "@azure/msal-react";
const { instance, accounts } = useMsal();

instance.acquireTokenSilent({
  scopes: mapScope(event.data.scope),
  account: accounts[0],
})
.then((response) =>
    var accessToken = response.accessToken
    // - CODE-2: Replace this placeholder with code to post a "postToken" message with an access token and an event.data.scope
)
```
Внимание

Имя пользователя (UPN) можно использовать только для проверки подлинности, учетные записи служб не поддерживаются.
Разместите сообщение postToken с маркером доступа. Этот код заменяет заполнитель CODE-2:
```
     iframeWindow.postMessage({
         "type": "postToken",
         "message": // the access token your obtained earlier
         "scope": // event.data.scope as passed to the "getToken" message
     }, 'https://dataexplorer.azure.com'); 
   }
```
Внимание

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

Совет

В нашем примере проекта можно просмотреть приложение , использующее проверку подлинности.

Внедрение панелей мониторинга

Чтобы встроить панель мониторинга, необходимо установить доверительные отношения между приложением Microsoft Entra узла и службой панели мониторинга Azure Data Explorer (службой метаданных RTD).

Выполните действия, описанные в разделе "Выполнение проверки подлинности одностраничного приложения (SPA).
Откройте портал Azure и убедитесь, что вы вошли в правильный клиент. В правом верхнем углу проверьте удостоверение, используемое для входа на портал.
В области ресурсов выберите Microsoft Entra ID>Регистрация приложений.
Найдите приложение, которое использует поток выполнения от имени и откройте его.
Выберите Манифест.
Выберите requiredResourceAccess.
В манифесте добавьте следующую запись:
```
  {
    "resourceAppId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "resourceAccess": [
        {
            "id": "388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c",
            "type": "Scope"
        }
    ]
  }
```
- 00001111-aaaa-2222-bbbb-3333cccc4444 — это идентификатор приложения службы панели мониторинга Azure Data Explorer.
- 388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c — это разрешение "user_impersonation".
Сохраните изменения в манифесте.
Выберите разрешения API и убедитесь, что у вас есть новая запись: служба метаданных RTD.
В Microsoft Graph добавьте разрешения для People.Read, User.ReadBasic.Allа также Group.Read.All.
В Azure PowerShell добавьте следующий новый служебный принципал для приложения.
```
New-MgServicePrincipal -AppId 00001111-aaaa-2222-bbbb-3333cccc4444
```
Если возникла Request_MultipleObjectsWithSameKeyValue ошибка, это означает, что приложение уже находится в клиенте, указывающее, что оно было успешно добавлено.
На странице разрешений API выберите предоставить согласие администратора для всех пользователей.

Примечание.

Чтобы внедрить панель мониторинга без области запроса, используйте следующую настройку:

 <iframe src="https://dataexplorer.azure.com/dashboards?[feature-flags]" />

Где [feature-flags] находится:

"f-IFrameAuth": true,
"f-PersistAfterEachRun": true,
"f-Homepage": false,
"f-ShowPageHeader": false,
"f-ShowNavigation": false,
"f-DisableExploreQuery": false,

Флаги функций

Внимание

Флаг f-IFrameAuth=true необходим для работы iframe. Другие флаги являются необязательными.

Хост-приложение может захотеть контролировать некоторые аспекты пользовательского опыта. Например, скрытие области подключения или отключение подключения к другим кластерам. В этом сценарии веб-обозреватель поддерживает флаги компонентов.

Флаг компонента можно использовать в URL-адресе в качестве параметра запроса. Чтобы отключить добавление других кластеров, используйте https://dataexplorer.azure.com/?f-ShowConnectionButtons=false в приложении размещения.

Настройка	Описание:	Значение по умолчанию
f-ПоказатьМенюПоделиться	Отображение элемента меню общего доступа	правда
f-ShowConnectionButtons	Отображение кнопки добавления подключения для добавления нового кластера	true
f-ПоказатьКнопкуОткрытияВНовомОкне	Показать кнопку открыть в веб-интерфейсе, которая открывает новое окно браузера и указывает на https://dataexplorer.azure.com правильный кластер и базу данных в области видимости.	ложный
f-ПоказатьМенюФайла	Показать меню файла (скачать, вкладку, содержимое и т. д.)	истинный
f-ПоказатьToS	Показать ссылку на условия службы Для Azure Data Explorer из диалогового окна параметров	верно
f-ShowPersona	Отображение имени пользователя в меню параметров в правом верхнем углу.	истинный
f-UseMeControl	Отображение сведений об учетной записи пользователя	истинный
f-IFrameAuth	Если значение true, веб-браузер ожидает, что iframe обрабатывает проверку подлинности и предоставляет токен через сообщение. Этот параметр необходим для сценариев iframe.	ложный
f-PersistAfterEachRun	Обычно браузеры продолжают работать во время события выгрузки. Однако событие выгрузки не всегда активируется при размещении в iframe. Этот флаг активирует сохраняющееся локальное событие состояния после каждого выполнения запроса. Это ограничивает любые потери данных, которые могут возникнуть, так что они затрагивают только новые тексты запросов, которые никогда не выполнялись.	false
f-ShowSmoothIngestion	Если задано значение true, при щелчке правой кнопкой мыши на базе данных отображается интерфейс мастера приема данных.	true
f-ОбновитьСоединение	Если значение true, всегда обновляет схему при загрузке страницы и никогда не зависит от локального хранилища.	ложь
f-ПоказатьЗаголовокСтраницы	Если значение true, отображается заголовок страницы, содержащий название Azure Data Explorer и параметры.	true
f-HideConnectionPane	Если условие истинно, левая область подключения не отображается	неверно
f-SkipMonacoFocusOnInit	Исправлена проблема с фокусом при размещении на iframe	ложь
f-домашняя страница	Включите домашнюю страницу и перенаправьте на неё новых пользователей.	истина
f-ShowNavigation	Если истинно, отображает область навигации слева	Истина
f-DisableDashboardTopBar	Если истинно, скрывает верхнюю панель в панели управления	ложь
f-DisableNewDashboard	ЕСЛИ значение true, скрывает параметр добавления новой панели мониторинга	ложь
f-DisableNewDashboard (отключение новой панели управления)	Если true, то параметр поиска в списке панелей мониторинга скрывается.	ложь
ОтключитьМенюРедактированияПанели	Если true, скрывает возможность редактирования дашборда.	false
ОтключениеМенюФайловНаДашборде	Если true, скрывает кнопку меню файла на панели мониторинга	ложь
f-DisableDashboardShareMenu	Если true, скрывает кнопку меню «Поделиться» на панели управления	ложь
f-DisableDashboardDelete	Если значение true, скрывает кнопку удаления панели мониторинга	ложь
f-DisableTileRefresh	ЕСЛИ значение true, отключает кнопку обновления плиток на панели мониторинга	ложный
f-DisableDashboardAutoRefresh	Если true, отключает автоматическое обновление плиток на панели мониторинга	ложный
f-DisableExploreQuery	Если это значение равно true, кнопка "Исследовать запрос" для плиток будет отключена.	ложный
f-ОтключитьКроссФильтрацию	ЕСЛИ значение true, отключает функцию перекрестной фильтрации на информационных панелях	false
f-HideDashboardParametersBar	Если true, скрывает панель параметров на доске мониторинга	ложь

Поделиться через

Внедрение веб-интерфейса Azure Data Explorer в iframe

Внедрение веб-интерфейса в iframe

Управление аутентификацией

Внедрение панелей мониторинга

Флаги функций

Обратная связь

Дополнительные ресурсы

Поделиться через

Внедрение веб-интерфейса Azure Data Explorer в iframe

Внедрение веб-интерфейса в iframe

Управление аутентификацией

Внедрение панелей мониторинга

Флаги функций

Связанный контент

Обратная связь

Дополнительные ресурсы