บทช่วยสอน: ฝังรายงาน Power BI ในแอปพลิเคชันสําหรับองค์กรของคุณ

บทความ
12/22/2023

บทช่วยสอนนี้อธิบายวิธีการฝังรายงาน Power BI ในแอปพลิเคชัน .NET 5.0 ซึ่งเป็นส่วนหนึ่งของโซลูชันฝัง ตัวสําหรับองค์กรของคุณ (หรือที่เรียกว่า ผู้ใช้เป็นเจ้าของข้อมูล) ในโซลูชันฝัง ตัวสําหรับองค์กรของคุณ ผู้ใช้แอปของคุณต้องรับรองความถูกต้องกับ Power BI ด้วยข้อมูลประจําตัวของตนเอง

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีการฝังตัว:

รายงาน Power BI
ในแอปแบบฝังตัวสําหรับองค์กรของคุณ
การใช้ .NET 5.0
ด้วย Microsoft.Identity.Web ไลบรารี (ไลบรารีนี้ยังได้รับการสนับสนุนใน .NET Core)

หมายเหตุ

โซลูชันแบบเต็มที่ใช้ในบทช่วยสอนนี้พร้อมใช้งานจากที่เก็บข้อมูล GitHub ของ DOTNET5-UserOwnsData-Tutorial

ข้อกำหนดเบื้องต้น

สิทธิการใช้งาน Power BI Pro หรือ Premium Per User (PPU)

หมายเหตุ

