Opetusohjelma: Power BI -raportin upottaminen sovellukseen asiakkaitasi varten

Tässä opetusohjelmassa opit upottamaan Power BI -raportin .NET 5.0 -sovellukseen osana Upottaminen asiakkaillesi -ratkaisua (tunnetaan myös nimellä sovellus omistaa tiedot). Upottaminen asiakkaillesi -ratkaisussa sovelluksesi käyttäjien ei tarvitse kirjautua Power BI:hin eikä heillä tarvitse olla Power BI -käyttöoikeutta.

Tässä opetusohjelmassa opit upottamaan:

  • Power BI -raportti.
  • Asiakkaille tarkoitettu upotus -sovelluksessa.
  • Palvelun päänimen avulla.
  • Käyttämällä .NET 5.0:a.
  • Kirjaston Microsoft.Identity.Web avulla (kirjastoa tuetaan myös .NET Coressa).

Muistiinpano

Tässä opetusohjelmassa käytettävä koko ratkaisu on saatavilla DOTNET5-AppOwnsData-Tutorial GitHub-säilöstä.

Edellytykset

Resursseja

Tässä opetusohjelmassa käytetään:

Metodi

Jos haluat upottaa Power BI -sisältöä asiakkaille tarkoitettuun upotusratkaisuun, toimi seuraavasti:

  1. Määritä Microsoft Entra -sovellus ja palvelun päänimi.

  2. Hae upotusparametriarvot.

  3. Lisää tarvittavat NuGet-paketit.

  4. Ota käyttöön palvelinpuolen todennus.

  5. Luo sovelluksesi asiakaspuoli.

  6. Suorita sovelluksesi.

Vaihe 1 – Määritä Microsoft Entra -sovelluksesi ja palvelun päänimi

Tässä opetusohjelmassa käytät palvelun päänimeä verkkosovelluksen todentamiseen Microsoft Entra -tunnuksen avulla. Tarvitset myös Microsoft Entra -sovelluksen, joka mahdollistaa Microsoft Entra -tunnuksen luomisen. Microsoft Entra -tunnuksen avulla verkkosovelluksesi voi kutsua Power BI REST -ohjelmointirajapintoja ja upottaa Power BI -kohteita, kuten raportteja, koontinäyttöjä ja ruutuja.

Luo Microsoft Entra -sovellus palvelun päänimen ohjeiden mukaisesti ja ota käyttöön sovelluksen palvelun päänimi, jotta se voi käsitellä Power BI -sisältöäsi.

Vaihe 2 – Hae upotusparametriarvot

Tarvitset raportin upottamiseen seuraavat arvot:

Toimialueen ja vuokraajan tunnus

Jos et tiedä toimialueesi tai vuokraajatunnustasi, katso Etsi Microsoft Entra -vuokraajatunnus ja ensisijainen toimialuenimi.

Muistiinpano

Jos haluat upottaa sisältöä käyttäjälle eri vuokraajaan (vieraskäyttäjä), sinun on muutettava parametria authorityUri .

Client ID

Jos haluat saada asiakastunnuksen yksilöivän tunnisteen (tunnetaan myös sovellustunnuksena), toimi seuraavasti:

  1. Kirjaudu Microsoft Azureen.

  2. Etsi Sovelluksen rekisteröinnit ja valitse Sovelluksen rekisteröinnit -linkki.

  3. Valitse Microsoft Entra -sovellus, jota käytät Power BI -sisällön upottamiseen.

  4. Kopioi Yleiskatsaus-osiosta yksilöivä tunniste Sovelluksen (asiakkaan) tunnus.

Asiakasohjelman salaisuus

Saat asiakassalaisuuden seuraavasti:

  1. Kirjaudu Microsoft Azureen.

  2. Etsi Sovelluksen rekisteröinnit ja valitse Sovelluksen rekisteröinnit -linkki.

  3. Valitse Microsoft Entra -sovellus, jota käytät Power BI -sisällön upottamiseen.

  4. Valitse Hallinta-kohdasta Varmenteet ja salaisuudet.

  5. Valitse Asiakassalaisuudet -kohdasta Uusi asiakassalaisuus.

  6. Anna Lisää asiakassalaisuus -ponnahdusikkunassa sovellussalaisuuden kuvaus, valitse milloin sovellussalaisuus vanhentuu ja valitse Lisää.

  7. Kopioi Asiakassalaisuudet-osiosta juuri luodun sovellussalaisuuden Arvo-sarakkeesta merkkijono. Asiakassalaisuuden arvo on asiakastunnuksesi.

Muistiinpano

