Självstudie: Bädda in en Power BI-rapport i ett program för din organisation

I den här självstudien beskrivs hur du bäddar in en Power BI-rapport i ett .NET 5.0-program som en del av inbäddningen för din organisation (även kallat användar äger data). I en inbäddning för din organisationslösning måste appanvändare autentisera mot Power BI med sina egna autentiseringsuppgifter.

I den här självstudien lär du dig att bädda in:

Förutsättningar

• En licens för Power BI Pro eller Premium per användare (PPU).

  Kommentar

  Inbäddningen för din organisationslösning stöds inte på kapaciteter som baseras på A-SKU :er. En SKU kan bara användas för inbäddning för dina kunders lösning.

• En Power BI-arbetsyta med en rapport.

• Din egen Microsoft Entra-klientorganisation.

• En Microsoft Entra-app.

• En MVC-app (.NET Core 5 model view controller).

• .NET Core 5 SDK (eller senare).

• En integrerad utvecklingsmiljö (IDE). Vi rekommenderar att du använder någon av följande miljöer:

  • Visual Studio.
  • Visual Studio Code (med C#-tillägget).

Resurser

I den här självstudien använder du:

• Power BI REST Reports API – för att bädda in URL:en och hämta inbäddningstoken.
• Microsoft Identity Web Authentication-bibliotek.
• Klient-API:er för Power BI Embedded-analys – för att bädda in rapporten.

Metod

Följ dessa steg om du vill bädda in Power BI-innehåll i en inbäddning för din organisationslösning :

1. Konfigurera din Microsoft Entra-app
2. Hämta parametervärdena för inbäddning
3. Lägg till nödvändiga NuGet-paket
4. Aktivera autentisering på serversidan
5. Skapa appens klientsida
6. Kör ditt program

Steg 1 – Konfigurera din Microsoft Entra-app

När din webbapp anropar Power BI behöver den en Microsoft Entra-token för att anropa Power BI REST-API:er och bädda in Power BI-objekt som rapporter, instrumentpaneler eller paneler.

Om du inte har någon Microsoft Entra-app skapar du en med hjälp av anvisningarna i Registrera ett Microsoft Entra-program som ska användas med Power BI.

Om du vill konfigurera din Microsoft Entra-app följer du anvisningarna i Konfigurera din Microsoft Entra-app.

Steg 2 – Hämta parametervärdena för inbäddning

För att bädda in rapporten behöver du följande värden:

• Domän
• Tenant ID
• Klient-ID
• Client secret
• Arbetsyte-ID
• Rapport-ID

Domän- och klientorganisations-ID

Om du inte känner till din domän eller ditt klient-ID kan du läsa Hitta Klient-ID för Microsoft Entra och det primära domännamnet.

Client ID

Följ dessa steg för att hämta klient-ID:ts GUID (även kallat program-ID):

1. Logga in på Microsoft Azure.

2. Sök efter Appregistreringar och välj länken Appregistreringar.

3. Välj den Microsoft Entra-app som du använder för att bädda in ditt Power BI-innehåll.

4. I avsnittet Översikt kopierar du program-ID:t (klient-ID :t).

Klienthemlighet

Följ dessa steg för att hämta klienthemligheten:

1. Logga in på Microsoft Azure.

2. Sök efter Appregistreringar och välj länken Appregistreringar.

3. Välj den Microsoft Entra-app som du använder för att bädda in ditt Power BI-innehåll.

4. Under Hantera väljer du Certifikat och hemligheter.

5. Under Klienthemligheter väljer du Ny klienthemlighet.

6. I popup-fönstret Lägg till en klienthemlighet anger du en beskrivning av programhemligheten, väljer när programhemligheten upphör att gälla och väljer Lägg till.

7. I avsnittet Klienthemligheter kopierar du strängen i kolumnen Värde i den nyligen skapade programhemligheten. Värdet för klienthemligheten är ditt klient-ID.

Arbetsplats-ID

Följ dessa steg för att hämta arbetsyte-ID:ts GUID:

1. Logga in på Power BI-tjänst.

2. Öppna den rapport som du vill bädda in.

3. Kopiera GUID från URL:en. GUID är talet mellan /groups/ och /reports/.

   

Rapport-ID

Följ dessa steg för att hämta rapport-ID:ts GUID:

1. Logga in på Power BI-tjänst.

2. Öppna den rapport som du vill bädda in.

3. Kopiera GUID från URL:en. GUID är talet mellan /reports/ och /ReportSection.

   

Steg 3 – Lägg till nödvändiga NuGet-paket

Innan du börjar måste du lägga till , och Microsoft.PowerBI.Api NuGet-paketen Microsoft.Identity.Webi din app.

Lägg till följande NuGet-paket i din app:

• I VS Code öppnar du en terminal och skriver in följande kod.

• I Visual Studio går du till Verktyg>NuGet Package Manager Package Manager-konsolen> och skriver in följande kod.

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

Om din app tidigare användes Microsoft.AspNetCore för att autentisera tar du bort det här paketet från projektet genom att skriva:

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

Steg 4 – Aktivera autentisering på serversidan

Aktivera autentisering på serversidan i din app genom att skapa eller ändra filerna i följande tabell.

Konfigurera startfilen så att den stöder Microsoft.Identity.Web

Ändra koden i Startup.cs för att initiera autentiseringstjänsten som tillhandahålls av Microsoft.Identity.Web.

Lägg till följande kodfragment i appens Startup.cs-fil .

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

    }
  }
}