โซลูชัน การฝังตัวสําหรับองค์กรของคุณ ไม่ได้รับการสนับสนุนตาม ความจุ ตาม A SKU A SKU สามารถใช้สําหรับโซลูชันการฝังตัวสําหรับลูกค้าของคุณเท่านั้น
พื้นที่ทํางาน Power BI พร้อมรายงาน
ผู้เช่า Microsoft Entra ของคุณเอง
แอป Microsoft Entra
แอป .NET Core 5 view controller (MVC)
.NET Core 5 SDK (หรือสูงกว่า)
สภาพแวดล้อมการพัฒนาแบบรวม (IDE) เราขอแนะนําให้ใช้หนึ่งในสภาพแวดล้อมต่อไปนี้:
- Visual Studio
- รหัส Visual Studio (ที่มี ส่วนขยาย C#)

แหล่งข้อมูล

ในบทช่วยสอนนี้ คุณใช้:

Power BI REST Reports API - เพื่อฝัง URL และเรียกใช้โทเค็นที่ฝัง
ไลบรารีการรับรองความถูกต้องของเว็บข้อมูลประจําตัวของ Microsoft
Api ไคลเอ็นต์ ของการวิเคราะห์แบบฝังตัวของ Power BI เพื่อฝังรายงาน

เมธอด

หากต้องการฝังเนื้อหา Power BI ในโซลูชันการ ฝังตัวสําหรับองค์กรของคุณ ให้ทําตามขั้นตอนเหล่านี้:

กําหนดค่าแอป Microsoft Entra ของคุณ
รับค่าพารามิเตอร์การฝัง
เพิ่มแพคเกจ NuGet ที่จําเป็น
เปิดใช้งานการรับรองความถูกต้องฝั่งเซิร์ฟเวอร์
สร้างฝั่งไคลเอ็นต์ของแอปของคุณ
เรียกใช้แอปพลิเคชันของคุณ

ขั้นตอนที่ 1 - กําหนดค่าแอป Microsoft Entra ของคุณ

เมื่อเว็บแอปของคุณเรียกใช้ Power BI คุณจําเป็นต้องมี โทเค็น Microsoft Entra เพื่อเรียกใช้ Power BI REST API และฝังรายการ Power BI เช่น รายงาน แดชบอร์ด หรือไทล์

ถ้าคุณไม่มีแอป Microsoft Entra ให้สร้างขึ้นโดยใช้คําแนะนําใน ลงทะเบียนแอปพลิเคชัน Microsoft Entra เพื่อใช้กับ Power BI

ในการกําหนดค่าแอป Microsoft Entra ของคุณ ให้ทําตามคําแนะนําใน กําหนดค่าแอป Microsoft Entra ของคุณ

ขั้นตอนที่ 2 - รับค่าพารามิเตอร์การฝัง

หากต้องการฝังรายงานของคุณ คุณจําเป็นต้องมีค่าต่อไปนี้:

โด เมน
รหัสผู้เช่า
รหัสไคลเอ็นต์
ข้อมูลลับของไคลเอ็นต์
ID พื้นที่ทํางาน
รหัสรายงาน

ID โดเมนและผู้เช่า

ถ้าคุณไม่ทราบโดเมนหรือ ID ผู้เช่าของคุณ ให้ดู ค้นหา ID ผู้เช่า Microsoft Entra และชื่อโดเมนหลัก

หมายเหตุ

เมื่อต้อง ฝังเนื้อหาสําหรับผู้ใช้ในผู้เช่า อื่น (ผู้ใช้ที่เป็นผู้เยี่ยมชม) คุณจําเป็นต้องปรับ authorityUri พารามิเตอร์

Client ID

หากต้องการรับ GUID สําหรับ ID ไคลเอ็นต์ (หรือที่เรียกว่า ID แอปพลิเคชัน) ให้ทําตามขั้นตอนเหล่านี้:

เข้าสู่ระบบ Microsoft Azure
ค้นหา การลงทะเบียนแอป และเลือกลิงก์ การลงทะเบียนแอป
เลือกแอป Microsoft Entra ที่คุณกําลังใช้เพื่อฝังเนื้อหา Power BI ของคุณ
จากส่วนภาพรวม ให้คัดลอก GUID สําหรับ ID แอปพลิเคชัน (ไคลเอนต์)

ข้อมูลลับของไคลเอ็นต์

หากต้องการรับข้อมูลลับไคลเอ็นต์ ให้ทําตามขั้นตอนเหล่านี้:

เข้าสู่ระบบ Microsoft Azure
ค้นหา การลงทะเบียนแอป และเลือกลิงก์ การลงทะเบียนแอป
เลือกแอป Microsoft Entra ที่คุณกําลังใช้เพื่อฝังเนื้อหา Power BI ของคุณ
ภายใต้ จัดการ เลือก ใบรับรองและข้อมูลลับ
ภายใต้ ข้อมูลลับไคลเอ็นต์ ให้เลือก ข้อมูลลับไคลเอ็นต์ใหม่
ในหน้าต่างป๊อปอัปเพิ่มข้อมูลลับไคลเอ็นต์ ให้คําอธิบายสําหรับข้อมูลลับของแอปพลิเคชันของคุณ เลือกเวลาที่ข้อมูลลับของแอปพลิเคชันจะหมดอายุ และเลือกเพิ่ม
จากส่วนข้อมูลลับไคลเอ็นต์ ให้คัดลอกสตริงในคอลัมน์ ค่า ของข้อมูลลับของแอปพลิเคชันที่สร้างขึ้นใหม่ ค่าข้อมูลลับไคลเอ็นต์คือ ID ไคลเอ็นต์ของคุณ

หมายเหตุ

ตรวจสอบให้แน่ใจว่าคุณคัดลอกค่าความลับของไคลเอ็นต์เมื่อปรากฏเป็นครั้งแรก หลังจากนําทางออกจากหน้านี้ ความลับของไคลเอ็นต์จะถูกซ่อนและคุณจะไม่สามารถเรียกใช้ค่าได้

ID พื้นที่ทำงาน

หากต้องการรับ GUID สําหรับ ID พื้นที่ทํางาน ให้ทําตามขั้นตอนเหล่านี้:

ลงชื่อเข้าใช้การบริการ Power BI
เปิดรายงานที่คุณต้องการฝัง
คัดลอก GUID จาก URL GUID คือตัวเลขระหว่าง /groups/ และ /reports/

หมายเหตุ

หากต้องการรับ ID พื้นที่ทํางานทางโปรแกรม ให้ใช้ API รับกลุ่ม

รหัสรายงาน

หากต้องการรับ GUID สําหรับ ID รายงาน ให้ทําตามขั้นตอนเหล่านี้:

ลงชื่อเข้าใช้การบริการ Power BI
เปิดรายงานที่คุณต้องการฝัง
คัดลอก GUID จาก URL GUID คือตัวเลขระหว่าง /reports/ และ /ReportSection

หมายเหตุ

หากต้องการรับ ID รายงานทางโปรแกรม ให้ใช้ API รับรายงานในกลุ่ม

ขั้นตอนที่ 3 - เพิ่มแพคเกจ NuGet ที่จําเป็น

ก่อนที่คุณจะเริ่มต้น คุณต้องเพิ่ม Microsoft.Identity.Webแพคเกจ , และ Microsoft.PowerBI.Api NuGet ไปยังแอปของคุณ

เพิ่มแพคเกจ NuGet ต่อไปนี้ลงในแอปของคุณ:

ใน รหัส VS เปิดเทอร์มินัลและพิมพ์ในโค้ดต่อไปนี้
ใน Visual studio ไปที่ เครื่องมือ>NuGet โปรแกรมจัดการชุดรวมแฟ้ม>โปรแกรมจัดการชุดรวมแฟ้ม Console แล้วพิมพ์โค้ดต่อไปนี้

dotnet add package Microsoft.Identity.Web -v 0.3.0-preview
dotnet add package Microsoft.Identity.Web.UI -v 0.3.0-preview
dotnet add package Microsoft.PowerBI.Api

ถ้าแอปของคุณเคยใช้ Microsoft.AspNetCore เพื่อรับรองความถูกต้องก่อนหน้านี้ ให้ลบแพคเกจนี้ออกจากโครงการของคุณโดยการพิมพ์:

dotnet remove package Microsoft.AspNetCore.Authentication.AzureAD.UI

ขั้นตอนที่ 4 - เปิดใช้งานการรับรองความถูกต้องฝั่งเซิร์ฟเวอร์

เปิดใช้งานการรับรองความถูกต้องฝั่งเซิร์ฟเวอร์ในแอปของคุณ โดยการสร้างหรือปรับเปลี่ยนไฟล์ในตารางต่อไปนี้

ไฟล์	ใช้
Startup.cs	เตรียม `Microsoft.Identity.Web` ใช้งานบริการการรับรองความถูกต้อง
appsettings.json	รายละเอียดการรับรองความถูกต้อง
PowerBiServiceApi.cs	รับโทเค็น Microsoft Entra และการฝังเมตาดาต้า
HomeController.cs	ส่งผ่านข้อมูลฝังตัวเป็นแบบจําลองไปยังมุมมอง

กําหนดค่าไฟล์เริ่มต้นของคุณให้สนับสนุน `Microsoft.Identity.Web`

ปรับเปลี่ยนโค้ดใน Startup.cs เพื่อเตรียมใช้งานบริการการรับรองความถูกต้องที่ให้มาโดย Microsoft.Identity.Webอย่างถูกต้อง

เพิ่มส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์ Startup.cs ของแอปของคุณ

หมายเหตุ

โค้ดนี้ ConfigureServices สามารถทําได้หลายสิ่งที่สําคัญ:

เรียกใช้เพื่อ AddMicrosoftWebAppCallsWebApi กําหนดค่าไลบรารีการรับรองความถูกต้องของ Microsoft เพื่อรับโทเค็นการเข้าถึง (โทเค็น Microsoft Entra)
การเรียกเพื่อ AddInMemoryTokenCaches กําหนดค่าแคชโทเค็นที่ไลบรารีการรับรองความถูกต้อง Microsoft จะใช้เพื่อแคชโทเค็นการเข้าถึงและรีเฟรชโทเค็นเบื้องหลัง
การเรียก เพื่อ services.AddScoped(typeof(PowerBiServiceApi)) กําหนดค่า PowerBiServiceApi คลาสเป็นคลาสบริการที่สามารถเพิ่มลงในคลาสอื่น ๆ โดยใช้การใส่การขึ้นต่อกัน

using Microsoft.Identity.Web;
using Microsoft.Identity.Web.TokenCacheProviders;
using Microsoft.Identity.Web.TokenCacheProviders.InMemory;
using Microsoft.Identity.Web.UI;
using UserOwnsData.Services;

namespace UserOwnsData {

  public class Startup {

    public Startup (IConfiguration configuration) {
      Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices (IServiceCollection services) {

      services
        .AddMicrosoftIdentityWebAppAuthentication(Configuration)
        .EnableTokenAcquisitionToCallDownstreamApi(PowerBiServiceApi.RequiredScopes)
        .AddInMemoryTokenCaches();

      services.AddScoped (typeof (PowerBiServiceApi));

      var mvcBuilder = services.AddControllersWithViews (options => {
        var policy = new AuthorizationPolicyBuilder()
          .RequireAuthenticatedUser()
          .Build();
        options.Filters.Add (new AuthorizeFilter (policy));
      });

      mvcBuilder.AddMicrosoftIdentityUI();

      services.AddRazorPages();

    }
  }
}

สร้างไฟล์รายละเอียดการรับรองความถูกต้อง

ใน appsettings.json บทช่วยสอนนี้ ไฟล์ประกอบด้วยข้อมูลที่สําคัญ เช่น ID ไคลเอ็นต์และข้อมูล ลับของไคลเอ็นต์ เพื่อเหตุผลด้านความปลอดภัย เราไม่แนะนําให้เก็บข้อมูลนี้ไว้ในไฟล์การตั้งค่า เมื่อทําการฝังในแอปพลิเคชันของคุณ ให้พิจารณาวิธีการที่ปลอดภัยมากขึ้น เช่น Azure Key Vault สําหรับการเก็บข้อมูลนี้

ในโครงการของคุณ สร้างไฟล์ใหม่และเรียกว่า appsettings.json

เพิ่มโค้ดต่อไปนี้ลงใน appsettings.json:

{
    "AzureAd": {
        "Instance": "https://login.microsoftonline.com/",
        "Domain": "",
        "TenantId": "",
        "ClientId": "",
        "ClientSecret": "",
        "CallbackPath": "/signin-oidc",
        "SignedOutCallbackPath": "/signout-callback-oidc"
    },
    "PowerBi": {
        "ServiceRootUrl": "https://api.powerbi.com"
    },
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft": "Warning",
            "Microsoft.Hosting.Lifetime": "Information"
        }
    },
    "AllowedHosts": "*"
}

