Search code examples
powerbipowerbi-embedded

Power BI Embedded on LOCALHOST

I know that one of the major steps in power bi embedded is to give your app permission to it (I have an existing app in azure ad) but what if I'm just trying to get it working on localhost!

Here's my code: and nothing is working. Getting 403 currently. **for testing purposes, I retreived my access token via: https://learn.microsoft.com/en-us/rest/api/power-bi/embed-token/reports-generate-token-in-group#code-try-0

 <PowerBIEmbed
        embedConfig={{
          type: 'report', // Supported types: report, dashboard, tile, visual and qna
          id: 'myreportId',
          embedUrl:
            'https://embedded.powerbi.com/appTokenReportEmbed?reportId=myreportid',
          accessToken:
            'xxx',
          permissions: models.Permissions.All,
          tokenType: models.TokenType.Embed,
          viewMode: models.ViewMode.View,
          settings: {
            panes: {
              filters: {
                expanded: false,
                visible: false,
              },
            },
            background: models.BackgroundType.Transparent,
          },
        }}
        eventHandlers={
          new Map([
            [
              'loaded',
              function() {
                console.log('Report loaded');
              },
            ],
            [
              'rendered',
              function() {
                console.log('Report rendered');
              },
            ],
            [
              'error',
              function(event) {
                console.log(event.detail);
              },
            ],
          ])
        }
        cssClassName="report-style-class"
        getEmbeddedComponent={embeddedReport => {
          console.log({ embeddedReport });
          // this.report = embeddedReport as Report;
          // window.report = this.report;
        }}
      />

enter image description here

enter image description here

Solution

  • It seems like you are using the wrong tokenType

    You need to use tokenType: models.TokenType.Aad

    For more information regarding tokenType, you can check this documentation: https://learn.microsoft.com/javascript/api/overview/powerbi/embedding-solutions

    If this does not resolve the problem, there may be other causes of error 403.:

    • The user has exceeded the amount of embedded token that can be generated on a shared capacity.

    • The Azure AD auth token expired.

    • The authenticated user isn't a member of the group (workspace).

    • The authenticated user isn't an admin of the group (workspace). • The authenticated user doesn't have permissions. Permissions can be updated using refreshUserPermissions API

    • The authorization header may not be listed correctly. Make sure there are no typos.

    Reference:

    https://learn.microsoft.com/power-bi/developer/embedded/embedded-troubleshoot