Aracılığıyla paylaş


Öğretici: Kuruluşunuz için bir uygulamaya Power BI raporu ekleme

Bu öğreticide, kuruluşunuz için ekleme (verilerin sahibi kullanıcı olarak da bilinir) çözümünün bir parçası olarak bir .NET 5.0 uygulamasına Power BI raporu ekleme açıklanmaktadır. Kuruluş çözümünüz için bir eklemede, uygulama kullanıcılarınızın kendi kimlik bilgileriyle Power BI'da kimlik doğrulaması yapmanız gerekir.

Bu öğreticide şunları eklemeyi öğreneceksiniz:

  • Power BI raporu
  • Kuruluşunuz için ekleme uygulamasına
  • .NET 5.0 kullanma
  • Kitaplık ile Microsoft.Identity.Web (bu kitaplık .NET Core'da da desteklenir)

Not

Bu öğreticide kullanılan çözümün tamamı DOTNET5-UserOwnsData-Tutorial GitHub deposunda sağlanır.

Önkoşullar

Kaynaklar

Bu öğreticide şunları kullanacaksınız:

Metot

Power BI içeriğini kuruluşunuza yönelik bir ekleme çözümüne eklemek için şu adımları izleyin:

  1. Microsoft Entra uygulamanızı yapılandırma
  2. Ekleme parametresi değerlerini alma
  3. Gerekli NuGet paketlerini ekleme
  4. Sunucu tarafı kimlik doğrulamasını etkinleştirme
  5. Uygulamanızın istemci tarafını oluşturma
  6. Uygulamanızı çalıştırma

1. Adım - Microsoft Entra uygulamanızı yapılandırma

Web uygulamanız Power BI'ı çağırdığında Power BI REST API'lerini çağırmak ve raporlar, panolar veya kutucuklar gibi Power BI öğelerini eklemek için bir Microsoft Entra belirtecine ihtiyaç duyar.

Microsoft Entra uygulamanız yoksa Bir Microsoft Entra uygulamasını Power BI ile kullanmak üzere kaydetme başlığındaki yönergeleri kullanarak bir uygulama oluşturun.

Microsoft Entra uygulamanızı yapılandırmak için Microsoft Entra uygulamanızı yapılandırma başlığındaki yönergeleri izleyin.

2. Adım - Ekleme parametresi değerlerini alma

Raporunuzu eklemek için aşağıdaki değerlere ihtiyacınız vardır:

Etki alanı ve kiracı kimliği

Etki alanınızı veya kiracı kimliğinizi bilmiyorsanız bkz . Microsoft Entra kiracı kimliğini ve birincil etki alanı adını bulma.

Not

Kullanıcının içeriğini farklı bir kiracıya (konuk kullanıcı) eklemek için parametresini authorityUri ayarlamanız gerekir.

Client ID

İstemci kimliği GUID'sini (uygulama kimliği olarak da bilir) almak için şu adımları izleyin:

  1. Microsoft Azure'da oturum açın.

  2. Uygulama kayıtları arayın ve Uygulama kayıtları bağlantısını seçin.

  3. Power BI içeriğinizi eklemek için kullandığınız Microsoft Entra uygulamasını seçin.

  4. Genel Bakış bölümünden Uygulama (istemci) Kimliği GUID'sini kopyalayın.

İstemci gizli anahtarı

İstemci gizli dizisini almak için şu adımları izleyin:

  1. Microsoft Azure'da oturum açın.

  2. Uygulama kayıtları arayın ve Uygulama kayıtları bağlantısını seçin.

  3. Power BI içeriğinizi eklemek için kullandığınız Microsoft Entra uygulamasını seçin.

  4. Yönet'in altında Sertifikalar ve gizli diziler'i seçin.

  5. İstemci gizli dizileri'nin altında Yeni istemci gizli dizisi'ni seçin.

  6. İstemci gizli dizisi ekle açılır penceresinde, uygulama gizli diziniz için bir açıklama sağlayın, uygulama gizli dizisinin süresinin ne zaman doleceğini seçin ve Ekle'yi seçin.

  7. İstemci gizli dizileri bölümünden, yeni oluşturulan uygulama gizli dizisinin Value sütunundaki dizeyi kopyalayın. İstemci gizli anahtarı değeri, istemci kimliğinizdir.

Not

İstemci gizli anahtarı değerini ilk göründüğünde kopyaladığınızdan emin olun. Bu sayfadan uzaklaştıktan sonra gizli dizi gizlenir ve değerini alamazsınız.

Çalışma Alanı Kimliği

Çalışma alanı kimliği GUID'sini almak için şu adımları izleyin:

  1. Power BI hizmetinde oturum açma.

  2. Eklemek istediğiniz raporu açın.

  3. URL'den GUID'yi kopyalayın. GUID, /groups/ ve /reports/ arasındaki sayıdır.

    Power BI hizmeti URL'sinde çalışma alanı kimliği GUID'sini gösteren ekran görüntüsü

Not

Çalışma alanı kimliğini program aracılığıyla almak için Get Groups API'sini kullanın.

Rapor Kimliği

Rapor kimliği GUID'sini almak için şu adımları izleyin:

  1. Power BI hizmetinde oturum açma.

  2. Eklemek istediğiniz raporu açın.

  3. URL'den GUID'yi kopyalayın. GUID, /reports/ ve /ReportSection arasındaki sayıdır.

    Power BI hizmeti U R L'de rapor kimliği GUID'sini gösteren ekran görüntüsü

Not

Rapor kimliğini program aracılığıyla almak için Gruptaki Raporları Al API'sini kullanın.

3. Adım - Gerekli NuGet paketlerini ekleme

Başlamadan önce, ve NuGet paketlerini uygulamanıza eklemeniz Microsoft.Identity.WebMicrosoft.PowerBI.Api gerekir.

Aşağıdaki NuGet paketlerini uygulamanıza ekleyin:

  • VS Code'da bir terminal açın ve aşağıdaki kodu yazın.

  • Visual Studio'da Araçlar>NuGet Paket Yöneticisi> Paket Yöneticisi Konsolu'na gidin ve aşağıdaki kodu yazın.

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

Uygulamanız daha önce kimlik doğrulaması yapmak için kullandıysa Microsoft.AspNetCore , şu komutu yazarak bu paketi projenizden kaldırın:

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

4. Adım - Sunucu tarafı kimlik doğrulamasını etkinleştirme

Aşağıdaki tabloda yer alan dosyaları oluşturarak veya değiştirerek uygulamanızda sunucu tarafı kimlik doğrulamasını etkinleştirin.

Dosya Kullanma
Startup.cs Microsoft.Identity.Web Kimlik doğrulama hizmetini başlatma
appsettings.json Kimlik doğrulaması ayrıntıları
PowerBiServiceApi.cs Microsoft Entra belirtecini alma ve meta verileri ekleme
HomeController.cs Ekleme verilerini görünüme model olarak geçirme

Başlangıç dosyanızı destekleyecek şekilde yapılandırma Microsoft.Identity.Web

tarafından Microsoft.Identity.Websağlanan kimlik doğrulama hizmetini düzgün bir şekilde başlatmak için Startup.cs kodunu değiştirin.

Uygulamanızın Startup.cs dosyasına aşağıdaki kod parçacığını ekleyin.

Not

içindeki ConfigureServices kod birkaç önemli şeyi gerçekleştirir:

  1. çağrısı AddMicrosoftWebAppCallsWebApi , erişim belirteçleri (Microsoft Entra belirteçleri) almak için Microsoft Kimlik Doğrulama Kitaplığı'nı yapılandırıyor.
  2. Çağrısı AddInMemoryTokenCaches , Microsoft Kimlik Doğrulama Kitaplığı'nın arka planda erişim belirteçlerini önbelleğe almak ve belirteçleri yenilemek için kullanacağı bir belirteç önbelleği yapılandırır
  3. çağrısı services.AddScoped(typeof(PowerBiServiceApi)) , sınıfı bağımlılık ekleme kullanılarak diğer sınıflara PowerBiServiceApi eklenebilen bir hizmet sınıfı olarak yapılandırılır.
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();

    }
  }
}

