PowerBi-Javascript report embedding cluster details 403 error

Question

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?

If you are trying to do more than just embed a report, it is not clear from the question. What is this clusterdetails API? I have never seen it before, but have been able to embed reports and individual visualisations without a problem. — mft25, Dec 23 '18 at 11:46

score 1 · Answer 1 · answered Dec 23 '18 at 11:45

1

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.

answered Dec 23 '18 at 11:45

mft25

417
6
13

score 1 · Answer 2 · answered Mar 18 '19 at 05:14

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: 'aaa',
     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.

what does this line do in this case? and where does pbi and factories things come from. I'm a newbie please help let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); — navinrangar, Feb 01 '23 at 14:21

score 0 · Answer 3 · answered Oct 11 '21 at 08:42

0

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

answered Oct 11 '21 at 08:42

Meidan Nasi

1

PowerBi-Javascript report embedding cluster details 403 error

3 Answers3