Set Up

[DomTripodi93]

Hello, I have been trying to get this working in an Angular project, and haven't had a lot of success.

I can't figure out what I should change the 'https://aka.ms/CaptureViewsReportEmbedConfig' endpoint to, so that I can pull down my own access token and report.

I had been working on trying to get the React UserOwnsData converted over to work with Angular, but I can't get from receiving the id_token to embedding the report.

it looks like the id token passed back is not what the React demo uses in the embed call, and I couldn't figure out where it is getting the correct access token from.

Dominic

[eddyizm]

So much information online and almost none of it works or is useful. Anything that looks solid is out of date, even as recently as 2020. Stumbled across this library but not sure how to implement, wish microsoft would do a better and singular location to house their docs, It all ends up being a circular rabbit hole that never ends and people have to hack together. I dread anything to do with powerBI.

Hope you get this to work and would love to see your solution! @DomTripodi93

[DomTripodi93]

@eddyizm As best as I can tell, it is not ready to be used, which is a shame, because it is very nearly functional.

As of now, my solution is to use React, or just embed in a regular IFrame and make the user log in to view the report. There is no telling what the intended replacement is for "https://aka.ms/CaptureViewsReportEmbedConfig", or if there even is one yet.

Hopefully this will become functional and documented early next year, and we'll get to use it.

[eddyizm]

Looks like I finally got it to work late last month. Forgot to come back here but just wanted to let you that it was possible. Or at least I believe I used this library lol

[Ian-Webster]

For the benefit of anyone else arriving here and getting stuck on the same problem, this is how I managed to get the component working;

1. Firstly you need to get a Azure auth token to be able to talk to the Power BI API - there are a couple of options for this but I used a service principle, you can read more about that here https://docs.microsoft.com/en-us/power-bi/developer/embedded/embed-service-principal, this video https://youtu.be/qvG1cjFsaI0?t=466 is also useful.
2. Next you need to make two calls to the Power BI API (passing the token from above to authenticate yourself), I used Microsoft's c# library to make the API calls (https://github.com/microsoft/PowerBI-CSharp)
3. The first call you need to make is to https://docs.microsoft.com/en-us/rest/api/power-bi/reports/get-report-in-group, this gives you the embed URL, report id, name, report type, data set id & data set workspace id parameter's
4. The second call is to https://docs.microsoft.com/en-us/rest/api/power-bi/embed-token/generate-token to get the embedded report token parameter - this is what tripped me up for a while, I'd mistakenly believed that the token I'd got from step 1 was what was required for the token parameter and lead to some esoteric errors that didn't give much in the way of clues as to what was going wrong.
   Looking at the browser networking tab in developer tools (add seeing a 403 on the Power BI Embedded calls) combined with reading the Power BI API documentation cleared things up for me.
5. Once you have all the above data you can expose it in a controller action, call it from Angular and set the parameters on an IReportEmbedConfiguration object and bind that to the Power BI report component.

Here is what my angular component looks like;

template;

<powerbi-report [embedConfig]="reportConfig" [eventHandlers]="eventHandlersMap" [cssClassName]="reportClass">
</powerbi-report>

ts file;

public reportConfig: IReportEmbedConfiguration; // binds to embedConfig on the powerbi-report component above

// called from onInit - builds the reportConfig property
public async embedReport(): Promise<void> {
      // call to my controller action from step 5, requestedReport contains report id, work set id & data set id
      let embedConfig = await this.powerBiService.GetEmbeddedReportConfig(this.requestedReport); 

      this.reportConfig = {
        type: 'report',
        embedUrl: embedConfig.embedUrl,
        id: embedConfig.id,
        accessToken: embedConfig.token,
        tokenType: models.TokenType.Embed,
        settings: {
          panes: {
              filters: {
                  expanded: false,
                  visible: false
              }
          },
          background: models.BackgroundType.Transparent
        },
      };
  }

Some pitfalls to be aware of;

• Make sure you get your various id's correct (work group / set id, report id, dataset id)
• If you are using Row Level Security (RLS) in your reports make sure you provide identities in your call to the generate token API end point, also make sure you get the role name/s correct in your identities
• If you are not using RLS do not provide any identities or you'll get bad request responses from the generate token end point
• If you are struggling to get the right data in your calls to the Power BI API I found it useful to test calls through Postman
• I wasn't involved in the configuration side of things for the service principle but if you are tasked with that also the YouTube link above has content on setting up a service principle and app id.