CODEWITHSUNDEEP
typescriptpowerbipowerbi-embedded
meta
meta

Reputation: 899

PowerBi-Javascript report embedding cluster details 403 error

I'm trying to display a power bi report in a typescript app.

I've successfully obtained an access token from AAD, and can in fact use it via the power bi rest api. I'd like to be able to use PowerBi-Javascript, for cleanliness and being able to apply filters. But I'm receiving a 403 error each time on a call to https://api.powerbi.com/powerbi/globalservice/v201606/clusterdetails, saying 'TokenExpired' - even when the token is freshly generated and should be valid for at least an hour.

The code to embed the report looks like this:

private embedReport(accessToken: string): powerBiClient.Embed {
  const element = this.getDisplayElement();
  const reportId = this.getReportId();
  const config = {
    type: 'report',
    id: reportId,
    tokenType: powerBiClient.models.TokenType.Aad,
    accessToken: accessToken
  };
  return this.powerBiService.embed(element, config);

getDisplayElement returns the appropriate HTMLElement, getReportId the id of the report to display, powerBiClient is the powerbi-javascript import, and powerBiService is an instance of powerBiClient.service.Service.

I've attempted this with reports I own, and with reports in a group (adding the groupId to the config).

How can I fix this error?

Upvotes: 4

Views: 3953

Answers (3)

Chamila Maddumage
Chamila Maddumage

Reputation: 3876

I have done this using Angular 7 as follows.

Component:

showReport() {
 let accessToken = 'your access token';
   // Embed URL
   let embedUrl = 'your embed URL';
   // Report ID
   let embedReportId = 'your embed report ID';
   let config = {
     type: 'report',
     pageName: 'my page name',
     name: 'Chamila',
     accessToken: accessToken,
     embedUrl: embedUrl,
     id: embedReportId,
     permissions: pbi.models.Permissions.All,
     viewMode: pbi.models.ViewMode.Edit,
     settings: {
       localeSettings: {
         language: "en",
         formatLocale: "es"
       },
     }
   };

   // Grab the reference to the div HTML element that will host the report.
   let reportContainer = <HTMLElement>document.getElementById('reportContainer');
   // Embed the report and display it within the div container.
   let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
   let report = powerbi.embed(reportContainer, config);
 }

Html :

<div id="reportContainer"></div>

Replace appropriate access token, embed url and report ID. It works perfectly for me.

Upvotes: 1

Meidan Nasi
Meidan Nasi

Reputation: 31

I had the same issue, switching tokenType to - models.TokenType.Embed worked successfully.

Upvotes: 3

mft25
mft25

Reputation: 427

It looks like you are missing the embedUrl option in the config (see this example from the documentation). This is returned from the Power BI REST API, for example in the get reports API.

Upvotes: 1

Related Questions