Kopioi asiakasohjelman salasana-arvo, kun se tulee ensimmäisen kerran näkyviin. Kun siirryt pois tältä sivulta, asiakassalaisuus piilotetaan etkä pysty noutamaan sen arvoa.

Työtilan tunnus

Jos haluat saada työtilan yksilöivän tunnisteen, toimi seuraavasti:

  1. Kirjaudu Power BI -palveluun.

  2. Avaa upotettava raportti.

  3. Kopioi YKSILÖIVÄ tunnus URL-osoitteesta. Yksilöivä tunnus on luku /groups/ - ja /reports/-tunnusten välistä.

    A screenshot showing workspace ID GUID in the Power B I service U R L

Muistiinpano

Jos haluat saada työtilan tunnuksen ohjelmallisesti, käytä Hae ryhmät -ohjelmointirajapintaa.

Raportin tunnus

Jos haluat saada raporttitunnuksen yksilöivän tunnisteen, toimi seuraavasti:

  1. Kirjaudu Power BI -palveluun.

  2. Avaa upotettava raportti.

  3. Kopioi YKSILÖIVÄ tunnus URL-osoitteesta. Yksilöivä tunnus on luku /reports/ - ja /ReportSection-arvojen välillä.

    A screenshot showing report ID GUID in the Power B I service U R L

Muistiinpano

Jos haluat saada raporttitunnuksen ohjelmallisesti, käytä Hae raportit ryhmässä -ohjelmointirajapintaa.

Vaihe 3 – Lisää tarvittavat NuGet-paketit

Ennen kuin voit aloittaa, sinun on lisättävä Microsoft.Identity.Web- ja Microsoft.PowerBI.Api NuGet-paketit sovellukseesi.

Lisää tarvittavat NuGet-paketit sovellukseesi:

  • Avaa VS Codessa pääte ja anna seuraava koodi.

  • Siirry Visual Studiossa kohtaan Työkalut>NuGet paketinhallinta> paketinhallinta Konsoli ja kirjoita seuraava koodi.

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI
dotnet add package Microsoft.PowerBI.Api

Vaihe 4 – Ota käyttöön palvelinpuolen todennus

Ota palvelinpuolen todennus käyttöön sovelluksessasi luomalla tai muokkaamalla seuraavan taulukon tiedostoja.

File Käyttäminen
Startup.cs Todentamispalvelun Microsoft.Identity.Web alustaminen
appsettings.json Todennustietojen määrittäminen
PowerBiServiceApi.cs Hanki Microsoft Entra -tunnus ja upota metatietoja
HomeController.cs Tietojen upottamisen välittäminen mallina näkymään

Määritä käynnistystiedosto tukemaan Microsoft.Identity.Web

Muokkaa Startup.cs-tiedoston koodia, jotta kohteen tarjoama Microsoft.Identity.Webtodennuspalvelu alustetaan oikein.

Lisää seuraava koodi sovelluksesi Startup.cs-tiedostoon .

Muistiinpano

-koodi ConfigureServices suorittaa useita tärkeitä asioita:

  1. Kutsu, joka AddMicrosoftWebAppCallsWebApi määrittää Microsoftin todentamiskirjaston hankkimaan käyttöoikeustietueet (Microsoft Entra -tunnukset).
  2. Kutsu AddInMemoryTokenCaches määrittää tunnuksen välimuistin, jota Microsoftin todennuskirjasto käyttää välimuistiin käyttöoikeustietueiden ja taustalla olevien päivitystunnusten välimuistiin.
  3. Kutsu services.AddScoped(typeof(PowerBiServiceApi)) määrittää PowerBiServiceApi luokan palveluluokaksi, joka voidaan lisätä muihin luokkiin käyttämällä riippuvuuslisäystä.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.AspNetCore.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using AppOwnsData.Services;

namespace AppOwnsData
{
    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()
            .AddInMemoryTokenCaches();

            services.AddScoped(typeof(PowerBiServiceApi));

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

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                // The default HSTS value is 30 days. You might want to change this for production scenarios. See https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapRazorPages();
            });
        }
    }
}

Todennustietotiedoston luominen