กรอกค่าพารามิเตอร์การฝังที่ได้รับจาก ขั้นตอนที่ 2 - รับค่าพารามิเตอร์การฝัง
- Domain - ID โดเมนและผู้เช่า
- TenantId - ID โดเมนและผู้เช่า
- ClientId - รหัสไคลเอ็นต์
- ClientSecret - ข้อมูลลับของไคลเอ็นต์

หมายเหตุ

ในส่วนย่อยของPowerBi:ServiceRootUrlโค้ดก่อนหน้านี้ พารามิเตอร์จะถูกเพิ่มเป็นค่าการกําหนดค่าแบบกําหนดเองเพื่อติดตาม URL พื้นฐานไปยังบริการของ Power BI เมื่อเขียนโปรแกรมเทียบกับบริการของ Power BI ในระบบคลาวด์สาธารณะของ Microsoft URL คือhttps://api.powerbi.com/ อย่างไรก็ตาม URL รากสําหรับบริการของ Power BI จะแตกต่างกันในระบบคลาวด์อื่นๆ เช่น ระบบคลาวด์ของภาครัฐ ดังนั้น ค่านี้จะถูกจัดเก็บเป็นค่าการกําหนดค่าโครงการเพื่อให้ง่ายต่อการเปลี่ยนแปลงเมื่อจําเป็น

