Kurz: Vložení sestavy Power BI do aplikace pro vaši organizaci

Tento kurz vysvětluje, jak vložit sestavu Power BI do aplikace .NET 5.0 jako součást vložení pro vaši organizaci (označované také jako řešení data patří uživateli). Při využití řešení vložení pro vaši organizaci musí uživatelé vaší aplikace provést ověření pomocí Power BI s využitím vlastních přihlašovacích údajů.

V tomto kurzu se dozvíte, jak vložit:

  • Sestava Power BI
  • Vložení pro aplikaci vaší organizace
  • Použití .NET 5.0
  • S knihovnou Microsoft.Identity.Web (tato knihovna se podporuje také v .NET Core)

Poznámka:

Úplné řešení použité v tomto kurzu je dostupné v úložišti GitHubu DOTNET5-UserOwnsData-Tutorial .

Požadavky

Zdroje informací

V tomto kurzu použijete:

metoda

Pokud chcete vložit obsah Power BI do řešení pro vložení pro vaši organizaci , postupujte takto:

  1. Konfigurace aplikace Microsoft Entra
  2. Získání hodnot parametrů vkládání
  3. Přidání požadovaných balíčků NuGet
  4. Povolení ověřování na straně serveru
  5. Sestavení klientské strany aplikace
  6. Spuštění aplikace

Krok 1 : Konfigurace aplikace Microsoft Entra

Když webová aplikace volá Power BI, potřebuje token Microsoft Entra pro volání rozhraní REST API Power BI a vložení položek Power BI, jako jsou sestavy, řídicí panely nebo dlaždice.

Pokud nemáte aplikaci Microsoft Entra, vytvořte ji podle pokynů v části Registrace aplikace Microsoft Entra pro použití s Power BI.

Pokud chcete nakonfigurovat aplikaci Microsoft Entra, postupujte podle pokynů v části Konfigurace aplikace Microsoft Entra.

Krok 2 – získání hodnot vložených parametrů

K vložení vašeho reportu potřebujete následující hodnoty:

ID domény a tenanta

Pokud neznáte svoji doménu nebo ID tenanta, přečtěte si téma Vyhledání ID tenanta Microsoft Entra a název primární domény.

Poznámka:

Pokud chcete vložit obsah pro uživatele do jiného tenanta (uživatele typu host), musíte upravit authorityUri parametr.

ID klienta

Pokud chcete získat identifikátor GUID ID klienta (označovaný také jako ID aplikace), postupujte takto:

  1. Přihlaste se k Microsoft Azure.

  2. Vyhledejte Registrace aplikací a vyberte odkaz Registrace aplikací.

  3. Vyberte aplikaci Microsoft Entra, kterou používáte pro vložení obsahu Power BI.

  4. V části Přehled zkopírujte identifikátor GUID ID aplikace (klienta).

Tajný klíč klienta

Klientské tajemství získáte takto:

  1. Přihlaste se k Microsoft Azure.

  2. Vyhledejte Registrace aplikací a vyberte odkaz Registrace aplikací.

  3. Vyberte aplikaci Microsoft Entra, kterou používáte pro vložení obsahu Power BI.

  4. V části Spravovat vyberte Certifikáty a tajné kódy.

  5. V části Tajné kódy klienta vyberte Nový tajný klíč klienta.

  6. V automaticky otevírané okně Přidat tajný klíč klienta zadejte popis tajného kódu aplikace, vyberte, kdy vyprší platnost tajného kódu aplikace, a vyberte Přidat.

  7. V části Tajné kódy klienta zkopírujte řetězec ve sloupci Hodnota nově vytvořeného tajného kódu aplikace. Hodnota tajného klíče klienta je VAŠE ID klienta.

Poznámka:

Ujistěte se, že zkopírujete hodnotu tajného klíče klienta, jakmile se poprvé objeví. Po přechodu mimo tuto stránku bude tajný klíč klienta skrytý a nebudete moct načíst jeho hodnotu.

ID pracovního prostoru

Pokud chcete získat identifikátor GUID ID pracovního prostoru, postupujte takto:

  1. Přihlaste se ke službě Power BI.

  2. Otevřete sestavu, kterou chcete vložit.

  3. Zkopírujte identifikátor GUID z adresy URL. Identifikátor GUID je číslo mezi /groups/ a /reports/.

    Snímek obrazovky znázorňující GUID ID pracovního prostoru v adrese URL služby Power BI

