Compartir a través de

Tutorial: Inserción de un informe de Power BI en una aplicación para su organización

En este tutorial se explica cómo insertar un informe de Power BI en una aplicación de .NET 5.0, como parte de la solución de inserción para su organización (también conocida como datos propios del usuario). En una solución de integración para tu organización, los usuarios de la aplicación deben autenticarse en Power BI con sus propias credenciales.

En este tutorial, obtendrá información sobre cómo insertar lo siguiente:

  • Un informe de Power BI
  • En una aplicación de inserción para la organización
  • Mediante .NET 5.0
  • Con la biblioteca Microsoft.Identity.Web (esta biblioteca también se admite en .NET Core)

Nota

La solución completa que se usa en este tutorial está disponible en el repositorio de GitHub DOTNET5-UserOwnsData-Tutorial .

Requisitos previos

Recursos

En este tutorial, utilizará:

Método

Para insertar contenido de Power BI en una solución de inserción para la organización , siga estos pasos:

  1. Configuración de la aplicación Microsoft Entra
  2. Obtención de los valores del parámetro de inserción
  3. Adición de los paquetes NuGet necesarios
  4. Habilitación de la autenticación del lado servidor
  5. Construir el lado cliente de tu aplicación
  6. Ejecución de la aplicación

Paso 1: Configurar la aplicación Microsoft Entra

Cuando la aplicación web llama a Power BI, necesita un token de Microsoft Entra para llamar a las API rest de Power BI e insertar elementos de Power BI como informes, paneles o iconos.

Si no tiene una aplicación de Microsoft Entra, cree una con las instrucciones de Registro de una aplicación de Microsoft Entra para usarla con Power BI.

Para configurar la aplicación De Microsoft Entra, siga las instrucciones de Configuración de la aplicación Microsoft Entra.

Paso 2: Obtener los valores de parámetro de la inserción

Para insertar el informe, necesita los valores siguientes:

Id. de dominio e inquilino

Si no conoce el dominio o el identificador de inquilino, consulte Buscar el identificador de inquilino de Microsoft Entra y el nombre de dominio principal.

Nota

Para insertar contenido para un usuario en un tenant diferente (un usuario invitado), debe ajustar el authorityUriparámetro.

Id. de cliente

Para obtener el GUID del identificador de cliente (también conocido como identificador de aplicación), siga estos pasos:

  1. Inicie sesión en Microsoft Azure.

  2. Busque Registros de aplicaciones y seleccione el vínculo Registros de aplicaciones .

  3. Seleccione la aplicación de Microsoft Entra que usa para insertar el contenido de Power BI.

  4. En la sección Información general, copie el GUID del identificador de la aplicación (cliente).

Secreto del cliente

Para obtener el secreto de cliente, haga lo siguiente:

  1. Inicie sesión en Microsoft Azure.

  2. Busque Registros de aplicaciones y seleccione el vínculo Registros de aplicaciones .

  3. Seleccione la aplicación de Microsoft Entra que usa para insertar el contenido de Power BI.

  4. En Administrar, seleccione Certificados y secretos.

  5. En Secretos de cliente, seleccione Nuevo secreto de cliente.

  6. En la ventana emergente Agregar un secreto de cliente , proporcione una descripción para el secreto de aplicación, seleccione cuando expire el secreto de aplicación y seleccione Agregar.

  7. En la sección Secretos de cliente , copie la cadena en la columna Valor del secreto de aplicación recién creado. El valor del secreto de cliente es el identificador de cliente.

Nota

Asegúrese de copiar el valor de secreto de cliente cuando aparezca por primera vez. Después de salir de esta página, el secreto de cliente se ocultará y no podrá recuperar su valor.

Id. del área de trabajo

Para obtener el GUID del identificador del área de trabajo, haga lo siguiente:

  1. Inicie sesión en el servicio Power BI.

  2. Abra el informe que quiera insertar.

  3. Copie el GUID de la dirección URL. El GUID es el número entre /groups/ y /reports/.

    Captura de pantalla que muestra el GUID del identificador del área de trabajo en la dirección URL del servicio Power BI