รับโทเค็นการเข้าถึง Microsoft Entra และเรียกใช้บริการของ Power BI

เมื่อต้องฝังเนื้อหา Power BI (เช่นรายงานและแดชบอร์ด) แอปของคุณต้องได้รับ โทเค็น Microsoft Entra เพื่อรับโทเค็น คุณจําเป็นต้องมี วัตถุการกําหนดค่า

โค้ดในส่วนนี้ใช้รูปแบบการใส่การขึ้นต่อกันของ .NET Core เมื่อคลาสของคุณต้องการใช้บริการ คุณสามารถเพิ่มพารามิเตอร์คอนสตรักเตอร์สําหรับบริการดังกล่าวและรันไทม์ .NET Core จะดูแลการส่งผ่านอินสแตนซ์ของบริการในขณะทํางาน ในกรณีนี้ คอนสตรักเตอร์จะใส่อินสแตนซ์ของบริการการกําหนดค่า .NET Core โดยใช้IConfigurationพารามิเตอร์ ซึ่งถูกใช้เพื่อดึงPowerBi:ServiceRootUrlค่าการกําหนดค่าจาก appsettings.json พารามิเตอร์ ITokenAcquisition ซึ่งมีชื่อ tokenAcquisition ว่า เก็บการอ้างอิงไปยังบริการการรับรองความถูกต้องของ Microsoft ที่ให้ Microsoft.Identity.Web ไว้โดยไลบรารี และใช้เพื่อรับโทเค็นการเข้าถึงจาก Microsoft Entra ID