Tässä opetusohjelmassa appsettings.json-tiedosto sisältää arkaluonteisia tietoja, kuten asiakastunnuksen ja asiakassalaisuuden. Suojaussyistä emme suosittele, että pidät nämä tiedot asetustiedostossa. Kun upotat sovellukseen, harkitse suojatumpaa työkalua, kuten Azure Key Vaultia, arkaluontoisten tietojen suojaamiseksi.

  1. Luo projektissa uusi tiedosto ja anna sen nimeksi appsettings.json.

  2. Lisää seuraava koodi appsettings.json-tiedostoon:

    {
     "AzureAd": {
       "Instance": "https://login.microsoftonline.com/",
       "Domain": "yourtenant.onMicrosoft.com",
       "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. Täytä upotetut parametriarvot, jotka on saatu vaiheessa 2 - Hae upotetut parametriarvot.

Muistiinpano

Edellisessä koodissa PowerBi:ServiceRootUrl parametri lisätään mukautettuna määritysarvona seuraamaan Power BI -palvelu perus-URL-osoitetta. Kun ohjelmoit Power BI -palvelu vasten Microsoftin julkisessa pilvipalvelussa, URL-osoite on https://api.powerbi.com/. Power BI -palvelu URL-pääosoite on kuitenkin erilainen muissa pilvipalveluissa, kuten julkishallinnon pilvipalvelussa. Siksi mukautetun kokoonpanon arvo tallennetaan projektin kokoonpanoarvona, joten voit muuttaa sitä tarpeen mukaan.

Hanki Microsoft Entra -käyttöoikeustietue ja kutsu Power BI -palvelu

Jos haluat upottaa Power BI -sisältöä, kuten raportteja ja koontinäyttöjä, sovelluksesi on saatava Microsoft Entra -tunnus. Tarvitset määritysobjektin, jotta voit hankkia tunnuksen.

Tämän osion koodi käyttää .NET Core -riippuvuussuhteen lisäysmallia. Kun luokan on käytettävä palvelua, voit lisätä konstruktoriparametrin kyseiselle palvelulle. .NET Core -suorituspalvelu huolehtii palveluesiintymän välittämisestä suorituksen aikana. Tässä tapauksessa konstruktori lisää .NET Core -määrityspalvelun esiintymän käyttämällä -IConfigurationparametria, jota käytetään konfigurointiarvon PowerBi:ServiceRootUrl noutamiseen appsettings.json-tiedostosta. - ITokenAcquisition niminen parametri tokenAcquisitionsisältää viittauksen kirjaston tarjoamaan Microsoft.Identity.Web Microsoft-todennuspalveluun. - ITokenAcquisition parametria käytetään käyttöoikeustietueiden hankkimiseen Microsoft Entra -tunnuksesta.

-RequiredScopeskentässä on merkkijonomatriisi, joka sisältää joukon Power BI -palvelu -ohjelmointirajapinnan tukemia delegoituja käyttöoikeuksia. Kun sovelluksesi kutsuu verkon kautta Microsoft Entra -tunnuksen hankkimiseksi, se välittää nämä delegoidut käyttöoikeudet, jotta Microsoft Entra -tunnus voi sisällyttää ne palauttamaansa käyttöoikeustietueeseen.

Muistiinpano

Varmista, että Microsoft Entra -sovellukseen on määritetty verkkosovelluksesi edellyttämät vaikutusalueet. Lisätietoja on kohdassa Microsoft Entra -sovelluksen käyttöoikeuksien muuttaminen.

  1. Luo sovelluksesi projektissa uusi kansio nimeltä Palvelut.

  2. Luo Palvelut-kansioon uusi tiedosto nimeltä PowerBiServiceApi.cs.

  3. Lisää seuraava koodi kohtaan PowerBiServiceApi.cs.

    using System;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Identity.Web;
    using Microsoft.Rest;
    using Microsoft.PowerBI.Api;
    using Microsoft.PowerBI.Api.Models;
    using Newtonsoft.Json;
    
    namespace AppOwnsData.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 const string powerbiApiDefaultScope = "https://analysis.windows.net/powerbi/api/.default";
    
            // A method to get the Azure AD token (also known as 'access token')
            public string GetAccessToken() {
                return this.tokenAcquisition.GetAccessTokenForAppAsync(powerbiApiDefaultScope).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 the embedding data.
                var report = await pbiClient.Reports.GetReportInGroupAsync(WorkspaceId, ReportId);
    
                // Generate a read-only embed token for the report.
                var datasetId = report.DatasetId;
                var tokenRequest = new GenerateTokenRequest(TokenAccessLevel.View, datasetId);
                var embedTokenResponse = await pbiClient.Reports.GenerateTokenAsync(WorkspaceId, ReportId, tokenRequest);
                var embedToken = embedTokenResponse.Token;
    
                // Return the report embedded data to caller.
                return new EmbeddedReportViewModel {
                    Id = report.Id.ToString(),
                    EmbedUrl = report.EmbedUrl,
                    Name = report.Name,
                    Token = embedToken
                };
            }
    
        }
    }
    

HomeController.cs-tiedoston muokkaaminen

