I have created a report with mock data in PowerBI (free version), which I would like to embed onto a local react application for testing purposes, but for some reason I cannot make it work.
My main problem is that I cannot find a way to get a valid access token.
First I tried to get the personal access token from the console (ctrl shift c -> console -> run powerBIAccessToken) but unfortunately the embed does not load.
Then I tried to get it through the public API, but when I use the group id and report id I get the error Calling group APIs not permitted for personal workspace.
This is my app.js code
import logo from './logo.svg';
import './App.css';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<PowerBIEmbed
embedConfig={{
type: 'report', // Supported types: report, dashboard, tile, visual and qna
id: process.env.REPORT_ID,
embedUrl: process.env.EMBED_URL,
accessToken: process.env.ACCESS_TOKEN,
tokenType: models.TokenType.Aad,
settings: {
panes: {
filters: {
expanded: false,
visible: true
}
},
}
}}
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;
}}
/>
</header>
</div>
);
}
export default App;