Nota

Para obtener el identificador del área de trabajo mediante programación, use get groups API.

Report ID (Id. de informe)

Para obtener el GUID del id. del informe, haga lo siguiente:

  1. Inicie sesión en el servicio Power BI.

  2. Abra el informe que quiera insertar.

  3. Copie el GUID de la dirección URL. El GUID es el número entre /reports/ y /ReportSection.

    Captura de pantalla que muestra el GUID del identificador de informe en el servicio Power BI U R L

Nota

Para obtener el identificador de informe mediante programación, use la API Obtener informes en grupo .

Paso 3: Agregar los paquetes NuGet necesarios

Antes de empezar, debe agregar los paquetes NuGet Microsoft.Identity.Web y Microsoft.PowerBI.Api a la aplicación.

Agregue los siguientes paquetes NuGet a la aplicación:

  • En VS Code, abra un terminal y escriba el código siguiente.

  • En Visual Studio, vaya a Herramientas>Administrador de paquetes NuGet>Consola del Administrador de Paquetes y escriba el código siguiente.

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

Si la aplicación ha usado anteriormente Microsoft.AspNetCore para autenticarse, escriba lo siguiente a fin de quitar este paquete del proyecto:

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

Paso 4: Habilitar la autenticación del lado servidor

Active la autenticación del lado servidor en la aplicación mediante la creación o modificación de los archivos de la tabla siguiente.

Archivo Uso
Startup.cs Inicializar el servicio de autenticación Microsoft.Identity.Web
appsettings.json Detalles de la autenticación
PowerBiServiceApi.cs Obtener el token de Microsoft Entra y los metadatos de inserción
HomeController.cs Pasar los datos de inserción como modelo a la vista

Configuración del archivo de inicio para admitir Microsoft.Identity.Web

Modifique el código de Startup.cs para inicializar correctamente el servicio de autenticación proporcionado por Microsoft.Identity.Web.

Agregue el siguiente fragmento de código al archivo Startup.cs de la aplicación.

Nota

El código de ConfigureServices logra varias cosas importantes:

  1. La llamada a AddMicrosoftWebAppCallsWebApi configura la biblioteca de autenticación de Microsoft para adquirir tokens de acceso (tokens de Microsoft Entra).
  2. La llamada a AddInMemoryTokenCaches configura una caché de tokens que la biblioteca de autenticación de Microsoft usará para almacenar en caché los tokens de acceso y actualizar los tokens en segundo plano
  3. La llamada a services.AddScoped(typeof(PowerBiServiceApi)) configura la clase PowerBiServiceApi como una clase de servicio que se puede agregar a otras clases mediante la inserción de dependencias.
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();

    }
  }
}

Creación de un archivo de detalles de autenticación

En este tutorial, el archivo contiene información confidencial, como el identificador de cliente y el appsettings.jsonsecreto de cliente. Por motivos de seguridad, no se recomienda mantener esta información en el archivo de configuración. Al insertar en la aplicación, considere un método más seguro, como Azure Key Vault , para mantener esta información.

  1. En el proyecto, cree un nuevo archivo y llámelo appsettings.json.

  2. Agregue el código siguiente a 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. Rellene los valores de parámetros de inserción obtenidos del paso 2: Obtener los valores de parámetros de inserción.

Nota

En el fragmento de código anterior, el parámetro PowerBi:ServiceRootUrl se agrega como un valor de configuración personalizado para realizar el seguimiento de la dirección URL base al servicio Power BI. Cuando se programa con el servicio Power BI en la nube pública de Microsoft, la dirección URL es https://api.powerbi.com/. Sin embargo, la dirección URL raíz del servicio Power BI será diferente en otras nubes, como la nube gubernamental. Por tanto, este valor se almacena como un valor de configuración del proyecto, por lo que es fácil cambiarlo cuando es necesario.

Obtención del token de acceso de Microsoft Entra y llamada al servicio Power BI

Para insertar contenido de Power BI (como informes y paneles), la aplicación debe obtener un token de Microsoft Entra. Para obtener el token, necesita un objeto de configuración.