เขตข้อมูลRequiredScopesจะเก็บอาร์เรย์สตริงที่ประกอบด้วยชุดสิทธิ์ที่ได้รับการสนับสนุนโดย บริการของ Power BI API เมื่อแอปพลิเคชันของคุณเรียกใช้ข้ามเครือข่ายเพื่อรับโทเค็น Microsoft Entra จะส่งผ่านชุดสิทธิ์ที่ได้รับมอบสิทธิ์นี้เพื่อให้ Microsoft Entra ID สามารถรวมไว้ในโทเค็นการเข้าถึงที่ส่งกลับมาได้

หมายเหตุ

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

ในโครงการของแอปของคุณ สร้างโฟลเดอร์ใหม่ที่ชื่อว่า บริการ
ในโฟลเดอร์ บริการ สร้างไฟล์ใหม่ที่ชื่อว่า PowerBiServiceApi.cs

เพิ่มรหัสต่อไปนี้ลงใน PowerBiServiceApi.cs

using Microsoft.Identity.Web;
using Microsoft.PowerBI.Api;
using Microsoft.PowerBI.Api.Models;
using Microsoft.Rest;
using Newtonsoft.Json;

namespace UserOwnsData.Services {

  // A view model class to pass the data needed to embed a single report.
  public class EmbeddedReportViewModel {
     public string Id;
     public string Name;
     public string EmbedUrl;
     public string Token;
  }

public class PowerBiServiceApi {
     private ITokenAcquisition tokenAcquisition { get; }
     private string urlPowerBiServiceApiRoot { get; }

     public PowerBiServiceApi(IConfiguration configuration, ITokenAcquisition tokenAcquisition) {
         this.urlPowerBiServiceApiRoot = configuration["PowerBi:ServiceRootUrl"];
         this.tokenAcquisition = tokenAcquisition;
     }

     public static readonly string[] RequiredScopes = new string[] {
         "https://analysis.windows.net/powerbi/api/Report.Read.All"
     };

