iframe への Azure Data Explorer Web UI の埋め込み

[アーティクル]
04/01/2025

適用対象: ✅Microsoft Fabric✅Azure データエクスプローラー

Azure Data Explorer Web UI を iframe に埋め込んで、サードパーティの Web サイトでホストできます。この記事では、Azure Data Explorer Web UI を iframe に埋め込む方法について説明します。

Azure Data Explorer Web UI のスクリーンショット。

すべての機能のアクセシビリティがテストされ、すべての機能が画面テーマのダークとライトをサポートします。

Web UI を iframe に埋め込む方法

Web サイトに次のコードを追加します。

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

f-IFrameAuth クエリパラメーターは、認証トークンを取得するためにリダイレクトするように Web UI not に指示し、f-UseMeControl=false パラメーターはユーザーアカウント情報のポップアップウィンドウを表示するように web UI にに指示します。これらのアクションは、ホスティング Web サイトが認証を担当するため必要です。

workspace=<guid> クエリパラメーターは、埋め込まれた iframe 用に個別のワークスペースを作成します。ワークスペースは、タブ、クエリ、設定、接続を含むロジックユニットです。これを一意の値に設定することで、埋め込みバージョンと非埋め込みバージョンの https://dataexplorer.azure.com間でデータを共有できなくなります。

認証の処理

Web UI を埋め込む場合、ホスティングページが認証を担当します。次の図では、認証フローについて説明します。

認証を処理するには、次の手順に従います。

アプリケーションで、 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]
        }
    }

スコープの Perform Single Page Application (SPA) 認証からJWT アクセストークンを取得します。このコードはプレースホルダー 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 メタデータサービス) の間に信頼関係が確立されている必要があります。

Perform Single Page Application (SPA) 認証の手順に従います。
Azure ポータルを開き正しいテナントにサインインしていることを確認します。右上隅で、ポータルへのサインインに使用した ID を確認します。
リソースウィンドウで、Microsoft Entra ID>アプリの登録 を選択します。
On-Behalf-Of フローを使っているアプリを見つけて、それを開きます。
[マニフェスト] を選びます。
[requiredResourceAccess] を選びます。
マニフェストに、次のエントリを追加します。
```
  {
    "resourceAppId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "resourceAccess": [
        {
            "id": "388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c",
            "type": "Scope"
        }
    ]
  }
```
- 00001111-aaaa-2222-bbbb-3333cccc4444 は、Azure Data Explorer ダッシュボードサービスのアプリケーション ID です。
- 388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c は user_impersonation アクセス許可です。
Manifestに変更を保存します。
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,

機能フラグ

重要

iframe を機能させるには、 f-IFrameAuth=true フラグが必要です。その他のフラグは省略可能です。

ホスティングアプリは、ユーザーエクスペリエンスの特定の側面を制御したい場合があります。たとえば、接続ペインを非表示にしたり、他のクラスターへの接続を無効にしたりできます。このシナリオでは、Web エクスプローラーは機能フラグをサポートします。

機能フラグは URL でクエリパラメーターとして使用できます。他のクラスターの追加を無効にするには、ホスティングアプリで https://dataexplorer.azure.com/?f-ShowConnectionButtons=false を使用します。

設定	説明	デフォルトの値
f-ShowShareMenu	共有メニュー項目を表示します	本当
f-接続ボタンを表示	新しいクラスターを追加するための[接続の追加] ボタンを表示します	本当
f-ShowOpenNewWindowButton	新しいブラウザーウィンドウを開くための [Web で開く] UI ボタンを表示し、スコープ内の適切なクラスターとデータベースが存在する https://dataexplorer.azure.com をポイントします	false
f-ShowFileMenu	[ファイル] メニュー ([ダウンロード]、[タブ]、[コンテンツ] など) を表示します	本当
f-ShowToS	[設定] ダイアログで Azure Data Explorer のサービス使用条件へのリンクを表示します	true
f-ShowPersona	右上隅の設定メニューからユーザー名を表示します。	本当
f-UseMeControl	ユーザーのアカウント情報を表示する	本当
f-IFrameAuth	true の場合、Web エクスプローラーは iframe が認証を処理し、メッセージを介してトークンを提供することを想定します。このパラメーターは、iframe シナリオに必要です。	false
f-PersistAfterEachRun	通常、ブラウザーはアンロードイベント中に継続します。ただし、iframe でホストする場合、アンロードイベントは常にトリガーされるとは限りません。このフラグは、各クエリの実行後に永続ローカル状態イベントをトリガーします。これにより、発生する可能性のあるデータ損失が、実行されていない新しいクエリテキストにのみ影響するように制限されます。	false
f-ShowSmoothIngestion	true の場合、データベースを右クリックしたときにインジェストウィザードエクスペリエンスを表示します	true
f-RefreshConnection	true の場合は、ページの読み込み時に常にスキーマを更新し、ローカルストレージに依存することはありません	false
f-ShowPageHeader	true の場合は、Azure Data Explorer のタイトルと設定を含むページヘッダーを表示します	true
f-接続ペインを非表示	true の場合、左側の接続ペインは表示されません	false
f-SkipMonacoFocusOnInit	iframe でホストするときのフォーカスの問題を修正します	false
f-Homepage	ホームページと、それへの新しいユーザーの再ルーティングを有効にします	true
f-ShowNavigation	true の場合、左側にナビゲーションウィンドウが表示されます	true
f-DisableDashboardTopBar 画面のトップバーを無効化	true の場合、ダッシュボードの上部のバーが非表示になります	false
f-DisableNewDashboard	true の場合、新しいダッシュボードを追加するオプションが非表示になります	false
f-DisableNewDashboard	true の場合、ダッシュボードの一覧で検索するオプションが非表示になります	false
f-ダッシュボード編集メニューを無効化	true の場合、ダッシュボードを編集するオプションが非表示になります	false
f-DisableDashboardFileMenu	true の場合、ダッシュボードのファイルメニューボタンが非表示になります	false
f-DisableDashboardShareMenu	true の場合、ダッシュボードの共有メニューボタンが非表示になります	false
f-DisableDashboardDelete	true の場合、ダッシュボードの削除ボタンが非表示になります	false
f-DisableTileRefresh	true の場合、ダッシュボードのタイル更新ボタンが無効になります	false
f-ダッシュボードの自動更新を無効にする	true の場合、ダッシュボードのタイルの自動更新が無効になります	false
f-探索クエリ無効化	true の場合、タイルのクエリ探索ボタンが無効になります	false
クロスフィルタリングを無効化する	true の場合、ダッシュボードのクロスフィルター機能が無効になります	false
f-HideDashboardParametersBar	true の場合、ダッシュボードのパラメーターバーが非表示になります	false

次の方法で共有

iframe への Azure Data Explorer Web UI の埋め込み

Web UI を iframe に埋め込む方法

認証の処理

ダッシュボードを埋め込む

機能フラグ

フィードバック

その他のリソース

次の方法で共有

iframe への Azure Data Explorer Web UI の埋め込み

Web UI を iframe に埋め込む方法

認証の処理

ダッシュボードを埋め込む

機能フラグ

関連するコンテンツ

フィードバック

その他のリソース