Forum Discussion

vai1sf's avatar
vai1sf
Regular Visitor
2 years ago
Solved

Embed report using react-powerbi-client ends with 403

Hello, 

 

I'm new to PowerBi and I'm the React developer who consumes the PowerBI report, developed by other team. My goal is to embed a report into our portal and filter it.

I'm granted view permissions (I can see and filter the report in PowerBi) and I have Power BI Pro License.
I've followed this steps https://learn.microsoft.com/en-us/power-bi/collaborate-share/service-embed-secure#how-to-embed-power-bi-reports-into-portals  and successfully embeded the report into iFrame in our portal. 

There's a downside that the customer should always login into PowerBi in order to see the portal. That's why I would like to try embeding the portal with react-powerbi-client. I'm doing exactly the same as it's written in the demo, also tried the way it's implemented in the Microsoft Power BI Embedded Analytics Playground (Preview) demo through the report.

 

The problem which I hit is that I receive 403 Forbidden from 'https://api.powerbi.com/metadata/cluster' call.
A few things makes me suspicious in the headers of the call I made:
1) I have 

Authorization: EmbedToken Bearer <my_access_token> 

 while in the playground the "EmbedToken" string is missing

2) I have

X-Powerbi-Hostenv: Embed for Customers

 while in the playground the value is "Embed for Organization" and that's what I want.

 

This is my configration for the PowerBIEmbed component:

{
type: 'report',
embedUrl: baseUrl,
tokenType: models.TokenType.Embed,
accessToken: undefined, //after successfull aquire the token is set
permissions: models.Permissions.All,
}


P.S. In the Azure portal we granted permissions to the PowerBi services, following this steps: https://learn.microsoft.com/en-us/power-bi/developer/embedded/change-permissions?tabs=Azure 

 

Any guides what am I missing or links to documentation how to solve 403 Forbidden through PowerBiEmbed react component would be helpful! 

Best regards,

Iva

Need Help
  • vai1sf's avatar
    vai1sf
    2 years ago

    UPDATE: Incorrect embedtoken type is used, should be 

    models.TokenType.Aad

     

4 Replies

    • vai1sf's avatar
      vai1sf
      Regular Visitor
      2 years ago

       Hi Anonymous ,

      Thanks for your suggestion! This is exactly what I'm doing.
      Can you please guide me what are the prerequisite configurations/permissions of the PowerBi report itself in order to be embeded within the application?

      Best regards,

      Iva

  • vai1sf's avatar
    vai1sf
    Regular Visitor
    2 years ago

    UPDATE: Incorrect embedtoken type is used, should be 

    models.TokenType.Aad

     

  • Hari000's avatar
    Hari000
    New Member
    1 year ago

    I am also facing the same issue, I am using App Owns Data concept,

     

    I am following this blog post to generte the embed token
    https://medium.com/globant/how-to-embed-a-power-bi-report-in-react-f27e975e0a

    I am able to generate the token but the report is not showing in my front-end, and this is my reactjs code 


    import { PowerBIEmbed } from 'powerbi-client-react';
    import { models } from 'powerbi-client';

    function Dashboard() {
        return (
            <div>
                <PowerBIEmbed
                    embedConfig={{
                        type: 'report',
                        id: 'xxxxxxxxxxxx',
                        embedUrl: "my embed url",
                        accessToken: "my access token",
                        tokenType: models.TokenType.Aad,
                        settings: {
                            panes: {
                                filters: {
                                    expanded: false,
                                    visible: false
                                },
                            },
                            customContextMenu: false,
                        }
                    }}

                    eventHandlers={
                        new Map([
                            ['loaded', function () { console.log('Report loaded'); }],
                            ['rendered', function () { console.log('Report rendered'); }],
                            ['error', function (event) { console.log(event.detail); }]
                        ])
                    }

                    cssClassName={"Embed-container"}

                    getEmbeddedComponent={(embeddedReport) => {
                        window.report = embeddedReport;
                    }}
                />
            </div>
        );
    }

    export default Dashboard;