Aprenda a integrar o insertar un panel en una aplicación web con C# y la API de Power BI, además de código JavaScript.

Para empezar a trabajar con este tutorial, necesita una cuenta de Power BI. Si no tiene una cuenta, consulte Suscribirse a Power BI.

Para integrar un panel en una aplicación web, use la API de Power BI y un token de acceso de autorización de Azure Active Directory (AD) para obtener un panel. Después, cargue el panel en un elemento div usando el mismo token de acceso. La API de Power BI proporciona acceso mediante programación a determinados recursos de Power BI. Para más información, consulte Información general sobre la API de REST de Power BI y la API de JavaScript para Power BI.

Descarga del ejemplo

En este artículo se muestra el código usado en el ejemplo de integración de un panel en GitHub. Para seguir este tutorial, debe descargar el ejemplo.

Paso 1: Registrar una aplicación en Azure AD

Para poder usar la API de Power BI, tendrá que registrar una aplicación con el inquilino de Azure Active Directory. Debe hacerlo en primer lugar para tener un id. de cliente y un secreto de cliente que identifique la aplicación web en Azure AD. Sin un id. de cliente y el secreto de cliente, Azure AD no puede autenticar la aplicación web. Si descargó el ejemplo de integración de un panel, utilice el id. de cliente y el secreto de cliente que obtuvo después del registro para configurar el ejemplo, para que el ejemplo pueda realizar la autenticación de Azure AD.

Hemos creado una página que le ayudará con el registro. Puede ir a dev.powerbi.com/apps para realizar este paso.

  1. Vaya a www.powerbi.com/apps.

  2. Haga clic en Iniciar sesión con una cuenta existente e inicie sesión en su cuenta de Power BI.

  3. Escriba un nombre de la aplicación. En este tutorial, especifique el ejemplo de integración de un panel.

  4. En Tipo de aplicación, seleccione Server-side Web app (Aplicación web del servidor) en la lista desplegable.

  5. Especifique una dirección URL de redireccionamiento en Redirect URL. En este tutorial, Azure AD le redirige a la página predeterminada. Por lo tanto, escriba http://localhost:13526. Azure Active Directory (AD) le redirigirá a esta página con un código de autorización. Para obtener información sobre cómo adquirir un token de acceso para obtener acceso a los paneles de Power BI mediante un código de autorización, consulte Obtener un token de acceso de autenticación.

  6. Escriba una página principal. En este tutorial, escriba http://localhost:13526, que es la página principal del ejemplo.

  7. En Choose APIs to access (Elegir API para obtener acceso), elija Read All Dashboards (Leer todos los paneles). Para conocer todos los permisos de la aplicación de Power BI, consulte Permisos de aplicación.

  8. Seleccione Register App (Registrar aplicación) y guarde el id. de cliente y el secreto de cliente generado. Un id. de cliente y un secreto de cliente se identifica con una aplicación en Azure AD.

Configurar la aplicación de ejemplo

Si descargó el ejemplo de integración de un panel, utilice el id. de cliente y el secreto de cliente que obtuvo después del registro para que el ejemplo pueda realizar la autenticación en Azure AD. Para configurar el ejemplo, cambie el id. de cliente y el secreto del cliente en el archivo web.config.

Paso 2: Obtener un panel

Para obtener un panel de Power BI, utilice la operación Obtener paneles que obtiene una lista de paneles de Power BI. En la lista de paneles, puede obtener un id. del panel.

Token de acceso de Azure Active Directory

Para poder invocar la operación Obtener paneles o cualquier otra operación de Power BI, debe obtener un token de acceso de autenticación de Azure Active Directory (token de acceso). Se utiliza un token de acceso para permitir el acceso de la aplicación a los paneles, iconos e informes de Power BI. Para obtener información acerca del flujo del token de acceso de Azure Active Directory, consulte Flujo de concesión de código de autorización de Azure AD. La sección siguiente muestra cómo obtener un token de acceso en una aplicación web.

Obtener un código de autorización de Azure AD

El primer paso para obtener un token de acceso consiste en obtener un código de autorización de Azure AD. Para ello, cree una cadena de consulta con las siguientes propiedades y vuelva a Azure AD.

Cadena de consulta del código de autorización