Poznámka:

K získání ID pracovního prostoru programově použijte Get Groups API.

ID sestavy

Pokud chcete získat identifikátor GUID sestavy, postupujte takto:

  1. Přihlaste se ke službě Power BI.

  2. Otevřete sestavu, kterou chcete vložit.

  3. Zkopírujte identifikátor GUID z adresy URL. Identifikátor GUID je číslo mezi /reports/ a /ReportSection.

    Snímek obrazovky znázorňující identifikátor GUID sestavy v URL služby Power BI

Poznámka:

Id sestavy můžete získat programaticky pomocí rozhraní API "Get Reports In Group".

Krok 3 : Přidání požadovaných balíčků NuGet

Než začnete, musíte do aplikace přidat balíčky NuGet Microsoft.Identity.Web a Microsoft.PowerBI.Api.

Do aplikace přidejte následující balíčky NuGet:

  • Ve VS Code otevřete terminál a zadejte následující kód.

  • V aplikaci Visual Studio přejděte na Nástroje>Správce balíčků NuGet>Konzole správce balíčků a zadejte následující kód.

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

Pokud se vaše aplikace dříve používala Microsoft.AspNetCore k ověření, odeberte tento balíček z projektu zadáním:

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

Krok 4 – Povolení ověřování na straně serveru

Povolte ověřování na straně serveru v aplikaci vytvořením nebo úpravou souborů v následující tabulce.

Soubor Používání
Startup.cs Inicializujte Microsoft.Identity.Web ověřovací službu
appsettings.json Podrobnosti o ověřování
PowerBiServiceApi.cs Získání tokenu Microsoft Entra a vkládání metadat
HomeController.cs Předat data vkládání jako model do zobrazení

Konfigurace spouštěcího souboru pro podporu Microsoft.Identity.Web

Upravte kód v Startup.cs tak, aby správně inicializoval ověřovací službu poskytovanou Microsoft.Identity.Web.

Do souboru Startup.cs vaší aplikace přidejte následující fragment kódu.

Poznámka:

Kód v ConfigureServices dosahuje několika důležitých úkolů:

  1. Volání AddMicrosoftWebAppCallsWebApi konfiguruje knihovnu Microsoft Authentication Library k získání přístupových tokenů (tokenů Microsoft Entra).
  2. Volání AddInMemoryTokenCaches konfiguruje mezipaměť tokenů, kterou Microsoft Authentication Library používá pro ukládání přístupových a obnovovacích tokenů na pozadí.
  3. Volání services.AddScoped(typeof(PowerBiServiceApi)) konfiguruje PowerBiServiceApi třídu jako služební třídu, kterou lze přidat do jiných tříd pomocí injektování závislostí.
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();

    }
  }
}

Vytvoření souboru s podrobnostmi o ověřování

Soubor v tomto kurzu obsahuje citlivé informace, jako je ID klienta a tajný klíč klienta. Z bezpečnostních důvodů nedoporučujeme tyto informace uchovávat v souboru nastavení. Při vkládání do aplikace zvažte bezpečnější metodu, jako je Azure Key Vault , která tyto informace uchovává.

  1. V projektu vytvořte nový soubor a zavolejte ho appsettings.json.

  2. Do appsettings.json přidejte následující kód:

    {
    "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": "*"
}

  3. Vyplňte hodnoty vložených parametrů získané z kroku 2 – Získání hodnot vložených parametrů.

Poznámka:

V předchozím fragmentu kódu je parametr PowerBi:ServiceRootUrl přidán jako vlastní konfigurační hodnota ke sledování výchozí adresy URL služby Power BI. Při programování se službou Power BI ve veřejném cloudu Microsoftu je adresa URL https://api.powerbi.com/. Kořenová adresa URL služba Power BI se ale bude lišit v jiných cloudech, jako je cloud státní správy. Proto je tato hodnota uložena jako hodnota konfigurace projektu, takže je v případě potřeby snadné ji změnit.

Získání přístupového tokenu Microsoft Entra a volání služby Power BI

