Hello,
My use case is to integrate and show power BI reports inside my angular application.
After reading the official documentation, we decided to go for 'embed for your customers' option. I Registered an APP on azure portal for 'embed for customers' option using a POWER BI Pro License Account and got the client id.
Consequently, i used MSAL Library for getting the authorization access token using a master user credentials and this client ID on a backend API which is developed in Spring.
This API will hit auth url of microsoft and fetch us the access token. This access token is then returned to Angular and im able to hit another power bi api for getting report information using this access token only.
As per microsoft documentation, in 'embed for your customers' option, we are required to first get the access token, then hit an api to generate embed token(report specific) and then use this embed token in embed configuration to embed the report.
But my solution is working without embed token as of now.
The main confusion is regarding the production, documentation says that, there a limited no of embed token that you can generate while developing and testing and after this you need to purchase either A SKU capacity or a premium capacity where there is no such limit on embed token generation.
Please help us understand how we should proceed.
This is my Auth API :
public String getAccessTokenUsingMasterUser() throws MalformedURLException,InterruptedException, ExecutionException {
String clientId1="******************";
String username1="**************************";
String password1="***********";
String authorityUrlNew = "https://login.microsoftonline.com/";
String scopeUrl = "https://analysis.windows.net/powerbi/api/.default";
doTrustToCertificates();
// Build Public Client App
PublicClientApplication app = PublicClientApplication.builder(clientId1)
.authority(authorityUrlNew + "organizations") // Use authorityUrl+tenantId if this doesn't work
.build();
UserNamePasswordParameters userCreds = UserNamePasswordParameters.builder(
Collections.singleton(scopeUrl),
username1,
password1.toCharArray()).build();
// Acquire new AAD token
IAuthenticationResult result = app.acquireToken(userCreds).get();
// Return access token if token is acquired successfully
if (result != null && result.accessToken() != null && !result.accessToken().isEmpty()) {
return result.accessToken();
} else {
System.out.println("Failed to authenticate with MasterUser mode");
return null;
}
}
This is my Angular Part:
Login-service.ts :
this.loginHTTPService.getAccessTokenFromAD(requestData).subscribe(
(data)=>{
console.log("********token*************************")
console.log(data)
window.localStorage.setItem('accessTokenFromAD',JSON.stringify(data));
}
);
i saved the acccessToken in local storage of the browser
power-bi-report.component.ts:
var groupID='***********************'; let resp:any=[];
this.getReportsInGroup(groupID).subscribe(res=>{
// select the first report among it.
console.log(res);
this.getReport(res["value"][0]["id"], res["value"][0]["embedUrl"]);
});
}
public getReportsInGroup(groupId: string,reportID : string){
const accessToken=JSON.parse(localStorage.getItem('accessTokenFromAD'))
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer '+ accessToken
});
}
getReport(id: string, embedUrl: string) {
const accessToken=JSON.parse(localStorage.getItem('accessTokenFromAD'))
console.log("embed url")
console.log(embedUrl)
var embedConfiguration = {
type: 'report',
id: id,
embedUrl: embedUrl,
tokenType: pbi.models.TokenType.Embed,
accessToken: this.embedToken
};
// Grab the reference to the div HTML element that will host the report.
const reportsContainer = <HTMLElement>document.getElementById(
'embedReport'
);
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
const report = powerbi.embed(
reportsContainer,
embedConfiguration
);
// Report.off removes a given event handler if it exists.
report.off('loaded');
// Report.on will add an event handler which prints to Log window.
report.on('loaded', (event) => {
console.log('report loaded...');
})
report.off('pageChanged');
report.on('pageChanged', e => {
console.log(e);
});
// Add a listener to 'error' events
report.on('error', (errorObject) => {
console.log(errorObject);
});
}
