Embedding PowerBi Report On Java Web Application

Hi Nosyke22 ,

Thank you for reaching out to Microsoft Fabric Community Forum.

lbendlin Thank you for your quick response.

>>>>Embedding Power BI Report Using AAD Token – Step-by-Step Guide
This guide helps you embed a Power BI report using an AAD token (Azure Active Directory) in a web application using jquery.js and powerbi.js. It assumes that:

You already have a Native Azure AD application registered

Necessary Power BI API permissions have been granted

-->Step 1: Create and Configure Azure AD App
A. Register a Native App
Register a Native App in Azure AD as explained here:
>> Register an app with Azure --https://learn.microsoft.com/en-us/power-bi/developer/embedded/register-app

B. Get clientId
Go to Azure Active Directory → App registrations → Your App, and copy the Application (client) ID.
This is the clientId used for AAD token generation.

C. Set Required Permissions
Under API Permissions:

Ensure that Power BI Service is added

Enable these permissions:

View All Reports

View All Dashboards (Preview)

View Users Groups

Make sure the user generating the AAD token is a member of the Power BI workspace containing the report.

-->Step 2: AAD Token Generation (Server-Side)
Use a backend service (Java, Node.js, etc.) to generate the AAD token.
Sample (Java-based) logic:

AuthenticationResult authResult = authenticationContext.acquireToken(
resourceId, // e.g., "https://analysis.windows.net/powerbi/api"
clientId,
username,
password,
null
).get();
Return the following two values from your REST endpoint:

accessToken

expiresAtStr (used to check if token needs to be refreshed)

-->Step 3: HTML Setup (JSP)
Embed this in your JSP page:

<div id="reportContainer" class="reportContainer"></div>
-->Step 4: Fetch and Manage AAD Token (Client-Side)
Use AngularJS or jQuery to call the backend and manage the token lifecycle:

var aadToken = { accessToken: '', expiresAtStr: '' };

function getAadAccessToken() {
var deferred = $q.defer();
$http.get('/MyPowerBIApp/REST/getAadToken/')
.then(function (response) {
deferred.resolve(response.data);
}, function (err) {
console.error('Error fetching AAD Token', err);
deferred.reject(err);
});
return deferred.promise;
}

-->Step 5: Configure Power BI Embed and Load Report
Once the token is fetched, use it to embed the report:

var config = {
type: 'report',
tokenType: powerbi.models.TokenType.Aad, // 0 for AAD
accessToken: aadToken.accessToken,
embedUrl: txtEmbedUrl, // e.g., "https://app.powerbi.com/reportEmbed?reportId=..."
permissions: powerbi.models.Permissions.All, // or 7
viewMode: powerbi.models.ViewMode.View,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false,
useCustomSaveAsDialog: false
}
};

var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), config);

If this post helps, then please consider Accepting as solution to help the other members find it more quickly, don't forget to give a "Kudos" – I’d truly appreciate it!

Regards,
B Manikanteswara Reddy