El código de esta sección usa el patrón de inserción de dependencias de .NET Core. Cuando la clase necesita usar un servicio, puede agregar un parámetro de constructor para ese servicio y el entorno de ejecución de .NET Core se encarga de pasar la instancia de servicio en tiempo de ejecución. En este caso, el constructor inserta una instancia del servicio de configuración de .NET Core mediante el IConfiguration parámetro , que se usa para recuperar el PowerBi:ServiceRootUrl valor de configuración de appsettings.json. ElITokenAcquisition parámetro, denominado tokenAcquisition contiene una referencia al servicio de autenticación de Microsoft proporcionado por la biblioteca de Microsoft.Identity.Web y se usa para adquirir tokens de acceso de Microsoft Entra ID.

El RequiredScopes campo contiene una matriz de cadenas que contiene un conjunto de permisos delegados admitidos por la API del servicio Power BI. Cuando la aplicación llama a través de la red para adquirir un token de Microsoft Entra, pasa este conjunto de permisos delegados para que Microsoft Entra ID pueda incluirlos en el token de acceso que devuelve.

Nota

Compruebe que la aplicación Microsoft Entra está configurada con los ámbitos requeridos por la aplicación web. Para obtener más información, consulte Cambiar los permisos de la aplicación Microsoft Entra.

  1. En el proyecto de la aplicación, cree una carpeta denominada Servicios.

  2. En la carpeta Servicios , cree un nuevo archivo titulado PowerBiServiceApi.cs.

  3. Agregue el código siguiente a 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()
   };
  }

 }

}

Modificación del archivo HomeController.cs

En este ejemplo de código, se usa la inserción de dependencias. A medida que ha registrado la clase PowerBiServiceApi como servicio mediante una llamada a services.AddScoped en el método ConfigureServices, Puede agregar un parámetro PowerBiServiceApi al constructor y el entorno de ejecución de .NET Core se encargará de crear una instancia PowerBiServiceApi y pasarla al constructor.

En la carpeta Controllers , abra el archivo HomeController.cs y agréguelo al siguiente fragmento de código:

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

Paso 5: Compilar el lado cliente de la aplicación

Para la implementación en el lado cliente, debe crear o modificar los archivos de la tabla siguiente.

Archivo Uso
embed.js Contiene el código JavaScript del lado cliente.
Embed.cshtml Contiene el modelo de objetos de documento (DOM) de la aplicación y un elemento DIV para insertar el informe.

Creación de un contenedor para el informe insertado

Cree el archivo Embed.cshtml , que tiene un div elemento que se usa como contenedor para el informe incrustado y tres scripts.

  1. En la carpeta Ver>inicio , cree un archivo denominado Embed.cshtml.

  2. Agregue el siguiente fragmento de código al archivo 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>
}

Incorporación de JavaScript del lado cliente para insertar el informe

Para insertar contenido de Power BI, debe crear un objeto de configuración. Para más información sobre cómo crear el objeto de configuración, consulte Inserción de un informe.

En esta sección, creará un archivo de JavaScript denominado embed.js con un objeto de configuración para insertar el informe mediante la variable models.

models se inicializa mediante una llamada a window['powerbi-client'].models. La variable models se usa para establecer valores de configuración, como models.Permissions.All, models.TokenType.Aad y models.ViewMode.View.

La función powerbi.embed usa el objeto de configuración models para insertar el informe.

  1. En la carpeta wwwroot>js , cree un archivo denominado embed.js.

  2. Agregue el siguiente fragmento de código al archivo 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);
    });

});

Paso 6: Ejecutar la aplicación

Una vez que haya realizado todos los ajustes enumerados en este tutorial, estará a punto para ejecutar la aplicación. Ejecute la aplicación y experimente con la forma en que se inserta el informe de Power BI. Puede usar las API de cliente de Power BI para análisis incrustados para mejorar su aplicación mediante las API del lado del cliente.

Cuando tu aplicación esté lista, puedes mover tu aplicación embebida a producción.

Contenido relacionado