    // A method to get the Azure AD token (also known as 'access token')
     public string GetAccessToken() {
         return this.tokenAcquisition.GetAccessTokenForUserAsync(RequiredScopes).Result;
     }

     public PowerBIClient GetPowerBiClient() {
         var tokenCredentials = new TokenCredentials(GetAccessToken(), "Bearer");
         return new PowerBIClient(new Uri(urlPowerBiServiceApiRoot), tokenCredentials);
     }

     public async Task<EmbeddedReportViewModel> GetReport(Guid WorkspaceId, Guid ReportId) {
         PowerBIClient pbiClient = GetPowerBiClient();
         // Call the Power BI Service API to get embedding data
   var report = await pbiClient.Reports.GetReportInGroupAsync(WorkspaceId, ReportId);

   // Return report embedding data to caller
   return new EmbeddedReportViewModel {
    Id = report.Id.ToString(),
    EmbedUrl = report.EmbedUrl,
    Name = report.Name,
    Token = GetAccessToken()
   };
  }

 }

}

ปรับเปลี่ยนไฟล์ HomeController.cs

ในตัวอย่างรหัสนี้ คุณใช้การฉีดแบบขึ้นต่อกัน เมื่อคุณลงทะเบียน PowerBiServiceApi คลาสเป็นบริการโดยการเรียก services.AddScoped ใน ConfigureServices วิธีการ คุณสามารถเพิ่ม PowerBiServiceApi พารามิเตอร์ไปยังคอนสตรักเตอร์ ได้ และรันไทม์ .NET Core จะดูแลการสร้าง PowerBiServiceApi อินสแตนซ์และส่งผ่านไปยังคอนสตรักเตอร์

จากโฟลเดอร์ Controllers ให้เปิดไฟล์ HomeController.cs และเพิ่มลงในส่วนย่อยของโค้ดต่อไปนี้:

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using UserOwnsData.Models;
using UserOwnsData.Services;

namespace UserOwnsData.Controllers {
    [Authorize]
    public class HomeController : Controller {

        private PowerBiServiceApi powerBiServiceApi;

        public HomeController (PowerBiServiceApi powerBiServiceApi) {
            this.powerBiServiceApi = powerBiServiceApi;
        }

        [AllowAnonymous]
        public IActionResult Index() {
            return View();
        }

        public async Task<IActionResult> Embed() {
            Guid workspaceId = new Guid("11111111-1111-1111-1111-111111111111");
            Guid reportId = new Guid("22222222-2222-2222-2222-222222222222");
            var viewModel = await powerBiServiceApi.GetReport(workspaceId, reportId);
            return View(viewModel);
        }