Kimlik doğrulama ayrıntıları dosyası oluşturma

Bu öğreticideappsettings.json, dosya istemci kimliği ve istemci gizli dizisi gibi hassas bilgiler içerir. Güvenlik nedeniyle, bu bilgilerin ayarlar dosyasında tutulmasını önermeyiz. Uygulamanıza eklerken, bu bilgileri tutmak için Azure Key Vault gibi daha güvenli bir yöntem kullanmayı göz önünde bulundurun.

  1. Projenizde yeni bir dosya oluşturun ve appsettings.json olarak adlandırınız.

  2. appsettings.json aşağıdaki kodu ekleyin:

    {
        "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. Adım - Ekleme parametresi değerlerini alma bölümünden alınan ekleme parametresi değerlerini doldurun.

Not

Önceki kod parçacığında parametresi, PowerBi:ServiceRootUrl Power BI hizmeti temel URL'sini izlemek için özel bir yapılandırma değeri olarak eklenir. Microsoft genel bulutundaki Power BI hizmeti karşı programlama yaparken URL şeklindedirhttps://api.powerbi.com/. Ancak, Power BI hizmeti kök URL'si kamu bulutu gibi diğer bulutlarda farklı olacaktır. Bu nedenle, bu değer bir proje yapılandırma değeri olarak depolanır, bu nedenle gerektiğinde kolayca değiştirilebilir.

Microsoft Entra erişim belirtecini alın ve Power BI hizmeti

Power BI içeriğini (raporlar ve panolar gibi) eklemek için uygulamanızın bir Microsoft Entra belirteci alması gerekir. Belirteci almak için bir yapılandırma nesnesi gerekir.

Bu bölümdeki kod .NET Core bağımlılık ekleme desenini kullanır. Sınıfınızın bir hizmet kullanması gerektiğinde, bu hizmet için bir oluşturucu parametresi ekleyebilirsiniz ve .NET Core çalışma zamanı, hizmet örneğini çalışma zamanında geçirme işlemini üstlenir. Bu durumda oluşturucu, yapılandırma değerini appsettings.json almak için kullanılan parametresini IConfiguration kullanarak .NET Core yapılandırma hizmetinin bir örneğini PowerBi:ServiceRootUrl ekler. ITokenAcquisition adlı tokenAcquisition parametresi, kitaplık tarafından Microsoft.Identity.Web sağlanan Microsoft kimlik doğrulama hizmetine bir başvuruyu barındırıyor ve Microsoft Entra Id'den erişim belirteçleri almak için kullanılır.

alanı, RequiredScopes Power BI hizmeti API tarafından desteklenen bir dizi temsilci izin içeren bir dize dizisi içerir. Uygulamanız bir Microsoft Entra belirteci almak için ağ üzerinden çağırdığında, Microsoft Entra Id'nin bunları döndürdüğü erişim belirtecine ekleyebilmesi için bu temsilci izinleri kümesini geçirir.

Not

Microsoft Entra uygulamanızın web uygulamanızın gerektirdiği kapsamlarla yapılandırıldığını doğrulayın. Daha fazla bilgi için bkz . Microsoft Entra uygulamanızın izinlerini değiştirme.

  1. Uygulamanızın projesinde Hizmetler adlı yeni bir klasör oluşturun.

  2. Hizmetler klasöründe PowerBiServiceApi.cs adlı yeni bir dosya oluşturun.

  3. aşağıdaki kodu PowerBiServiceApi.cs ekleyin.

    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 dosyasını değiştirme

Bu kod örneğinde bağımlılık ekleme özelliğini kullanırsınız. yöntemini çağırarak services.AddScoped sınıfını bir hizmet olarak kaydettiniz.PowerBiServiceApi ConfigureServices Oluşturucuya bir PowerBiServiceApi parametre ekleyebilirsiniz ve .NET Core çalışma zamanı bir PowerBiServiceApi örnek oluşturup oluşturucuya geçirme işlemini üstlenir.

Denetleyiciler klasöründen HomeController.cs dosyasını açın ve aşağıdaki kod parçacığına ekleyin:

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. Adım - Uygulamanızın istemci tarafını oluşturma

İstemci tarafı uygulaması için aşağıdaki tabloda dosyaları oluşturmanız veya değiştirmeniz gerekir.

Dosya Kullanma
embed.js İstemci tarafı JavaScript kodunu içerir
Embed.cshtml Uygulamanızın belge nesne modelini (DOM) ve raporu eklemek için bir DIV içerir

Eklenmiş raporunuz için kapsayıcı oluşturma

Katıştırılmış raporunuz için kapsayıcı olarak kullanılan bir div öğesi ve üç betik içeren Embed.cshtml dosyasını oluşturun.

  1. Giriş Sayfasını Görüntüle>klasöründe Embed.cshtml adlı bir dosya oluşturun.

  2. Embed.cshtml dosyasına aşağıdaki kod parçacığını ekleyin.

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

Raporunuzu eklemek için istemci tarafı JavaScript ekleme

Power BI içeriği eklemek için bir yapılandırma nesnesi oluşturmanız gerekir. Yapılandırma nesnesi oluşturma hakkında daha fazla bilgi edinmek için bkz . Rapor ekleme.

Bu bölümde, değişkenini modelskullanarak raporunuzu eklemek için yapılandırma nesnesiyle embed.js adlı bir JavaScript dosyası oluşturacaksınız.

models çağrısı kullanılarak window['powerbi-client'].modelsbaşlatılır. models değişkeni, , models.TokenType.Aadve models.ViewMode.Viewgibi models.Permissions.Allyapılandırma değerlerini ayarlamak için kullanılır.

İşlev, powerbi.embed raporunuzu eklemek için yapılandırma nesnesini kullanır models .

  1. wwwroot>js klasöründe embed.js adlı bir dosya oluşturun.

  2. aşağıdaki kod parçacığını embed.js dosyasına ekleyin.

    $(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. Adım : Uygulamanızı çalıştırma

Bu öğreticide listelenen tüm ayarlamaları yaptıktan sonra uygulamanızı çalıştırmaya hazır olursunuz. Uygulamanızı yürütür ve Power BI raporunuzun katıştırılmış şekliyle denemeler yapın. İstemci tarafı API'lerini kullanarak uygulamanızı geliştirmek için Power BI tümleşik analiz İstemci API'lerini kullanabilirsiniz.

Uygulamanız hazır olduğunda, eklenmiş uygulamanızı üretim ortamına taşıyabilirsiniz.