Pikakäynnistys Microsoft Fabric Embediin

Tässä Pikakäynnistyksessä käytät Fabric Embediä lisätäksesi Microsoft Fabric Real-Time Dashboardin selainpohjaiseen JavaScript- tai TypeScript-verkkosovellukseen. Fabric Embedin avulla sovelluksesi voi näyttää hallintapaneelin, kun käyttäjät käyttävät sitä Microsoft Entra ID -identiteettinsä ja delegoitujen käyttöoikeuksien avulla.

Sovellus käyttää Microsoft Authentication Library for JavaScript (MSAL.js) pyytääkseen delegoitua pääsytunnusta Microsoft Fabric API-resurssille ja Fabric Embed SDK:ta dashboardin renderöintiin. Kun lopetat, sovelluksesi näyttää Real-Time Dashboardin ilman, että käyttäjiä ohjataan Fabric-portaaliin.

Edellytykset Real-Time Dashboardin upottamiselle

Ennen kuin aloitat, suorita Aseta ympäristösi Microsoft Fabric Embedille. Tämä asetus luo tai vahvistaa Microsoft Entra -sovelluksen rekisteröinnin, delegoidut käyttöoikeudet, Microsoft Fabric -työtilan, aktiivisen Fabric-kapasiteetin ja dashboard-arvot, joita tämä pikakäynnistys käyttää.

Tarvitset myös seuraavat arvot ja käyttöoikeudet.

Asenna MSAL.js ja Fabric embed SDK

Asenna web-sovelluksen projektikansiosta asiakaspuolen paketit, joita tämä pikakäynnistys käyttää.

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

Jos esikatseluohjeet sisältävät versiokohtaisen Fabric Embed SDK -paketin komennon, käytä tätä komentoa paketille@microsoft/fabric-embed. Asennuksen jälkeen varmista, että package.json listat @azure/msal-browser ja @microsoft/fabric-embed .dependencies

Määritä Microsoft Entra -todennus Microsoft Fabric Embedille

MSAL.js (@azure/msal-browser) kirjautuu käyttäjän sisään ja saa delegoidun käyttöoikeustunnuksen Microsoftin käyttäjätietoympäristö:ltä .https://api.fabric.microsoft.com Scope .default pyytää Microsoft Entra ID:ltä delegoituja Fabric-käyttöoikeuksia, joihin olet jo suostunut sovelluksen rekisteröintiin, mukaan lukien Fabric.Embed ja Item.Read.All.

Lisätietoja löytyy Microsoft Authentication Library (MSAL) -yleiskatsauksesta.

Lisää tämä koodi sovelluksesi asiakaspuolen todennustiedostoon tai moduuliin ennen kuin upotuskoodi kutsuu 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;
}

Korvaa <client-id> ja <tenant-id>, mukaan lukien kulmasulkeet, Microsoft Entra -sovelluksen rekisteröinnin arvoilla. Funktio getAccessToken() palauttaa delegoidun Microsoft Fabric access -tunnisteen kirjautuneelle Microsoft Entra-käyttäjälle tai antaa virheen, jos kukaan käyttäjä ei ole kirjautunut sisään.

Lisää HTML-kontti upotetulle Real-Time Dashboardille

Lisää HTML-elementti, johon Fabric Embed SDK renderöi Microsoft Fabric Real-Time Dashboardin. Arvon id on vastattava upotuskoodin konttihakua. Ja rolearia-label tunnista upotetun kojelaudan alue ruudunlukijakäyttäjille.

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

Määritä pääsytunnuspalveluntarjoaja Fabric embed SDK -tokenin päivitystä varten

Määritä pääsytunnusen tarjoaja, jota Fabric Embed SDK käyttää delegoitujen Microsoft Fabric pääsytunnusten päivittämiseen upotetulle Real-Time Dashboardille. Seuraava esimerkki toteutetaan accessTokenProvider käyttämällä funktiota getAccessToken() .

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

Upota Real-Time Dashboard Fabric embed SDK:n kanssa

Käytä Fabric Embed SDK:ta renderöidäksesi Microsoft Fabric Real-Time Dashboardin HTML-kontissa. Tämän esimerkin julkisen esikatselun SDK-tyypit käyttävät KQLDashboard* nimiä Real-Time Dashboardin upotukseen.

Embed-konfiguraatio käyttää näitä arvoja.

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

Korvaa <real-time-dashboard-item-id> ja <workspace-id>, mukaan lukien kulmakiinnikkeet, Fabric-esineesi ja työtilan tunnisteilla.

Kun koodi käynnistyy, SDK renderöi Real-Time Dashboardin kontissa ja kirjoittaa Real-Time Dashboard rendered. selaimen konsoliin.

Vahvista Microsoft Fabric Embed Real-Time Dashboard

SDK upottaa hallintapaneelin onnistuneesti, kun se ilmestyy alueelle fabric-embed-container ja selainkonsoli kirjaa Real-Time Dashboard rendered..

Jos hallintapaneeli ei renderöidy, käytä SDK-tapahtumatietoja error ja tarkista nämä kohteet.

Seuraavat vaiheet

• Mikä on Microsoft Fabric Embed?
• Aseta ympäristösi Microsoft Fabric Embedille
• Sovelluksen rekisteröiminen Microsoft Entra -tunnukseen
• Mikä on Real-Time tiedustelu Microsoft Fabric?