I am trying to embed Power BI on an Angular App, I am using the angular-adal4 npm package that it is based on the adal.js for the authentication.
The authentication is working correctly and the app is retrieving a token, but when I try to use that token to embed the Power BI report I am retrieving a 403 error from the Power BI service.
I have checked the right that the app has in Azure are the corrects, I am able to extract a correct token using the .NET libraries and using the token code in the angular app the embedding is working.
I have been reading the adal.js library and I saw that is sending a request with response_type "id_token", and the example that I am using with .NET is sending a response_type "code".
After a lot of tests. I am stuck at this point.
I am not sure if I am sending the incorrect config to the adal.js or if the library is not able to retrieve the correct token for Power BI
Could anyone help me with this issue?
I would be happy for any advice / best practice sharing. Thank you!
adalConfig: {
instance: "https://login.microsoftonline.com/",
tenant: 'xx.com',
clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
loginResource: "https://analysis.windows.net/powerbi/api",
postLogoutRedirectUri: 'http://localhost:4200/logout',
},
import { Injectable } from '@angular/core';
import { Component, OnInit, Inject, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { service as PBIService, IEmbedConfiguration, Embed, models } from 'powerbi-client';
import { Adal4Service } from 'adal-angular4';
@Injectable()
export class EmbedingReports {
component: Embed;
@Output() embedded: EventEmitter<number> = new EventEmitter<number>();
constructor (private adalService: Adal4Service, @Inject('PowerBIService') public powerBIService: PBIService.Service) {}
public embedReport(groupId:string, reportId:string, powerbiFrame: ElementRef) {
var tokenType = models.TokenType.Aad;
var embedUrl = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${groupId}`;
var accessToken = this.adalService.userInfo.token;
var id = reportId;
var type = 'report';
let config: IEmbedConfiguration = {
accessToken,
tokenType,
embedUrl,
type,
id
}
if (this.validateOptions(accessToken, embedUrl)) {
this.embed(powerbiFrame.nativeElement, config);
}
}
public embedDashboard(htmlElement, groupId:string, dashboardId:string, powerbiFrame: ElementRef){
var tokenType = models.TokenType.Aad;
var embedUrl = `https://app.powerbi.com/dashboardEmbed?dashboardId=${dashboardId}&groupId=${groupId}`;
var accessToken = this.token;
var id = dashboardId;
var type = "dashboard";
let config: IEmbedConfiguration = {
accessToken,
tokenType,
embedUrl,
type,
id
}
if (this.validateOptions(accessToken, embedUrl)) {
this.embed(powerbiFrame.nativeElement, config);
}
}
private embed(element: HTMLElement, config: IEmbedConfiguration) {
this.component = this.powerBIService.embed(element, config);
this.embedded.emit((this.component as any));
}
private validateOptions(accessToken: string, embedUrl: string): boolean {
if (!(typeof embedUrl === 'string' && embedUrl.length > 0)
|| !(typeof accessToken === 'string' && accessToken.length > 0)
) {
return false;
}
return true;
}
}