Aby bylo možné vkládat obsah Power BI (například sestavy a řídicí panely), musí vaše aplikace získat token Microsoft Entra. K získání tokenu potřebujete objekt konfigurace.

Kód v této části používá model injektáže závislostí .NET Core. Pokud vaše třída potřebuje použít službu, můžete přidat parametr konstruktoru pro tuto službu a modul runtime .NET Core se postará o předání instance služby za běhu. V tomto případě konstruktor vloží instanci konfigurační služby .NET Core pomocí parametru IConfiguration , který se používá k načtení PowerBi:ServiceRootUrl hodnoty konfigurace z appsettings.json. Parametr ITokenAcquisition , který má název tokenAcquisition , obsahuje odkaz na ověřovací službu Microsoftu poskytovanou knihovnou Microsoft.Identity.Web a slouží k získání přístupových tokenů z Microsoft Entra ID.

Pole RequiredScopes obsahuje pole řetězců obsahující sadu delegovaných oprávnění podporovaných rozhraním SLUŽBA POWER BI API. Když vaše aplikace volá přes síť k získání tokenu Microsoft Entra, předá tuto sadu delegovaných oprávnění, aby je Microsoft Entra ID mohl zahrnout do přístupového tokenu, který vrátí.

Poznámka:

Ověřte, že je vaše aplikace Microsoft Entra nakonfigurovaná s obory vyžadovanými vaší webovou aplikací. Další informace najdete v tématu Změna oprávnění aplikace Microsoft Entra.

  1. V projektu aplikace vytvořte novou složku s názvem Služby.

  2. Ve složce Služby vytvořte nový soubor s názvem PowerBiServiceApi.cs.

  3. Do PowerBiServiceApi.cs přidejte následující kód.

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

 }

}

Úprava souboru HomeController.cs

V tomto příkladu kódu použijete injektáž závislostí. Při registraci třídy PowerBiServiceApi jako služby voláním services.AddScoped v metodě ConfigureServices. Do konstruktoru můžete přidat PowerBiServiceApi parametr a modul runtime .NET Core se postará o vytvoření PowerBiServiceApi instance a jeho předání konstruktoru.

Ve složce Kontrolery otevřete soubor HomeController.cs a přidejte ho do následujícího fragmentu kódu:

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

Krok 5 : Sestavení klientské strany aplikace

Pro implementaci na straně klienta je potřeba vytvořit nebo upravit soubory v následující tabulce.

Soubor Používání
embed.js Obsahuje kód JavaScriptu na straně klienta.
Embed.cshtml Obsahuje objektový model dokumentu vaší aplikace (DOM) a DIV pro vložení reportu.

Vytvoření kontejneru pro vloženou sestavu

Vytvořte soubor Embed.cshtml, který obsahuje prvek div použitý jako kontejner pro vaši vloženou sestavu a tři skripty.

  1. Vytvořte v složce View>Home soubor s názvem Embed.cshtml.

  2. Do souboru Embed.cshtml přidejte následující fragment kódu.

    @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>
}

Přidejte JavaScript na straně klienta pro vložení sestavy

Pokud chcete vložit obsah Power BI, musíte vytvořit objekt konfigurace. Další informace o vytvoření objektu konfigurace najdete v Vložení sestavy.

V této části vytvoříte soubor JavaScript nazvaný embed.js s konfiguračním objektem pro vložení vaší sestavy pomocí proměnné models.

models je inicializováno pomocí volání window['powerbi-client'].models. Proměnná models se používá k nastavení konfiguračních hodnot, jako models.Permissions.All, models.TokenType.Aad a models.ViewMode.View.

Funkce powerbi.embed používá konfigurační objekt models k vložení sestavy.

  1. Ve složce wwwroot>js vytvořte soubor s názvem embed.js.

  2. Do souboru embed.js přidejte následující fragment kódu.

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

});

Krok 6 : Spuštění aplikace

Po provedení všech úprav uvedených v tomto kurzu jste připraveni spustit aplikaci. Spusťte aplikaci a experimentujte se způsobem, jakým je sestava Power BI vložená. Pomocí vkládaného analytického rozhraní API Power BI pro klienty můžete aplikaci vylepšit pomocí klientského rozhraní API.

Až bude vaše aplikace připravená, můžete vloženou aplikaci přesunout do produkčního prostředí.

Související obsah

  • Last updated on