Power BI Embbeded using Fabric

marcelocostafil — Fri, 01 Mar 2024 10:50:50 GMT

Hello.

I'm with a mission: Embed a report in a app from my company.

The issue is: I have no idea if the steps that I got so far are the right ones.

I have a trial license for Microsoft Fabric. I created a report, have it published in a workspace. Then I created an Azure App with tenant read permissions.

Now for the first test, I just want to show the report in a simple html page using the published report, with the token confirmation from the Azure App.

Is this the right way? Are there any other configurations that I need to do? Anyone know any detailed tutorial that I can check?

I'll leave my code here (The one in my machine has the reports/tenant/secrets ids)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded Power BI Report</title>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>

<style>
body {
margin: 0;
padding: 0;
}
#reportContainer {
height: 100vh;
}
</style>
</head>
<body>
<div id="reportContainer"></div>

const reportContainer = document.getElementById('reportContainer');
const report = powerbi.embed(reportContainer, reportConfig);

// Tratar erros
report.off('error');
report.on('error', function (event) {
console.error(event.detail);
});
}

// Função para realizar o login e obter o token de acesso
function loginAndGetToken() {
// Redirecionar o usuário para a página de login do Azure AD
const redirectUri = encodeURIComponent(window.location.href);
const clientId = 'client id'; // Substitua pelo ID do cliente do seu aplicativo Azure AD
const authUrl = `https://login.microsoftonline.com/tenant id/oauth2/v2.0/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&response_mode=query&scope=https://analysis.windows.net/powerbi/api/.default`;

window.location.href = authUrl;
}

// Verificar se a página foi redirecionada com um código de autorização
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
if (code) {
// Trocar o código de autorização por um token de acesso
const tokenUrl = 'https://login.microsoftonline.com/tenant id/oauth2/v2.0/token';
const clientId = 'client id'; // Substitua pelo ID do cliente do seu aplicativo Azure AD
const clientSecret = 'client secret'; // Substitua pela chave secreta do seu aplicativo Azure AD
const redirectUri = encodeURIComponent(window.location.href);
const requestBody = `client_id=${clientId}&scope=https://analysis.windows.net/powerbi/api/.default&code=${code}&redirect_uri=${redirectUri}&grant_type=authorization_code&client_secret=${clientSecret}`;

fetch(tokenUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: requestBody
})
.then(response => response.json())
.then(data => {
const accessToken = data.access_token;
// Incorporar o relatório usando o token de acesso obtido
embedReport(accessToken);
})
.catch(error => console.error(error));
} else {
// Se não houver um código de autorização na URL, realizar o login
loginAndGetToken();
}
</script>
</body>
</html>

topic Re: Power BI Embbeded using Fabric in Developer

Power BI Embbeded using Fabric

Re: Power BI Embbeded using Fabric