Skapa en autentiseringsinformationsfil

I den här självstudien appsettings.json innehåller filen känslig information, till exempel klient-ID och klienthemlighet. Av säkerhetsskäl rekommenderar vi inte att du behåller den här informationen i inställningsfilen. När du bäddar in i ditt program bör du överväga en säkrare metod som Azure Key Vault för att behålla den här informationen.

1. I projektet skapar du en ny fil och anropar den appsettings.json.

2. Lägg till följande kod i 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": "*"
   }
   

3. Fyll i de inbäddningsparametervärden som hämtats från steg 2 – Hämta parametervärdena för inbäddning.

   • Domain - Domän- och klientorganisations-ID
   • TenantId - Domän- och klientorganisations-ID
   • ClientId - Klient-ID
   • ClientSecret - Client secret

Hämta Microsoft Entra-åtkomsttoken och anropa Power BI-tjänst

För att kunna bädda in Power BI-innehåll (till exempel rapporter och instrumentpaneler) måste appen hämta en Microsoft Entra-token. För att hämta token behöver du ett konfigurationsobjekt.

Koden i det här avsnittet använder .NET Core-beroendeinmatningsmönstret. När klassen behöver använda en tjänst kan du lägga till en konstruktorparameter för den tjänsten och .NET Core-körningen tar hand om att skicka tjänstinstansen vid körning. I det här fallet matar konstruktorn in en instans av .NET Core-konfigurationstjänsten med hjälp av parametern IConfiguration , som används för att hämta konfigurationsvärdet PowerBi:ServiceRootUrl från appsettings.json. Parametern ITokenAcquisition , som heter tokenAcquisition innehåller en referens till Microsoft-autentiseringstjänsten som tillhandahålls av Microsoft.Identity.Web biblioteket och används för att hämta åtkomsttoken från Microsoft Entra-ID.

Fältet RequiredScopes innehåller en strängmatris som innehåller en uppsättning delegerade behörigheter som stöds av Power BI-tjänst-API:et. När ditt program anropar över nätverket för att hämta en Microsoft Entra-token skickar den här uppsättningen delegerade behörigheter så att Microsoft Entra-ID:t kan inkludera dem i den åtkomsttoken som det returnerar.

1. Skapa en ny mapp med namnet Tjänster i appens projekt.

2. I mappen Tjänster skapar du en ny fil med titeln PowerBiServiceApi.cs.

3. Lägg till följande kod i 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()
      };
     }
   
    }
   
   }
   

Ändra filen HomeController.cs

I det här kodexemplet använder du beroendeinmatning. När du registrerade PowerBiServiceApi klassen som en tjänst genom att anropa services.AddScoped i ConfigureServices -metoden. Du kan lägga till en PowerBiServiceApi parameter i konstruktorn och .NET Core-körningen tar hand om att skapa en PowerBiServiceApi instans och skicka den till konstruktorn.

Öppna HomeController.cs-filen från mappen Controllers och lägg till den i följande kodfragment:

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

Steg 5 – Skapa appens klientsida

För implementering på klientsidan måste du skapa eller ändra filerna i följande tabell.

Skapa en container för din inbäddade rapport

Skapa filen Embed.cshtml, som har ett div element som används som en container för din inbäddade rapport, och tre skript.

1. I mappen Visa>start skapar du en fil med namnet Embed.cshtml.

2. Lägg till följande kodfragment i filen 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>
   }
   

Lägg till JavaScript på klientsidan för att bädda in rapporten

Om du vill bädda in Power BI-innehåll måste du skapa ett konfigurationsobjekt. Mer information om hur du skapar konfigurationsobjektet finns i Bädda in en rapport.

I det här avsnittet skapar du en JavaScript-fil med namnet embed.js med ett konfigurationsobjekt för att bädda in rapporten med hjälp av variabeln models.

models initieras med hjälp av ett anrop till window['powerbi-client'].models. Variabeln models används för att ange konfigurationsvärden som models.Permissions.All, models.TokenType.Aadoch models.ViewMode.View.

Funktionen powerbi.embed använder konfigurationsobjektet models för att bädda in rapporten.

1. I mappen wwwroot>js skapar du en fil med namnet embed.js.

2. Lägg till följande kodfragment i embed.js-filen.

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

Steg 6 – Kör programmet

När du har gjort alla justeringar som anges i den här självstudien är du redo att köra programmet. Kör ditt program och experimentera med hur Power BI-rapporten är inbäddad. Du kan använda Api:er för Power BI Embedded-analysklienten för att förbättra din app med hjälp av API:er på klientsidan.

När appen är klar kan du flytta den inbäddade appen till produktion.

Relaterat innehåll

• Inbäddade analysprogramtoken
• Flytta din inbäddade app till produktion
• Kapacitet och SKU:er i Power BI Embedded-analys
• Kapacitetsplanering i Power BI Embedded-analys