Εκμάθηση: Ενσωμάτωση μιας αναφοράς Power BI σε μια εφαρμογή για τον οργανισμό σας

Αυτό το εκπαιδευτικό βοήθημα εξηγεί πώς μπορείτε να ενσωματώσετε μια αναφορά Power BI σε μια εφαρμογή .NET 5.0, ως μέρος της λύσης ενσωμάτωση για τον οργανισμό σας (γνωστή και ως τα δεδομένα ανήκουν στον χρήστη). Σε μια λύση ενσωμάτωσης για τον οργανισμό σας, οι χρήστες της εφαρμογής σας πρέπει να κάνουν έλεγχο ταυτότητας στο Power BI με τα δικά τους διαπιστευτήρια.

Σε αυτό το εκπαιδευτικό βοήθημα, θα μάθετε πώς να ενσωματώνετε:

  • Μια αναφορά Power BI
  • Σε μια εφαρμογή ενσωμάτωσης για τον οργανισμό σας
  • Χρήση του .NET 5.0
  • Με τη Microsoft.Identity.Web βιβλιοθήκη (αυτή η βιβλιοθήκη υποστηρίζεται επίσης στο .NET Core)

Σημείωμα

Η πλήρης λύση που χρησιμοποιείται σε αυτό το πρόγραμμα εκμάθησης είναι διαθέσιμη από το αποθετήριο δεδομένων DOTNET5-UserOwnsData-Tutorial GitHub.

Προαπαιτούμενα στοιχεία

Πόροι

Σε αυτό το πρόγραμμα εκμάθησης, χρησιμοποιείτε:

  • API αναφορών REST του Power BI - για να ενσωματώσετε τη διεύθυνση URL και να ανακτήσετε το διακριτικό ενσωμάτωσης.
  • Βιβλιοθήκη ελέγχου ταυτότητας Web της Microsoft.
  • API προγράμματος-πελάτη ενσωματωμένης ανάλυσης του Power BI - για ενσωμάτωση της αναφοράς.

Μέθοδος

Για να ενσωματώσετε περιεχόμενο Power BI σε μια λύση ενσωμάτωσης για τον οργανισμό σας, ακολουθήστε τα εξής βήματα:

  1. Ρύθμιση παραμέτρων της εφαρμογής Σας Microsoft Entra
  2. Λήψη των τιμών παραμέτρων ενσωμάτωσης
  3. Προσθήκη των απαιτούμενων πακέτων NuGet
  4. Ενεργοποίηση ελέγχου ταυτότητας από την πλευρά του διακομιστή
  5. Δημιουργία της πλευράς προγράμματος-πελάτη της εφαρμογής σας
  6. Εκτέλεση της εφαρμογής σας

Βήμα 1 - Ρύθμιση παραμέτρων της εφαρμογής Σας Microsoft Entra

Όταν η εφαρμογή web καλεί το Power BI, χρειάζεται ένα διακριτικό Microsoft Entra για την κλήση των API REST του Power BI και την ενσωμάτωση στοιχείων Power BI όπως αναφορές, πίνακες εργαλείων ή πλακίδια.

Εάν δεν έχετε μια εφαρμογή Microsoft Entra, δημιουργήστε μία χρησιμοποιώντας τις οδηγίες στην καταχώρηση μιας εφαρμογής Microsoft Entra για χρήση με το Power BI.

Για να ρυθμίσετε τις παραμέτρους της εφαρμογής σας Microsoft Entra, ακολουθήστε τις οδηγίες στην ενότητα Ρύθμιση παραμέτρων της εφαρμογής σας Microsoft Entra.

Βήμα 2 - Λάβετε τις τιμές παραμέτρων ενσωμάτωσης

Για να ενσωματώσετε την αναφορά σας, χρειάζεστε τις ακόλουθες τιμές:

Αναγνωριστικό τομέα και μισθωτή

Εάν δεν γνωρίζετε το αναγνωριστικό τομέα ή μισθωτή, ανατρέξτε στο θέμα Εύρεση του αναγνωριστικού μισθωτή του Microsoft Entra και του κύριου ονόματος τομέα.

Σημείωμα

