cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Sergio_DG
Frequent Visitor

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

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?

1 ACCEPTED SOLUTION
RicoZhou
Community Support
Community Support

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.

1.png

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. 

View solution in original post

2 REPLIES 2
RicoZhou
Community Support
Community Support

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.

1.png

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. 

View solution in original post

TedPattison
Microsoft
Microsoft

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 

Helpful resources

Announcements
PBI_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

MBAS on Demand

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Get Ready for Power BI Dev Camp

Microsoft named a Leader in The Forrester Wave

Microsoft received the highest score of any vendor in both the strategy and current offering categories.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.