¿Power BI Embedded para React es posible?

Tenía el mismo requisito, después de pasar mucho tiempo buscando en Google y revisando algunos de los enfoques sugeridos anteriormente, finalmente pude incrustar los informes en la aplicación de reacción; Pero surge el problema «Autenticación explícita», lo que significa que el usuario debe iniciar sesión a través del inicio de sesión de anuncios de Azure, una vez que la respuesta de inicio de sesión se redirige a la aplicación según la configuración de redirect_url en el panel de la aplicación de Azure. Lo cual no se ajustaba a mis requisitos porque el usuario ya había iniciado sesión en nuestra aplicación con credenciales regulares;

Lo que pensé que era el mejor enfoque es:

1. Utilice el inicio de sesión asincrónico silencioso y obtenga el token
2. Pase el token a la API de PowerBI Embed

Para el paso 1: he escrito un servicio de nodo curl simple

const { Curl } = require(‘node-libcurl’);

const ruta = require(‘ruta’);

const tls = require(‘tls’)

const fs = require (‘fs’)

módulo.exportaciones = {

powerBiAuth: asíncrono (requerido, res) => {

const certFilePath = ruta.join(__dirname, ‘cert.pem’)

const tlsData = tls.rootCertificates.join(‘n’)

fs.writeFileSync(certFilePath, tlsData)

const url = ‘https://login.microsoftonline.com/common/oauth2/token’;

const opts = [

            { name: ‘grant_type’, contents: ‘password’},

            { name: ‘scope’, contents: ‘openid’},

            { name: ‘resource’, contents: ‘https://analysis.windows.net/powerbi/api’},

            { name: ‘client_id’, contents: ‘*******-****-****-****-*********’},

            { name: ‘username’, contents: ‘user-email’},

            { name: ‘password’, contents: ‘password’},

        ];

const curl = new Curl();

curl.setOpt(‘URL’, URL);

curl.setOpt(‘SEGUIR UBICACIÓN’, verdadero);

curl.setOpt(‘caInfo’, certFilePath);

curl.setOpt(‘detallado’, verdadero);

curl.setOpt(Curl.option.HTTPPOST, opciones);

curl.on(‘fin’, función (código de estado, datos, encabezados) {

console.info (código de estado);

consola.info(‘—‘);

consola.info(datos.longitud);

consola.info(‘—‘);

consola.info(this.getInfo(‘TOTAL_TIME’));

res.render(datos);

this.close ();

});

curl.on(‘error’, función(err){

consola.log(err)

});

curl.perform ();

},

}

Paso 2: llame al servicio anterior y obtenga el token en reacción

import React, { useState, lazy,useEffect } from ‘react’;

importar { PowerBIEmbed } desde ‘powerbi-client-react’;

importar {modelos} desde ‘powerbi-client’;

Informe de clase extiende React.Component {

constructor (accesorios) {

súper (accesorios);

este.estado = {

accessToken: «»

};

}

componenteHizoMontar(){

this.getAccessToken();

}

obtenerTokenAcceso() {

const esteObj = esto;

dejar encabezados = nuevos encabezados ();

fetch(«/usuario/powerbi-auth», { //reemplazar con la URL de tu servicio

método: «OBTENER»

})

.then(función (respuesta) {

respuesta.json()

.then(función (cuerpo) {

// Respuesta exitosa

si (respuesta.ok) {

const toknResp = JSON.parse(cuerpo.datos);

thisObj.setState({ accessToken: toknResp.access_token});

}

})

.catch(función (e) {

consola.log(e);

thisObj.setState({ error: e });

});

})

.catch(función (error) {

// Error al realizar la llamada a la API

thisObj.setState({ error: error });

})

}

renderizar() {

if (! this.state.accessToken) {

volver Cargando…

}

regreso (

incrustarConfig={{

type: ‘report’, // Tipos admitidos: informe, tablero, mosaico, visual y qna

id: ‘************************’, //id_cliente

embedUrl: «», // incrustar url, si no sabe, consulte los documentos de powerbi api

token de acceso: this.state.accessToken,

tokenType: modelos.TokenType.Aad,

ajustes: {

paneles: {

filtros: {

expandido: falso,

visible: verdadero

}

},

}

}}

manejadores de eventos={

nuevo mapa ([

                        [‘loaded’, function () { console.log(‘Report loaded’); }],

[‘rendered’, function () { console.log(‘Report rendered’); }],

[‘error’, function (event) { console.log(event.detail); }]

])

}

cssClassName={«Incrustar-contenedor»}

getEmbeddedComponent = {(embeddedReport) => {

ventana.informe = informe incrustado;

}}

/>

);

}

}

exportar informe predeterminado;

Hola

Power BI y React funcionan bien juntos… y no hay mucho que deba hacer para comenzar.
He escrito un par de proyectos de código cerrado de esta manera (pero desafortunadamente no puedo compartir el código aquí).

El wiki de Power BI (que probablemente ya haya visto) detalla el uso de la mayoría de las funciones y, una vez que haya escrito el código inicial de ‘incrustación de inicialización’, todas las funciones funcionan según lo documentado.

El truco consiste en asegurarse de que los cambios en el estado/accesorios no fuercen una nueva representación de su componente de incrustación.
Una búsqueda rápida resaltó esta publicación de blog y el proyecto de GitHub asociado (No estoy asociado con este proyecto de ninguna manera.) -> pero esto podría actuar como un iniciador/guía para crear sus propios componentes. https://medium.com/@akshay5995/how-to-incrustar-microsoft-powerbi-charts-into-your-react-application-a30… GitHub: https://github.com/akshay5995/powerbi-report -componente

Una última cosa a considerar… ¡Autenticación!

Puede realizar la incrustación sin servicios del lado del servidor/backend, pero si sigue la ruta ‘la aplicación es propietaria de los datos’ y utiliza un modelo de datos que implementa la seguridad de nivel de fila, es probable que desee mover la lógica de generación de token de incrustación/ api llama a un servicio de back-end. De lo contrario, quedará expuesto a fallas de seguridad al permitir que los usuarios manipulen potencialmente los roles de los usuarios dentro del navegador.

Siéntase libre de seguir haciendo preguntas si tiene algo más específico.
Espero que esto ayude.

Salud,
Mate