Για να ενσωματώσετε περιεχόμενο για έναν χρήστη σε διαφορετικό μισθωτή (χρήστης-επισκέπτης), πρέπει να προσαρμόσετε την authorityUri παράμετρο.

Αναγνωριστικό πελάτη

Για να λάβετε το αναγνωριστικό GUID προγράμματος-πελάτη (επίσης γνωστό ως αναγνωριστικό εφαρμογής), ακολουθήστε τα εξής βήματα:

  1. Συνδεθείτε στο Microsoft Azure.

  2. Κάντε αναζήτηση για Καταχωρήσεις εφαρμογών και επιλέξτε τη σύνδεση Καταχωρήσεις εφαρμογών .

  3. Επιλέξτε την εφαρμογή Microsoft Entra που χρησιμοποιείτε για την ενσωμάτωση του περιεχομένου σας Power BI.

  4. Από την ενότητα Επισκόπηση , αντιγράψτε το ΑΝΑΓΝΩΡΙΣΤΙΚΌ GUID εφαρμογής (πρόγραμμα-πελάτης).

Μυστικός κωδικός προγράμματος-πελάτη

Για να λάβετε τον μυστικό κωδικό προγράμματος-πελάτη, ακολουθήστε τα εξής βήματα:

  1. Συνδεθείτε στο Microsoft Azure.

  2. Κάντε αναζήτηση για Καταχωρήσεις εφαρμογών και επιλέξτε τη σύνδεση Καταχωρήσεις εφαρμογών .

  3. Επιλέξτε την εφαρμογή Microsoft Entra που χρησιμοποιείτε για την ενσωμάτωση του περιεχομένου σας Power BI.

  4. Στην περιοχή Διαχείριση, επιλέξτε Πιστοποιητικά και μυστικά.

  5. Στην περιοχή Μυστικά προγράμματος-πελάτη, επιλέξτε Νέος μυστικός κωδικός προγράμματος-πελάτη.

  6. Στο αναδυόμενο παράθυρο Προσθήκη μυστικού κωδικού προγράμματος-πελάτη, καταχωρήστε μια περιγραφή για τον μυστικό κωδικό της εφαρμογής σας, επιλέξτε πότε λήγει ο μυστικός κωδικός της εφαρμογής και επιλέξτε Προσθήκη.

  7. Από την ενότητα Μυστικοί κωδικό προγράμματος-πελάτη, αντιγράψτε τη συμβολοσειρά στη στήλη Τιμή του μυστικού κωδικού της εφαρμογής που μόλις δημιουργήσατε. Η τιμή του μυστικού κωδικού προγράμματος-πελάτη είναι το αναγνωριστικό προγράμματος-πελάτη.

Σημείωμα

Όταν εμφανιστεί για πρώτη φορά, βεβαιωθείτε ότι έχετε αντιγράψει την τιμή του μυστικού κωδικού προγράμματος-πελάτη. Αφού απομακρυνθείτε από αυτή τη σελίδα, ο μυστικός κωδικός προγράμματος-πελάτη θα κρυφτεί και δεν θα μπορείτε να ανακτήσετε την τιμή του.

Αναγνωριστικό χώρου εργασίας

Για να λάβετε το αναγνωριστικό GUID χώρου εργασίας, ακολουθήστε τα εξής βήματα:

  1. Πραγματοποιήστε είσοδο στην υπηρεσία Power BI.

  2. Ανοίξτε την αναφορά που θέλετε να ενσωματώσετε.

  3. Αντιγράψτε το GUID από τη διεύθυνση URL. Το GUID είναι ο αριθμός μεταξύ /groups/ και /reports/.

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

Σημείωμα

Για να λάβετε το αναγνωριστικό χώρου εργασίας μέσω προγραμματισμού, χρησιμοποιήστε το API Λήψη ομάδων .

Αναγνωριστικό αναφοράς

Για να λάβετε το αναγνωριστικό GUID αναφοράς, ακολουθήστε τα εξής βήματα:

  1. Πραγματοποιήστε είσοδο στην υπηρεσία Power BI.

  2. Ανοίξτε την αναφορά που θέλετε να ενσωματώσετε.

  3. Αντιγράψτε το GUID από τη διεύθυνση URL. Το GUID είναι ο αριθμός μεταξύ των στοιχείων /reports/ και /ReportSection.

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

