เริ่มต้นใช้งานด่วนสําหรับ Microsoft Fabric Embed

ในการเริ่มต้นใช้งานด่วนนี้ คุณใช้ Fabric Embed เพื่อเพิ่มแดชบอร์ด Microsoft Fabric Real-Time ไปยังเว็บแอป JavaScript หรือ TypeScript บนเบราว์เซอร์ เมื่อใช้ Fabric Embed แอปของคุณสามารถแสดงแดชบอร์ดในขณะที่ผู้ใช้เข้าถึงโดยใช้ข้อมูลประจําตัว Microsoft Entra ID และสิทธิ์ที่ได้รับมอบหมาย

แอปใช้ Microsoft Authentication Library for JavaScript (MSAL.js) เพื่อร้องขอโทเค็นการเข้าถึงที่ได้รับมอบหมายสําหรับทรัพยากร Microsoft Fabric API และ Fabric Embed SDK เพื่อแสดงแดชบอร์ด เมื่อคุณทําเสร็จแล้ว แอปของคุณจะแสดงแดชบอร์ด Real-Time โดยไม่ต้องส่งผู้ใช้ไปยังพอร์ทัล Fabric

ข้อกําหนดเบื้องต้นสําหรับการฝังแดชบอร์ด Real-Time

ก่อนที่คุณจะเริ่ม ให้กรอก ตั้งค่าสภาพแวดล้อมของคุณสําหรับ Microsoft Fabric Embed การตั้งค่านั้นสร้างหรือยืนยันการลงทะเบียนแอป Microsoft Entra, สิทธิ์ที่ได้รับมอบหมาย, พื้นที่ทํางาน Microsoft Fabric, ความจุ Fabric ที่ใช้งานอยู่ และค่าแดชบอร์ดที่การเริ่มต้นใช้งานด่วนนี้ใช้

คุณต้องมีค่าและสิทธิ์ต่อไปนี้ด้วย

ติดตั้ง MSAL.js และ SDK ฝังตัว Fabric

จากโฟลเดอร์โครงการเว็บแอป ให้ติดตั้งแพคเกจฝั่งไคลเอ็นต์ที่การเริ่มต้นใช้งานด่วนนี้ใช้

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

หากคําแนะนําการเตรียมความพร้อมตัวอย่างของคุณมีคําสั่งแพ็คเกจ Fabric Embed SDK เฉพาะรุ่น ให้ใช้คําสั่งนั้นสําหรับ@microsoft/fabric-embedแพ็คเกจ หลังการติดตั้ง ให้ยืนยันว่าpackage.jsonรายการ@azure/msal-browserและ@microsoft/fabric-embedในdependencies

กําหนดค่าการรับรองความถูกต้องของ Microsoft Entra สําหรับ Microsoft Fabric Embed

MSAL.js (@azure/msal-browser) ลงชื่อเข้าใช้ผู้ใช้และรับโทเค็นการเข้าถึงที่ได้รับมอบหมายจาก แพลตฟอร์มข้อมูลประจำตัวของ Microsoft https://api.fabric.microsoft.comสําหรับ .defaultขอบเขตจะขอ Microsoft Entra ID สําหรับสิทธิ์ Fabric ที่ได้รับมอบหมายซึ่งคุณยินยอมไว้แล้วสําหรับการลงทะเบียนแอป รวมถึง Fabric.Embed และItem.Read.All

สําหรับข้อมูลเพิ่มเติม โปรดดู ภาพรวมของ 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 Fabric ที่ได้รับมอบหมายสําหรับผู้ใช้ Microsoft Entra ที่ลงชื่อเข้าใช้ หรือแสดงข้อผิดพลาดหากไม่มีผู้ใช้ลงชื่อเข้าใช้

เพิ่มคอนเทนเนอร์ HTML สําหรับแดชบอร์ด Real-Time แบบฝังตัว

เพิ่มองค์ประกอบ HTML ที่ Fabric Embed SDK แสดงแดชบอร์ด Microsoft Fabric Real-Time idค่าต้องตรงกับการค้นหาคอนเทนเนอร์ในโค้ดฝังตัว และrolearia-labelระบุขอบเขตแดชบอร์ดแบบฝังสําหรับผู้ใช้โปรแกรมอ่านหน้าจอ

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

กําหนดค่าผู้ให้บริการโทเค็นการเข้าถึงสําหรับการรีเฟรชโทเค็น SDK แบบฝังตัวของ Fabric

กําหนดค่าผู้ให้บริการโทเค็นการเข้าถึงที่ Fabric Embed SDK ใช้เพื่อรีเฟรชโทเค็นการเข้าถึง Microsoft Fabric ที่ได้รับมอบหมายสําหรับแดชบอร์ด Real-Time แบบฝัง ตัวอย่างต่อไปนี้ใช้ accessTokenProvider โดยใช้ getAccessToken() ฟังก์ชัน

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

ฝังแดชบอร์ด Real-Time ด้วย SDK แบบฝังตัวของ Fabric

ใช้ Fabric Embed SDK เพื่อแสดงแดชบอร์ด Microsoft Fabric Real-Time ในคอนเทนเนอร์ HTML ชนิด SDK ตัวอย่างสาธารณะในตัวอย่างนี้ใช้ KQLDashboard* ชื่อสําหรับการฝังแดชบอร์ด Real-Time

การกําหนดค่าแบบฝังจะใช้ค่าเหล่านี้

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

แทนที่ <real-time-dashboard-item-id> และ <workspace-id>รวมถึงวงเล็บเหลี่ยมมุม ด้วยไอเท็ม Fabric และรหัสพื้นที่ทํางานของคุณ

เมื่อโค้ดทํางาน SDK จะแสดงแดชบอร์ด Real-Time ในคอนเทนเนอร์และเขียน Real-Time Dashboard rendered. ไปยังคอนโซลเบราว์เซอร์

ตรวจสอบแดชบอร์ด Real-Time ฝังตัว Microsoft Fabric

SDK ฝังแดชบอร์ดได้สําเร็จเมื่อปรากฏใน fabric-embed-container ภูมิภาคและบันทึก Real-Time Dashboard rendered.คอนโซลเบราว์เซอร์

หากแดชบอร์ดไม่แสดงผล ให้ใช้รายละเอียดเหตุการณ์ SDK error และตรวจสอบรายการเหล่านี้

ขั้นตอนถัดไป

• Microsoft Fabric Embed คืออะไร
• ตั้งค่าสภาพแวดล้อมของคุณสําหรับ Microsoft Fabric Embed
• ลงทะเบียนแอปพลิเคชันใน Microsoft Entra ID
• Real-Time Intelligence ใน Microsoft Fabric คืออะไร?