Forum Discussion
REST API - Refresh User Metadata
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
Ultimately to get around the 403 issues I was having with the Power BI API I had to add the following to my "endpoints" configuration for ADAL.js:
endpoints: {
'https://api.powerbi.com': 'https://analysis.windows.net/powerbi/api',
},
Also since using ADAL.js does not support interactive user prompts for permissions, after I set up the permissions for Power BI in the Azure AD App Registration, I had to click Grant Permissions to grant those permissions to the app for all users.
Also I had to set my IFrame up like below so that when it had fully loaded the URL that the URL returned from the /myorg/groups/:groupId/reports or /myorg/groups/:groupId/dashboards API call, it would set the token. "controller.selectedReport" was the embed URL returned from the API call and "controller.type" was either "Report" or "Dashboard"
<iframe id="report" ng-src="{{controller.selectedReport}}" onLoad="iframeLoaded();" frameborder="0" style="height:{{controller.screenHeight}}px; width:100%;"></iframe>
window.iframeLoaded = function () {
var iframe = document.getElementById("report");
var token = adalService.getCachedToken("https://analysis.windows.net/powerbi/api");
iframe.contentWindow.postMessage(JSON.stringify({ action: "load" + controller.type, accessToken: token }), "*");
};
- jburchel8 years agoMicrosoft Employee
Glad you got this working!
FYI there is some documentation here describing the requirement for Azure permissions to the app registration for the sample:
https://docs.microsoft.com/en-us/power-bi/developer/register-app
Jon