var @params = new NameValueCollection
{
    //Azure AD will return an authorization code.
    {"response_type", "code"},

    //Client ID is used by the application to identify themselves to the users that they are requesting permissions from.
    //You get the client id when you register your Azure app.
    {"client_id", Settings.Default.ClientID},

    //Resource uri to the Power BI resource to be authorized
    //The resource uri is hard-coded for sample purposes
    {"resource", "https://analysis.windows.net/powerbi/api"},

    //After app authenticates, Azure AD will redirect back to the web app. In this sample, Azure AD redirects back
    //to Default page (Default.aspx).
    { "redirect_uri", Settings.Default.RedirectUri}
};

Después de crear una cadena de consulta, vuelva a Azure AD para obtener un código de autorización. A continuación se muestra un método de C# completo para crear una cadena de consulta de código de autorización y volver a Azure AD. Después obtendrá un token de acceso con el código de autorización.

Obtener un código de autorización

protected void signInButton_Click(object sender, EventArgs e)
{
    //Create a query string
    //Create a sign-in NameValueCollection for query string
    var @params = new NameValueCollection
    {
        //Azure AD will return an authorization code. 
        //See the Redirect class to see how "code" is used to AcquireTokenByAuthorizationCode
        {"response_type", "code"},

        //Client ID is used by the application to identify themselves to the users that they are requesting permissions from. 
        //You get the client id when you register your Azure app.
        {"client_id", Properties.Settings.Default.ClientID},

        //Resource uri to the Power BI resource to be authorized
        {"resource", Properties.Settings.Default.PowerBiAPI},

        //After user authenticates, Azure AD will redirect back to the web app
        {"redirect_uri", "http://localhost:13526/Redirect"}
    };

    //Create sign-in query string
    var queryString = HttpUtility.ParseQueryString(string.Empty);
    queryString.Add(@params);

    //Redirect authority
    //Authority Uri is an Azure resource that takes a client id to get an Access token
    string authorityUri = Properties.Settings.Default.AADAuthorityUri;
    var authUri = String.Format("{0}?{1}", authorityUri, queryString);
    Response.Redirect(authUri);
}

Obtener un token de acceso del código de autorización

Ahora debe tener un código de autorización de Azure AD. Una vez que Azure AD vuelve a su aplicación web con un código de autorización, utiliza el código de autorización para obtener un token de acceso. A continuación se muestra un ejemplo de C# que puede usar en el evento Page_Load.

protected void Page_Load(object sender, EventArgs e)
{

    //Test for AuthenticationResult
    if (Session[authResultString] != null)
    {
        //Get the authentication result from the session
        authResult = (AuthenticationResult)Session[authResultString];

        //Show Power BI Panel
        signInStatus.Visible = true;
        signInButton.Visible = false;

        //Set user and token from authentication result
        userLabel.Text = authResult.UserInfo.DisplayableId;
        accessTokenTextbox.Text = authResult.AccessToken;
    }
}

Obtener un panel con un token de acceso

Ahora que tiene un token de acceso, puede invocar la operación Obtener paneles. La operación Obtener paneles devuelve una lista de paneles. Puede obtener un panel de la lista de paneles. A continuación se muestra un método de C# completo para obtener un panel. Para ver ejemplos de cómo usar la API de REST de Power BI, consulte API de REST de Power BI en APIARY.

Obtener panel

protected void getDashboardsButton_Click(object sender, EventArgs e)
{
    string responseContent = string.Empty;

    //Configure dashboards request
    System.Net.WebRequest request = System.Net.WebRequest.Create(String.Format("{0}dashboards", baseUri)) as System.Net.HttpWebRequest;
    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", authResult.AccessToken));

    //Get dashboards response from request.GetResponse()
    using (var response = request.GetResponse() as System.Net.HttpWebResponse)
    {
        //Get reader from response stream
        using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
        {
            responseContent = reader.ReadToEnd();

            //Deserialize JSON string
            PBIDashboards PBIDashboards = JsonConvert.DeserializeObject<PBIDashboards>(responseContent);

            if (PBIDashboards != null)
            {
                var gridViewDashboards = PBIDashboards.value.Select(dashboard => new {
                    Id = dashboard.id,
                    DisplayName = dashboard.displayName,
                    EmbedUrl = dashboard.embedUrl
                });

                this.GridView1.DataSource = gridViewDashboards;
                this.GridView1.DataBind();
            }
        }
    }
}

//Power BI Dashboards used to deserialize the Get Dashboards response.
public class PBIDashboards
{
    public PBIDashboard[] value { get; set; }
}
public class PBIDashboard
{
    public string id { get; set; }
    public string displayName { get; set; }
    public string embedUrl { get; set; }
    public bool isReadOnly { get; set; }
}

