I'm using angular-adal4 npm pachage and using it, i'm trying to embed Power bi on an Angular app that is based on the adal.js for the authentication.
The authentication is working correctly and the app is retrieving a a token, but when I try to use the token to embed the Power BI report i'm getting 403 error from power BI service.
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;
}
}