Σημείωμα

Για να λάβετε το αναγνωριστικό αναφοράς μέσω προγραμματισμού, χρησιμοποιήστε το API Λήψη αναφορών σε ομάδα .

Βήμα 3 - Προσθέστε τα απαιτούμενα πακέτα NuGet

Πριν ξεκινήσετε, πρέπει να προσθέσετε τα Microsoft.Identity.Webπακέτα , και Microsoft.PowerBI.Api NuGet στην εφαρμογή σας.

Προσθέστε τα παρακάτω πακέτα NuGet στην εφαρμογή σας:

  • Στον κώδικα VS, ανοίξτε ένα τερματικό και πληκτρολογήστε τον ακόλουθο κώδικα.

  • Στο Visual Studio, μεταβείτε στα Εργαλεία>NuGet Διαχείριση πακέτου> Διαχείριση πακέτου Κονσόλα και πληκτρολογήστε τον ακόλουθο κώδικα.

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 - Ενεργοποίηση ελέγχου ταυτότητας από την πλευρά του διακομιστή

Ενεργοποιήστε τον έλεγχο ταυτότητας στην πλευρά του διακομιστή στην εφαρμογή σας, δημιουργώντας ή τροποποιώντας τα αρχεία στον παρακάτω πίνακα.

File Χρήση
Startup.cs Προετοιμασία της υπηρεσίας Microsoft.Identity.Web ελέγχου ταυτότητας
appsettings.json Λεπτομέρειες ελέγχου ταυτότητας
PowerBiServiceApi.cs Λήψη του διακριτικού Microsoft Entra και ενσωμάτωση μετα-δεδομένων
HomeController.cs Διαβίβαση δεδομένων ενσωμάτωσης ως μοντέλου στην προβολή

Ρύθμιση παραμέτρων του αρχείου εκκίνησης για υποστήριξη Microsoft.Identity.Web

Τροποποιήστε τον κώδικα στο Startup.cs για να προετοιμάσετε σωστά την υπηρεσία ελέγχου ταυτότητας που παρέχεται από Microsoft.Identity.Webτο .

Προσθέστε το παρακάτω τμήμα κώδικα στο αρχείο Startup.cs της εφαρμογής σας.

Σημείωμα

Ο κώδικας στην ConfigureServices επιτυγχάνει πολλά σημαντικά πράγματα:

  1. Η κλήση για AddMicrosoftWebAppCallsWebApi ρύθμιση παραμέτρων της Βιβλιοθήκης ελέγχου ταυτότητας της Microsoft για την απόκτηση διακριτικών πρόσβασης (διακριτικά Microsoft Entra).
  2. Η κλήση για AddInMemoryTokenCaches ρύθμιση παραμέτρων ενός cache διακριτικών που θα χρησιμοποιεί η βιβλιοθήκη ελέγχου ταυτότητας της Microsoft για την προσωρινή αποθήκευση διακριτικών πρόσβασης και διακριτικών ανανέωσης στο παρασκήνιο
  3. Η κλήση για 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 αρχείο περιέχει ευαίσθητες πληροφορίες, όπως το αναγνωριστικό προγράμματος-πελάτη και ο μυστικός κωδικός προγράμματος-πελάτη. Για λόγους ασφαλείας, δεν συνιστούμε να διατηρείτε αυτές τις πληροφορίες στο αρχείο ρυθμίσεων. Κατά την ενσωμάτωση στην εφαρμογή σας, εξετάστε μια πιο ασφαλή μέθοδο, όπως το Azure Key Vault , για τη διατήρηση αυτών των πληροφοριών.

  1. Στο έργο σας, δημιουργήστε ένα νέο αρχείο και ονομάστε το appsettings.json.

  2. Προσθέστε τον παρακάτω κώδικα στο 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. Συμπληρώστε τις τιμές παραμέτρων ενσωμάτωσης που λαμβάνονται από το Βήμα 2 - Λήψη των τιμών παραμέτρων ενσωμάτωσης.

Σημείωμα

