Hi @jmia
I am developing an app over Angular with power bi embed and I am also using the adal.js library for the authentication.
I am having some issues with the embedding, every time that I try to embed something I am retrieving the 403 (Forbidden) error
I have checked the configuration of the AAD and is the correct because I am able to generate the correct token using the .NET libraries and use it for embed reports with the power BI JS Library
I could be great if you can guide me with this error.
This is the configuration for the adal.js
adalConfig: {
instance: "https://login.microsoftonline.com/",
tenant: 'XXXXXXXXXXXXXXXXXX',
clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
loginResource: "https://analysis.windows.net/powerbi/api",
postLogoutRedirectUri: 'http://localhost:4200/logout',
},
And this is how I am using the token for embed the reports.
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;
}
}Thanks in advance,
Javier
