PB Embed: MSAL Access Token returning 403 error in custom JS app.

[Sergio_DG]

I followed all the instruction from here.

I'm having troubles in the step 5, Embedding the content.

I have the following function to retrieve an acces token from a front-end app.

async function getAccessToken() {
    const { tenantId, clientId } = config;
    const configMsal = {
      auth: {
        clientId: clientId,
        authority: `https://login.microsoftonline.com/${tenantId}`
      }
    };

    const myMsal = new msal.PublicClientApplication(configMsal);
    const account = myMsal.getAllAccounts()[0];

    const loginRequest = {
      scopes: ["User.ReadWrite"],
      account: account
    };

    return myMsal.acquireTokenSilent(loginRequest).then(res => res.accessToken);
  }

And works fine. Then I pass the result like this:

    const embedToken = await this.getAccessToken();
    let embedConfiguration: models.IVisualEmbedConfiguration = {
      accessToken: embedToken,
      embedUrl: `https://embedded.powerbi.com/appTokenReportEmbed?reportId=${reportId}`,
      id: reportId,
      tokenType: models.TokenType.Embed,
      type: "report",
      visualName: ""  
    };
    let embedContainer = document.getElementById("root");

    let powerbi = new pbi.service.Service(
      pbi.factories.hpmFactory,
      pbi.factories.wpmpFactory,
      pbi.factories.routerFactory
    );

    powerbi.embed(embedContainer, embedConfiguration);

But I am getting a 403 error.

In all articles I've seen the solution is using the github of the Power Bi Samples. I don't want that. I need it to display the report in a vanilla js front-end app only.

Is it possible?

Is there any way to achieve this?

[v-rzhou-msft · Accepted solution]

Hi @Sergio_DG 

403 error should be caused by authention forbbiden with your access token.

What kind of embed do you want to use, app owns data or user owns data?

To use Power BI Sample in github is a good way to test whether you have configured your embed correctly.

If you don't want to use sample code in github, make sure all steps is correct.

And you need to get access token from this link. "https://analysis.windows.net/powerbi/api"

You can have a test on getting access token or generate embed token by postman.

Enter the same link and body in postman.

For reference: Solved: Power BI REST API using postman - generate embed t... - Microsoft Power BI Community

Best Regards,

Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly. 

[TedPattison]

You have requested a acess token with permissions for Microsoft Graph API and not the Power BI REST API. The scopes in the request for the acess token should look like this.

const requestScopes = {
  scopes: [
    "https://analysis.windows.net/powerbi/api/Report.Read.All",
  ]
};

 Check out this code here to see a full example.
https://github.com/PowerBiDevCamp/SalesforceUserOwnsDataEmbedding/blob/main/Dist/App/app.js