Στο προηγούμενο τμήμα κώδικα, η PowerBi:ServiceRootUrl παράμετρος προστίθεται ως προσαρμοσμένη τιμή ρύθμισης παραμέτρων για την παρακολούθηση της διεύθυνσης URL βάσης για τον Υπηρεσία Power BI. Κατά τον προγραμματισμό με βάση τα Υπηρεσία Power BI στο δημόσιο cloud της Microsoft, η διεύθυνση URL είναι https://api.powerbi.com/. Ωστόσο, η διεύθυνση URL ρίζας για το Υπηρεσία Power BI θα διαφέρει σε άλλα cloud, όπως το cloud για δημόσιους οργανισμούς. Επομένως, αυτή η τιμή αποθηκεύεται ως τιμή ρύθμισης παραμέτρων έργου, ώστε να είναι εύκολο να αλλάξετε όταν απαιτείται.

Λάβετε το διακριτικό πρόσβασης του 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.

Το RequiredScopes πεδίο περιέχει έναν πίνακα συμβολοσειρών που περιέχει ένα σύνολο δικαιωμάτων με ανάθεση που υποστηρίζονται από το Υπηρεσία Power BI API. Όταν η εφαρμογή σας πραγματοποιεί κλήση στο δίκτυο για να αποκτήσει ένα διακριτικό Microsoft Entra, μεταβιβάζει αυτό το σύνολο δικαιωμάτων ανάθεσης, έτσι ώστε το αναγνωριστικό Microsoft Entra να μπορεί να τα συμπεριλάβει στο διακριτικό πρόσβασης που επιστρέφει.

Σημείωμα

Βεβαιωθείτε ότι η εφαρμογή Σας Microsoft Entra έχει ρυθμιστεί με τις εμβέλειες που απαιτούνται από την εφαρμογή web σας. Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Αλλαγή των δικαιωμάτων της εφαρμογής σας Microsoft Entra.

  1. Στο έργο της εφαρμογής σας, δημιουργήστε έναν νέο φάκελο με τίτλο Υπηρεσίες.

  2. Στον φάκελο Υπηρεσίες, δημιουργήστε ένα νέο αρχείο με τίτλο PowerBiServiceApi.cs.

  3. Προσθέστε τον παρακάτω κώδικα στο 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 παρουσία και να τη διαβιβάσει στην κατασκευή.

Από τον φάκελο Ελεγκτές , ανοίξτε το αρχείο 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 - Δημιουργήστε την πλευρά του προγράμματος-πελάτη της εφαρμογής σας

Για την υλοποίηση από την πλευρά του προγράμματος-πελάτη, πρέπει να δημιουργήσετε ή να τροποποιήσετε τα αρχεία στον παρακάτω πίνακα.

File Χρήση
embed.js Περιέχει τον κώδικα JavaScript από την πλευρά του προγράμματος-πελάτη
Embed.cshtml Περιέχει το μοντέλο αντικειμένου εγγράφου (DOM) της εφαρμογής σας και ένα DIV για την ενσωμάτωση της αναφοράς

Δημιουργία κοντέινερ για την ενσωματωμένη αναφορά σας

Δημιουργήστε το αρχείο Embed.cshtml , το οποίο έχει ένα div στοιχείο που χρησιμοποιείται ως κοντέινερ για την ενσωματωμένη αναφορά σας και τρεις δέσμες ενεργειών.

  1. Στον φάκελο Προβολή>αρχικής σελίδας, δημιουργήστε ένα αρχείο με την ονομασία Embed.cshtml.

  2. Προσθέστε το ακόλουθο τμήμα κώδικα στο αρχείο 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 αντικείμενο ρύθμισης παραμέτρων για να ενσωματώσει την αναφορά σας.

  1. Στον φάκελο wwwroot>js, δημιουργήστε ένα αρχείο με την ονομασία embed.js.

  2. Προσθέστε το ακόλουθο τμήμα κώδικα στο αρχείο 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 από την πλευρά του προγράμματος-πελάτη.

Όταν η εφαρμογή σας είναι έτοιμη, μπορείτε να μετακινήσετε την ενσωματωμένη εφαρμογή σας στην παραγωγή.