topic Re: Embed report using react-powerbi-client ends with 403 in Developer

Embed report using react-powerbi-client ends with 403

vai1sf — Mon, 13 May 2024 15:52:37 GMT

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

Re: Embed report using react-powerbi-client ends with 403

Anonymous — Tue, 14 May 2024 01:36:22 GMT

HI @vai1sf,

Perhaps you can take a look the official document about embed with react app if help with your scenario:

How to embed a Power BI item in a React app | Microsoft Learn

Regards,

Xiaoxin Sheng

Re: Embed report using react-powerbi-client ends with 403

vai1sf — Tue, 14 May 2024 07:44:47 GMT

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

Re: Embed report using react-powerbi-client ends with 403

vai1sf — Wed, 15 May 2024 16:15:14 GMT

UPDATE: Incorrect embedtoken type is used, should be

models.TokenType.Aad

Re: Embed report using react-powerbi-client ends with 403

Hari000 — Mon, 16 Dec 2024 05:53:37 GMT

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;