Tässä koodiesimerkissä muokkaat HomeController.cs-tiedostoa riippuvuussuhteen avulla. Edellisen vaiheen jälkeen määritit PowerBiServiceApi luokan palveluksi kutsumalla services.AddScoped -menetelmää ConfigureServices . Tämän koodin avulla voit lisätä parametrin PowerBiServiceApi konstruktoriin, ja .NET Core -suorituspalvelu luo esiintymän PowerBiServiceApi ja välittää sen konstruktorille.

Avaa Controllers-kansiostaHomeController.cs-tiedosto ja lisää siihen seuraava koodi:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using AppOwnsData.Models;
using AppOwnsData.Services;

namespace AppOwnsData.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() {

            // Replace these two GUIDs with the workspace ID and report ID you recorded earlier.
            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 });
        }
    }
}

Vaihe 5 – Sovelluksen asiakaspuolen luominen

Asiakaspuolen toteutusta varten sinun on luotava tai muokattava seuraavassa taulukossa lueteltuja tiedostoja:

File Käyttäminen
embed.js Sisältää client-side JavaScript -koodin
Embed.cshtml Sisältää sovelluksen asiakirjaobjektimallin (DOM) ja DIV-objektin raportin upottamista varten

Säilön luominen upotetulle raportille

Tässä opetusohjelmassa luot Embed.cshtml-tiedoston , jossa div on elementti, joka on upotetun raportin säilö, ja kolme komentosarjaa.

  1. Luo Näytä aloitus -/kansiossa tiedosto nimeltä Embed.cshtml.

  2. Lisää seuraava koodi Embed.cshtml-tiedostoon .

    @model AppOwnsData.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.18.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>
    }
    

Asiakaspuolen JavaScriptin lisääminen raportin upottamiseen

Jos haluat upottaa Power BI -sisältöä, sinun on luotava määritysobjekti. Lisätietoja määritysobjektin luomisesta on artikkelissa Raportin upottaminen.

Tässä opetusohjelmassa luot JavaScript-tiedoston nimeltä embed.js ja määritysobjektin, jonka avulla voit upottaa muuttujaa käyttävän modelsraportin.

Voit alustaa ne models kutsulla kohteeseen window['powerbi-client'].models. Muuttujan models avulla määritetään konfigurointiarvot, kuten models.Permissions.All, models.TokenType.Aadja models.ViewMode.View.

Funktio powerbi.embed käyttää models määritysobjektia raportin upottamiseen.

  1. Luo wwwroot/js -kansioon tiedosto nimeltä embed.js.

  2. Lisää seuraava koodi embed.js-tiedostoon .

    $(function () {
    
        // 1 - Get DOM object for the div that's the report container.
        var reportContainer = document.getElementById("embed-container");
    
        // 2 - Get the report embedding data from the view model.
        var reportId = window.viewModel.reportId;
        var embedUrl = window.viewModel.embedUrl;
        var token = window.viewModel.token
    
        // 3 - Embed the report by using the Power BI JavaScript API.
        var models = window['powerbi-client'].models;
    
        var config = {
          type: 'report',
          id: reportId,
          embedUrl: embedUrl,
          accessToken: token,
          permissions: models.Permissions.All,
          tokenType: models.TokenType.Embed,
          viewMode: models.ViewMode.View,
          settings: {
            panes: {
              filters: { expanded: false, visible: true },
              pageNavigation: { visible: false }
            }
          }
        };
    
        // Embed the report and display it within the div container.
        var report = powerbi.embed(reportContainer, config);
    
        // 4 - Add logic to resize the embed container on a window resize event.
        var heightBuffer = 12;
        var newHeight = $(window).height() - ($("header").height() + heightBuffer);
        $("#embed-container").height(newHeight);
        $(window).resize(function () {
          var newHeight = $(window).height() - ($("header").height() + heightBuffer);
          $("#embed-container").height(newHeight);
        });
    
      });
    

Vaihe 6 – Suorita sovelluksesi

Kun olet noudattanut kaikkia aiempia vaiheita, olet valmis suorittamaan sovelluksesi. Kokeile suorittaa sovelluksesi ja kokeile, miten Power BI -raporttisi on upotettu. Voit parantaa sovellustasi asiakaspuolen ohjelmointirajapintojen avulla upotetun Power BI -analytiikan asiakasohjelman ohjelmointirajapintojen avulla.

Tärkeä

Jos olet käyttänyt maksuttomia upotuskokeilutunnuksia kehityksessä, sinun on ostettava kapasiteettia tuotantoa varten. Ennen kuin ostat kapasiteetin, maksuttoman kokeiluversion banneri näkyy upotetun raportin yläosassa.

Kun sovelluksesi on valmis, voit siirtää upotetun sovelluksesi tuotantoon.