Quickstart til Microsoft Fabric Embed

I denne Quickstart bruker du Fabric Embed for å legge til et Microsoft Fabric Real-Time dashbord i en nettleserbasert JavaScript- eller TypeScript-webapp. Ved å bruke Fabric Embed kan appen din vise dashbordet mens brukerne bruker det ved å bruke sin Microsoft Entra ID-identitet og delegerte tillatelser.

Appen bruker Microsoft Authentication Library for JavaScript (MSAL.js) for å be om en delegert tilgangstoken for Microsoft Fabric API-ressursen, og Fabric Embed SDK for å gjengi dashbordet. Når du er ferdig, viser appen Real-Time Dashboard uten å sende brukere til Fabric-portalen.

Forutsetninger for å bygge inn et Real-Time Dashboard

Før du begynner, fullfør oppsettet ditt miljø for Microsoft Fabric Embed. Dette oppsettet oppretter eller bekrefter Microsoft Entra-appregistrering, delegerte tillatelser, Microsoft Fabric-arbeidsområde, aktiv Fabric-kapasitet og dashbordverdier som denne quickstart bruker.

Du trenger også følgende verdier og tillatelser.

Installer MSAL.js og Fabric Embed SDK

Fra din webapp-prosjektmappe installerer du klientsidepakkene som denne quickstarten bruker.

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

Hvis forhåndsvisningsinstruksjonene dine inneholder en versjonsspesifikk Fabric Embed SDK-pakkekommando, bruk den kommandoen for @microsoft/fabric-embed pakken. Etter installasjon, bekreft at package.json listet @azure/msal-browser og @microsoft/fabric-embed i dependencies.

Konfigurer Microsoft Entra-autentisering for Microsoft Fabric Embed

MSAL.js (@azure/msal-browser) logger inn brukeren og får en delegert tilgangstoken fra Microsofts identitetsplattform for https://api.fabric.microsoft.com. Omfanget .default ber Microsoft Entra ID om delegerte Fabric-tillatelser som du allerede har samtykket til for appregistreringen, inkludert Fabric.Embed og Item.Read.All.

For mer informasjon, se oversikten over Microsoft Authentication Library (MSAL).

Legg til denne koden i appens klientside-autentiseringsfil eller modul før innbyggingskodekallene 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;
}

Erstatt <client-id> og <tenant-id>, inkludert vinkelparentesene, med verdiene fra Microsoft Entra-appens registrering. Funksjonen getAccessToken() returnerer et delegert Microsoft Fabric-tilgangstoken for den innloggede Microsoft Entra-brukeren eller gir en feil hvis ingen bruker har logget inn.

Legg til en HTML-container for det innebygde Real-Time-dashbordet

Legg til et HTML-element der Fabric Embed SDK gjengir det Microsoft Fabric Real-Time dashbordet. Verdien id må samsvare med containeroppslaget i embed-koden. Og rolearia-label identifiser det innebygde dashbordområdet for skjermleserbrukere.

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

Konfigurer en tilgangstoken-leverandør for Fabric embed SDK-tokenoppdatering

Konfigurer tilgangstoken-leverandøren som Fabric Embed SDK bruker for å oppdatere delegerte Microsoft Fabric tilgangstokens for det innebygde Real-Time-dashbordet. Følgende eksempel implementerer accessTokenProvider ved å bruke funksjonen getAccessToken() .

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

Embed Real-Time Dashboard med Fabric embed SDK

Bruk Fabric Embed SDK for å gjengi Microsoft Fabric Real-Time-dashbordet i HTML-containeren. SDK-typene for offentlig forhåndsvisning i dette eksempelet bruker KQLDashboard* navn for Real-Time Dashboard-innbedding.

Embed-konfigurasjonen bruker disse verdiene.

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();

Bytt <real-time-dashboard-item-id> ut og <workspace-id>, inkludert vinkelbrakettene, med dine Fabric item og arbeidsplass-ID-er.

Når koden kjøres, gjengir SDK-en Real-Time-dashbordet i containeren og skriver Real-Time Dashboard rendered. til nettleserkonsollen.

Verifiser Microsoft Fabric Embed Real-Time dashbordet

SDK-en legger inn dashbordet på en vellykket måte når det vises i fabric-embed-container regionen og nettleserkonsollen logger Real-Time Dashboard rendered..

Hvis dashbordet ikke gjengår, bruk SDK-hendelsesdetaljene error og sjekk disse elementene.

Neste trinn

• Hva er Microsoft Fabric Embed?
• Sett opp miljøet ditt for Microsoft Fabric Embed
• Registrer et program i Microsoft Entra ID
• Hva er Real-Time intelligens i Microsoft Fabric?