        [AllowAnonymous]
        [ResponseCache (Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error() {
            return View (new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

ขั้นตอนที่ 5 - สร้างฝั่งลูกค้าของแอปของคุณ

สําหรับการใช้งานฝั่งไคลเอ็นต์ คุณจําเป็นต้องสร้างหรือปรับเปลี่ยนไฟล์ในตารางต่อไปนี้

ไฟล์	ใช้
embed.js	ประกอบด้วยรหัส JavaScript ฝั่งไคลเอ็นต์
Embed.cshtml	ประกอบด้วยแบบจําลองออบเจ็กต์เอกสารของแอปของคุณ (DOM) และ DIV สําหรับการฝังรายงาน

สร้างคอนเทนเนอร์สําหรับรายงานแบบฝังตัวของคุณ

สร้างไฟล์ Embed.cshtml ซึ่งมีdivองค์ประกอบที่ใช้เป็นคอนเทนเนอร์สําหรับรายงานแบบฝังตัวของคุณ และสามสคริปต์

ในโฟลเดอร์ ดู>หน้าแรก ให้สร้างไฟล์ที่เรียกว่า Embed.cshtml

เพิ่มส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์ Embed.cshtml

@model UserOwnsData.Services.EmbeddedReportViewModel;

<div id="embed-container" style="height:800px;"></div>

@section Scripts {

    <!-- powerbi.min.js is the JavaScript file that loads the client-side Power BI JavaScript API library.
    Make sure that you're working with the latest library version.
    You can check the latest library available in https://cdnjs.com/libraries/powerbi-client -->
    <script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.21.0/dist/powerbi.min.js"></script>

    <!-- This script creates a JavaScript object named viewModel which is accessible to the JavaScript code in embed.js. -->
    <script> 
        var viewModel = {
            reportId: "@Model.Id",
            embedUrl: "@Model.EmbedUrl",
            token: "@Model.Token"
        }; 
    </script>

    <!-- This script specifies the location of the embed.js file -->
    <script src="~/js/embed.js"></script>
}

เพิ่ม JavaScript ฝั่งไคลเอ็นต์เพื่อฝังรายงานของคุณ

เมื่อต้องฝังเนื้อหา Power BI คุณจําเป็นต้องสร้างวัตถุกําหนดค่า เมื่อต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างวัตถุกําหนดค่า ดูที่ฝังรายงาน

ในส่วนนี้ คุณสร้างไฟล์ JavaScript ที่ชื่อ embed.js ด้วยออบเจ็กต์การกําหนดค่าสําหรับการฝังรายงานของคุณโดยใช้ตัวแปรmodels

modelsถูกเตรียมใช้งานโดยใช้การเรียก ไปยังwindow['powerbi-client'].models ตัวแปร models จะถูกใช้เพื่อตั้งค่าโครงแบบ เช่น models.Permissions.All, models.TokenType.Aadและmodels.ViewMode.View

ฟังก์ชัน powerbi.embed นี้ใช้ models วัตถุการกําหนดค่าเพื่อฝังรายงานของคุณ

ในโฟลเดอร์ wwwroot>js สร้างไฟล์ที่เรียกว่า embed.js

เพิ่มส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์ embed.js

$(function(){
    // 1 - Get DOM object for div that is report container
    let reportContainer = document.getElementById("embed-container");

    // 2 - Get report embedding data from view model
    let reportId = window.viewModel.reportId;
    let embedUrl = window.viewModel.embedUrl;
    let token = window.viewModel.token

    // 3 - Embed report using the Power BI JavaScript API.
    let models = window['powerbi-client'].models;
    let config = {
        type: 'report',
        id: reportId,
        embedUrl: embedUrl,
        accessToken: token,
        permissions: models.Permissions.All,
        tokenType: models.TokenType.Aad,
        viewMode: models.ViewMode.View,
        settings: {
            panes: {
                filters: { expanded: false, visible: true },
                pageNavigation: { visible: false }
            }
        }
    };

    // Embed the report and display it within the div container.
    let report = powerbi.embed(reportContainer, config);

    // 4 - Add logic to resize embed container on window resize event
    let heightBuffer = 12;
    let newHeight = $(window).height() - ($("header").height() + heightBuffer);
    $("#embed-container").height(newHeight);
    $(window).resize(function() {
        var newHeight = $(window).height() - ($("header").height() + heightBuffer);
        $("#embed-container").height(newHeight);
    });

});

ขั้นตอนที่ 6 - เรียกใช้แอปพลิเคชันของคุณ

หลังจากที่คุณได้ทําการปรับปรุงทั้งหมดที่แสดงในบทช่วยสอนนี้แล้ว คุณก็พร้อมที่จะเรียกใช้แอปพลิเคชันของคุณ ใช้แอปพลิเคชันของคุณและทดลองใช้วิธีการฝังรายงาน Power BI ของคุณ คุณสามารถใช้ Api ไคลเอ็นต์ของการวิเคราะห์แบบฝังตัวของ Power BI เพื่อปรับปรุงแอปของคุณโดยใช้ API ฝั่งไคลเอ็นต์

เมื่อแอปของคุณพร้อมแล้ว คุณสามารถ ย้ายแอปแบบฝังตัวของคุณไปยังการผลิตได้

โทเค็นแอปพลิเคชันการวิเคราะห์แบบฝังตัว

ย้ายแอปแบบฝังตัวของคุณไปยังการผลิต

ความจุและ SKU ในการวิเคราะห์แบบฝังตัวของ Power BI

ความจุวางแผนในการวิเคราะห์แบบฝังตัวของ Power BI

บทช่วยสอน: ฝังรายงาน Power BI ในแอปพลิเคชันสําหรับองค์กรของคุณ

ข้อกำหนดเบื้องต้น

แหล่งข้อมูล

เมธอด

ขั้นตอนที่ 1 - กําหนดค่าแอป Microsoft Entra ของคุณ

ขั้นตอนที่ 2 - รับค่าพารามิเตอร์การฝัง

ID โดเมนและผู้เช่า

Client ID

ข้อมูลลับของไคลเอ็นต์

ID พื้นที่ทำงาน

รหัสรายงาน

ขั้นตอนที่ 3 - เพิ่มแพคเกจ NuGet ที่จําเป็น

ขั้นตอนที่ 4 - เปิดใช้งานการรับรองความถูกต้องฝั่งเซิร์ฟเวอร์

กําหนดค่าไฟล์เริ่มต้นของคุณให้สนับสนุน `Microsoft.Identity.Web`

สร้างไฟล์รายละเอียดการรับรองความถูกต้อง

รับโทเค็นการเข้าถึง Microsoft Entra และเรียกใช้บริการของ Power BI

ปรับเปลี่ยนไฟล์ HomeController.cs

ขั้นตอนที่ 5 - สร้างฝั่งลูกค้าของแอปของคุณ

สร้างคอนเทนเนอร์สําหรับรายงานแบบฝังตัวของคุณ

เพิ่ม JavaScript ฝั่งไคลเอ็นต์เพื่อฝังรายงานของคุณ

ขั้นตอนที่ 6 - เรียกใช้แอปพลิเคชันของคุณ

คำติชม

คำติชม

แหล่งทรัพยากรเพิ่มเติม

บทช่วยสอน: ฝังรายงาน Power BI ในแอปพลิเคชันสําหรับองค์กรของคุณ

ข้อกำหนดเบื้องต้น

แหล่งข้อมูล

เมธอด

ขั้นตอนที่ 1 - กําหนดค่าแอป Microsoft Entra ของคุณ

ขั้นตอนที่ 2 - รับค่าพารามิเตอร์การฝัง

ID โดเมนและผู้เช่า

Client ID

ข้อมูลลับของไคลเอ็นต์

ID พื้นที่ทำงาน

รหัสรายงาน

ขั้นตอนที่ 3 - เพิ่มแพคเกจ NuGet ที่จําเป็น

ขั้นตอนที่ 4 - เปิดใช้งานการรับรองความถูกต้องฝั่งเซิร์ฟเวอร์

กําหนดค่าไฟล์เริ่มต้นของคุณให้สนับสนุน Microsoft.Identity.Web

สร้างไฟล์รายละเอียดการรับรองความถูกต้อง

รับโทเค็นการเข้าถึง Microsoft Entra และเรียกใช้บริการของ Power BI

ปรับเปลี่ยนไฟล์ HomeController.cs

ขั้นตอนที่ 5 - สร้างฝั่งลูกค้าของแอปของคุณ

สร้างคอนเทนเนอร์สําหรับรายงานแบบฝังตัวของคุณ

เพิ่ม JavaScript ฝั่งไคลเอ็นต์เพื่อฝังรายงานของคุณ

ขั้นตอนที่ 6 - เรียกใช้แอปพลิเคชันของคุณ

เนื้อหาที่เกี่ยวข้อง

คำติชม

คำติชม

แหล่งทรัพยากรเพิ่มเติม

กําหนดค่าไฟล์เริ่มต้นของคุณให้สนับสนุน `Microsoft.Identity.Web`