Facing issues while embedding my PowerBI report into my react.js application

Question

I am trying to integrate my powerbi report with my react application, and I am not bale to embed my report

Getting error message as : get report failed

things I have done

1. created a powerbi report in my account(pro licence)
2. created a application in azure active directory
3. created a client secret
4. created a security group and added my service principle account to that security group
5. added my service principle to my workspace as a admin
6. made the neccesay changes in admin portal ( I did not found "Allow service principles to use powerbi api" this option in my admin portal tenant settings and I enabled "Service principals can access read-only admin __API__s")
7. I'm trying to use a Power BI REST API to retrieve info about one of our workspaces. To do this, it's crucial we make use of a Service Principal. So far I've used a POST request in Postman to retrieve the bearer token. To do this I've used the 4 parameters I've seen specified in documentation/other tickets, which are: grant_type, client_id, client_secret, scope. This then outputs a bearer token, which gives me confidence that we've set up the Service Principal correctly and that it's working as it should be: so far so good.
8. now I have replaced acessToken in my react.js code, then it is showing the following error
9. I have tried to get information about my workspace and reports that are present in the workspace through api calls in postman and I got those information also, but not able to embed in my react application
10. and here is my react.js code snippet

      ```javascript
    

    import { PowerBIEmbed } from 'powerbi-client-react'; import { models } from 'powerbi-client'; function Dashboard() { return ( <div> </div> ); } export default Dashboard;

Answer 1

Hello Hari !

Thank you for posting on Microsoft Learn.

Have you verified if you have allowed service principals to use Power BI APIs ?

Under tenant settings, find "Allow service principals to use Power BI APIs".

If you do not see it, make sure you are logged in as a Power BI Service Administrator or Global Administrator. This option is only available for tenants using Power BI Premium or Premium Per User (PPU).

Without this setting enabled, the service principal cannot embed reports, even if REST API calls work in Postman.

Don't forget that only V2 workspaces support embedding using service principals.

Your code should be something like :

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

function Dashboard() {
  return (
    <PowerBIEmbed
      embedConfig={{
        type: 'report',
        id: '<REPORT_ID>',
        embedUrl: '<EMBED_URL>',
        accessToken: '<ACCESS_TOKEN>',
        tokenType: models.TokenType.Aad,
        settings: {
          panes: {
            filters: {
              visible: false,
            },
            pageNavigation: {
              visible: false,
            },
          },
        },
      }}
      eventHandlers={
        new Map([
          ['loaded', () => console.log('Report loaded')],
          ['rendered', () => console.log('Report rendered')],
          ['error', (event) => console.error('Error:', event.detail)],
        ])
      }
      cssClassName="report-style-class"
      getEmbeddedComponent={(embeddedReport) => {
        window.report = embeddedReport;
      }}
    />
  );
}

export default Dashboard;