Microsoft Fabric Embed のクイックスタート

このクイック スタートでは、Fabric埋め込みを使用して、ブラウザー ベースの JavaScript または TypeScript Web アプリにMicrosoft Fabric Real-Time ダッシュボードを追加します。 Fabric埋め込みを使用すると、ユーザーが自分のMicrosoft Entra ID ID と委任されたアクセス許可を使用してダッシュボードにアクセスするときに、アプリにダッシュボードを表示できます。

アプリでは、JavaScript 用 Microsoft Authentication Library (MSAL.js) を使用して、Microsoft Fabric API リソースの委任されたアクセス トークンを要求し、Fabric Embed SDK を使用してダッシュボードをレンダリングします。 完了すると、Fabric ポータルにユーザーを送信せずに、Real-Time ダッシュボードがアプリに表示されます。

Real-Time ダッシュボードを埋め込むための前提条件

開始する前に、「Microsoft Fabric埋め込み環境のセットアップ」を完了してください。 このセットアップでは、このクイック スタートで使用Microsoft Entraアプリの登録、委任されたアクセス許可、Microsoft Fabric ワークスペース、アクティブなFabric容量、ダッシュボードの値が作成または確認されます。

また、次の値とアクセス許可も必要です。

MSAL.js と Fabric 埋め込み SDK をインストールする

Web アプリ プロジェクト フォルダーから、このクイック スタートで使用するクライアント側パッケージをインストールします。

npm install @azure/msal-browser @microsoft/fabric-embed

プレビューのオンボード手順でバージョン固有の Fabric Embed SDK パッケージ コマンドが提供されている場合は、@microsoft/fabric-embed パッケージに対してそのコマンドを使用します。 インストール後、package.json@azure/msal-browserに@microsoft/fabric-embedとdependenciesが一覧表示されていることを確認します。

Microsoft Fabric Embed のMicrosoft Entra認証を構成する

MSAL.js (@azure/msal-browser) は、ユーザーをサインインさせ、https://api.fabric.microsoft.comのMicrosoft ID プラットフォームから委任されたアクセス トークンを取得します。 .default スコープは、アプリの登録に既に同意した委任されたFabricアクセス許可 (Fabric.EmbedやItem.Read.Allなど) をMicrosoft Entra IDに求めます。

詳細については、Microsoft Authentication Library (MSAL) の概要を参照してください。

埋め込みコードが getAccessToken()を呼び出す前に、このコードをアプリのクライアント側認証ファイルまたはモジュールに追加します。

import {
  AuthenticationResult,
  InteractionRequiredAuthError,
  PublicClientApplication,
} from "@azure/msal-browser";

const msal = new PublicClientApplication({
  auth: {
    clientId: "<client-id>",
    authority: "https://login.microsoftonline.com/<tenant-id>",
    redirectUri: window.location.origin,
  },
});

const defaultScopes = ["https://api.fabric.microsoft.com/.default"];

async function getAccessToken(requestedScopes?: string[]): Promise<string> {
  const scopes = requestedScopes ?? defaultScopes;
  let accounts = msal.getAllAccounts();

  if (accounts.length === 0) {
    await msal.loginPopup({ scopes });
    accounts = msal.getAllAccounts();
  }

  const account = accounts[0];
  if (!account) {
    throw new Error("No Microsoft Entra account is signed in.");
  }

  let result: AuthenticationResult;

  try {
    result = await msal.acquireTokenSilent({ scopes, account });
  } catch (error) {
    if (error instanceof InteractionRequiredAuthError) {
      result = await msal.acquireTokenPopup({ scopes, account });
    } else {
      throw error;
    }
  }

  return result.accessToken;
}

<client-id> と <tenant-id> は、山括弧も含めて、Microsoft Entra アプリ登録の値に置き換えてください。 getAccessToken()関数は、サインインしているMicrosoft Entra ユーザーの委任されたMicrosoft Fabric アクセス トークンを返すか、ユーザーがサインインしていない場合はエラーをスローします。

埋め込み Real-Time ダッシュボードの HTML コンテナーを追加する

Fabric Embed SDK が Microsoft Fabric Real-Time ダッシュボードをレンダリングする HTML 要素を追加します。 id値は、埋め込みコード内のコンテナー参照と一致する必要があります。 roleとaria-labelは、スクリーン リーダー ユーザーの埋め込みダッシュボード領域を識別します。

<div
  id="fabric-embed-container"
  role="region"
  aria-label="Embedded Fabric Real-Time Dashboard"
></div>

Fabric Embed SDK のトークン更新用アクセス トークン プロバイダーを構成する

Fabric Embed SDK が埋め込み Real-Time Dashboard の委任された Microsoft Fabric アクセス トークンを更新する際に使用するアクセス トークン プロバイダーを構成します。 次の例では、accessTokenProvider関数を使用してgetAccessToken()を実装します。

const accessTokenProvider = {
  callback: async (input?: { scopes?: string[] }) => {
    const token = await getAccessToken(input?.scopes);
    return { token };
  },
};

Fabric埋め込み SDK を使用して Real-Time ダッシュボードを埋め込む

Fabric埋め込み SDK を使用して、MICROSOFT FABRIC Real-Time ダッシュボードを HTML コンテナーにレンダリングします。 このサンプルのパブリック プレビュー SDK の種類では、Real-Time ダッシュボードの埋め込みには KQLDashboard* 名を使用します。

埋め込み構成では、これらの値が使用されます。

import {
  EmbedManager,
  KQLDashboardEmbedClient,
  KQLDashboardViewMode,
  KQLDashboardEmbedConfiguration,
} from "@microsoft/fabric-embed";

const embedManager = new EmbedManager({
  embedClientClasses: [KQLDashboardEmbedClient],
});

async function embedDashboard() {
  const container = document.getElementById("fabric-embed-container");

  if (!container) {
    throw new Error("The Fabric embed container was not found.");
  }

  const token = await getAccessToken();

  const embedConfig: KQLDashboardEmbedConfiguration = {
    accessToken: { token },
    itemId: "<real-time-dashboard-item-id>",
    itemType: "KQLDashboard",
    workspaceId: "<workspace-id>",
    viewMode: KQLDashboardViewMode.View,
    eventHooks: { accessTokenProvider },
  };

  const client: KQLDashboardEmbedClient = embedManager.embed(container, embedConfig);

  client.on("rendered", () => {
    console.log("Real-Time Dashboard rendered.");
  });

  client.on("error", (error: unknown) => {
    console.error("Microsoft Fabric Embed error:", error);
  });
}

embedDashboard();

と は、山かっこ（< >）を含めて、お使いの Fabric アイテム ID とワークスペース ID に置き換えてください。

コードが実行されると、SDK によってコンテナーに Real-Time ダッシュボードがレンダリングされ、 Real-Time Dashboard rendered. がブラウザー コンソールに書き込まれます。

Microsoft Fabric Embed のリアルタイム ダッシュボードを確認する

SDK は、ダッシュボードが fabric-embed-container リージョンに表示され、ブラウザー コンソールのログが Real-Time Dashboard rendered.されると、正常に埋め込まれます。

ダッシュボードがレンダリングされない場合は、SDK error イベントの詳細を使用して、これらの項目を確認します。

次のステップ

• Microsoft Fabric の埋め込みとは何ですか?
• Microsoft Fabric埋め込み環境を設定する
• Microsoft Entra ID でアプリケーションを登録する
• Microsoft Fabricの Real-Time インテリジェンスとは