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>
<!-- O script acima é necessário para incorporar o Power BI -->
<style>
body {
margin: 0;
padding: 0;
}
#reportContainer {
height: 100vh;
}
</style>
</head>
<body>
<div id="reportContainer"></div>
<script>
// Função para incorporar o relatório
function embedReport(token) {
// Configurações do relatório
const reportConfig = {
type: 'report',
id: 'report id', // Substitua pelo ID do seu relatório
embedUrl: 'embed url', // Substitua pela URL de incorporação do seu relatório
accessToken: token, // Use o token de acesso obtido do Azure AD
tokenType: 0,
permissions: 1,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
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_typ...}`;
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>
