Here's a step-by-step guide to help you through the process.
Step 1: Register Your App in Azure
- 1. Go to Azure Portal → App registrations
- 2. Register a new app.
- 3. Provide necessary API permissions
- 4. Go to Certificates & secrets → Generate a Client Secret
Step 2: Assign the App to the Power BI Workspace
1. Go to Power BI Service
2. Click Workspace access
3. Add the App's Service Principal(App Registration ClientId) as an Admin or Member
Step 3: Get Access Token
Request:
Method: POST
URL: https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token
Headers:
Content-Type: application/x-www-form-urlencoded
Body: (x-www-form-urlencoded):
grant_type=client_credentials
client_id={your-client-id}
client_secret={your-client-secret}
scope=https://analysis.windows.net/powerbi/api/.default
client_id={your-client-id}
client_secret={your-client-secret}
scope=https://analysis.windows.net/powerbi/api/.default
Endpoint will provide you with an Access Token
Step 4: Generate the Embed Token
Sample Code to embed the PowerBI Report in an HTML Page
<script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.21.1/dist/powerbi.min.js"></script>
<style>
#reportContainer {
width: 100%;
height: 800px;
border: 1px solid #ccc;
}
</style>
<div id="reportContainer"></div>
<script>
const embedToken = "Call the APIs and pass the token here";
const embedUrl = "https://app.powerbi.com/reportEmbed?reportId=report id here&groupId=group id here";
const reportId = "your report Id here";
// Embed configuration
const config = {
type: 'report',
id: reportId,
embedUrl: embedUrl,
accessToken: embedToken,
tokenType: window['powerbi-client'].models.TokenType.Embed,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: true
}
};
const reportContainer = document.getElementById('reportContainer');
// Embed the report
const powerbi = new window['powerbi-client'].service.Service(
window['powerbi-client'].factories.hpmFactory,
window['powerbi-client'].factories.wpmpFactory,
window['powerbi-client'].factories.routerFactory
);
powerbi.embed(reportContainer, config);
</script>