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

Статья
06/15/2023

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

Снимок экрана: интерфейс пользовательского веб-интерфейса Data Explorer Azure.

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

Внедрение пользовательского веб-интерфейса в 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.data.signature === "queryExplorer" && 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. область	Microsoft Entra область
Кластер	`query`	`https://{your_cluster}.{your_region}.kusto.windows.net/.default`
Graph	`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 из конечной точки проверки подлинности Microsoft Entra для область. Этот код заменяет заполнитель 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
     }, '*');
   }
```
Важно!

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

Совет

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

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

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

Выполните действия, описанные в статье Проверка подлинности и авторизация веб-клиента (JavaScript).
Откройте портал Azure и убедитесь, что вы вошли в правильный клиент. В правом верхнем углу проверьте удостоверение, используемое для входа на портал.
В области ресурсов выберите идентификатор Microsoft Entra>Регистрация приложений.
Найдите приложение, использующее поток on-behalf-of , и откройте его.
Выберите Манифест.
Выберите requiredResourceAccess.
В манифесте добавьте следующую запись:
```
  {
    "resourceAppId": "35e917a9-4d95-4062-9d97-5781291353b9",
    "resourceAccess": [
        {
            "id": "388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c",
            "type": "Scope"
        }
    ]
  }
```
- 35e917a9-4d95-4062-9d97-5781291353b9— это идентификатор приложения службы панели мониторинга 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 35e917a9-4d95-4062-9d97-5781291353b9
```
Если вы столкнулись с ошибкой 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-ShowShareMenu	Показать пункт меню "Общий доступ"	Да
f-ShowConnectionButtons	Отображение кнопки добавления подключения для добавления нового кластера	Да
f-ShowOpenNewWindowButton	Отображение кнопки открыть в пользовательском веб-интерфейсе, которая открывает новое окно браузера и указывает на https://dataexplorer.azure.com нужный кластер и базу данных в область	false
f-ShowFileMenu	Отображение меню файла (скачивание, вкладка, содержимое и т. д.)	Да
f-ShowToS	Отображение ссылки на условия обслуживания для Azure Data Explorer в диалоговом окне параметров	Да
f-ShowPersona	Отобразите имя пользователя в меню параметров в правом верхнем углу.	Да
f-UseMeControl	Отображение сведений об учетной записи пользователя	Да
f-IFrameAuth	Если значение равно true, веб-обозреватель ожидает, что iframe будет обрабатывать проверку подлинности и предоставлять маркер через сообщение. Этот параметр является обязательным для сценариев iframe.	false
f-PersistAfterEachRun	Обычно браузеры сохраняются в событии выгрузки. Однако событие выгрузки не всегда активируется при размещении в iframe. Этот флаг активирует событие сохраняющегося локального состояния после каждого выполнения запроса. Это ограничивает любую потерю данных, которая может произойти, чтобы повлиять только на новый текст запроса, который никогда не выполнялся.	false
f-ShowSmoothIngestion	Если задано значение true, отображается интерфейс мастера приема при щелчке правой кнопкой мыши базы данных.	Да
f-RefreshConnection	Если задано значение true, всегда обновляет схему при загрузке страницы и никогда не зависит от локального хранилища.	false
f-ShowPageHeader	Если задано значение true, отображается заголовок страницы с заголовком и параметрами Data Explorer Azure.	Да
f-HideConnectionPane	Если задано значение true, панель подключения слева не отображается.	false
f-SkipMonacoFocusOnInit	Устранена проблема с фокусом при размещении в iframe	false
F-Домашняя страница	Включение домашней страницы и перенаправление на нее новых пользователей	Да
f-ShowNavigation	Если задано значение true, отображается область навигации слева	Да
f-DisableDashboardTopBar	Если задано значение true, верхняя панель на панели мониторинга скрыта.	false
f-DisableNewDashboard	Если задано значение true, параметр для добавления новой панели мониторинга скрывается.	false
f-DisableNewDashboard	Если задано значение true, параметр для поиска в списке панелей мониторинга скрывается.	false
f-DisableDashboardEditMenu	Если задано значение true, параметр для редактирования панели мониторинга скрывается.	false
f-DisableDashboardFileMenu	ЕСЛИ задано значение true, кнопка меню "Файл" скрывается на панели мониторинга	false
f-DisableDashboardShareMenu	Если задано значение true, кнопка меню "Общий доступ" скрывается на панели мониторинга.	false
f-DisableDashboardDelete	Если значение равно true, скрывает кнопку удаления панели мониторинга.	false
f-DisableTileRefresh	Если значение равно true, отключает кнопку обновления плиток на панели мониторинга.	false
f-DisableDashboardAutoRefresh	Если задано значение true, автоматическое обновление плиток на панели мониторинга отключается.	false
f-DisableExploreQuery	ЕСЛИ значение равно true, отключает кнопку "Просмотреть запрос" для плиток.	false
f-DisableCrossFiltering	Если задано значение true, функция перекрестной фильтрации на панелях мониторинга отключается.	false
f-HideDashboardParametersBar	Если значение равно true, скрывает панель параметров на панели мониторинга.	false

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

Внедрение пользовательского веб-интерфейса в iframe

Обработка проверки подлинности

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

Флаги компонентов

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

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

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

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

Внедрение пользовательского веб-интерфейса в iframe

Обработка проверки подлинности

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

Флаги компонентов

См. также

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

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

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