Paso 3: Carga de un panel con JavaScript

Puede usar JavaScript para cargar un panel en un elemento div en su página web.

<input type="text" id="tb_EmbedURL" style="width: 1024px;" />
<input type="button" id="bEmbedDashboardAction" value="Embed Dashboard" />
<div id="dashboardContainer"></div>


window.onload = function () {
    // client side click to embed a selected dashboard.
    var el = document.getElementById("bEmbedDashboardAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedDashboard, false);
    } else {
        el.attachEvent('onclick', updateEmbedDashboard);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded dashboard if all fields were filled in.
    var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedDashboard();
    }
};

// update embed dashboard
function updateEmbedDashboard() {

    // check if the embed url was selected
    var embedUrl = document.getElementById('tb_EmbedURL').value;
    if (embedUrl === "")
        return;

    // get the access token.
    accessToken = document.getElementById('MainContent_accessTokenTextbox').value;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the dashboard.
    var dashboardContainer = document.getElementById('dashboardContainer');

    // Embed the dashboard and display it within the div container.
    var dashboard = powerbi.embed(dashboardContainer, config);

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.on("tileClicked", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Tile Clicked<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.on("error", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Error<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });
}

Si ha descargado y ejecutado el ejemplo de integración de un panel, el ejemplo tendrá un aspecto parecido al siguiente.

Eventos de clic en el icono

En el ejemplo anterior, habrá observado que puede controlar los eventos de clic en el icono en el panel. Para más información acerca de los eventos, consulte Control de eventos en la API de JavaScript.

// dashboard.on will add an event handler which prints to Log window.
dashboard.on("tileClicked", function (event) {
    var logView = document.getElementById('logView');
    logView.innerHTML = logView.innerHTML + "Tile Clicked<br/>";
    logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
    logView.innerHTML = logView.innerHTML + "---------<br/>";
});

// dashboard.on will add an event handler which prints to Log window.
dashboard.on("error", function (event) {
    var logView = document.getElementById('logView');
    logView.innerHTML = logView.innerHTML + "Error<br/>";
    logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
    logView.innerHTML = logView.innerHTML + "---------<br/>";
});

Si ha descargado y ejecutado el ejemplo de integración de un panel, al hacer clic en un icono aparecerá un texto debajo del panel. Su aspecto será parecido al siguiente. Esto le permitiría registrar que se ha hecho clic en un icono y, a continuación, llevar al usuario a

Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "", "navigationUrl": "https://app.powerbi.com/dashboards/fcff76f9-15ff-4a8e-8242-275ac9c25b90/qna?q=count%20of%20new%20hires%20from%20July%202014%20to%20December%202014", "tileId": "0e99b45c-9b53-4920-b239-cee7d37d2369" }
---------
Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "https://app.powerbi.com/reportEmbed?reportId=ab199308-80b1-4626-9823-43a84623bd9c", "navigationUrl": "https://app.powerbi.com/reports/ab199308-80b1-4626-9823-43a84623bd9c/ReportSection1", "tileId": "ffc30447-674a-4511-944f-79e182d719de", "pageName": "ReportSection1" }
---------

Trabajar con grupos

Para insertar un panel en un grupo, deberá obtener la lista de todos los paneles disponibles dentro de un grupo mediante la siguiente llamada a la API de REST. Para más información acerca de esta llamada API de REST, consulte Get Dashboards (Obtener paneles).

https://api.powerbi.com/v1.0/myorg/groups/{groupId}/dashboards

La API anterior devuelve la lista de los paneles disponibles. Cada panel tiene una propiedad EmbedUrl que ya se crea para admitir la inserción del grupo.

https://app.powerbi.com/dashboardEmbed?dashboardId={dashboardId}&groupId={groupId}

Limitaciones

  • Los usuarios finales que tienen acceso a los paneles insertados deben tener cuentas de Power BI y los paneles deben estar compartidos con ellos.

  • Actualmente no se admiten preguntas y respuestas en los paneles insertados.

  • Como limitación temporal, al compartir un panel con grupos de seguridad, el usuario debe acceder primero a los paneles de PowerBI.com antes de poder verlo insertado.

Vea también

Suscribirse en Power BI
Integrate a dashboard sample (Ejemplo de integración de un panel)
Permisos de aplicación
API de JavaScript para Power BI
API de REST de Power BI en APIARY
¿Tiene más preguntas? Pruebe la comunidad de Power BI