Embedded Report render failed on API request

Hi, francescod9 

403 Forbidden error:
You should ensure that your application is registered with the correct API permissions and has administrator consent. Double-check the Client ID, Client Secret, and Tenant ID. access tokens have a limited validity period. If a session lasts longer than the token's expiration date, ensure that the token is refreshed periodically.
Ensure that your application registration is properly configured to allow CORS from the application domain.

In Application Registration, go to API Permissions and add the permissions required by Power BI (e.g., , , Report.Read.All).Workspace.Read.AllDashboard.Read.All grants the administrator consent for these permissions.

To obtain an access token using the client credential stream, you can use the following code:

async function getAccessToken() {
    const tenantId = "YOUR_TENANT_ID";
    const clientId = "YOUR_CLIENT_ID";
    const clientSecret = "YOUR_CLIENT_SECRET";
    const scope = "https://analysis.windows.net/powerbi/api/.default";
    const url = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`;

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            'grant_type': 'client_credentials',
            'client_id': clientId,
            'client_secret': clientSecret,
            'scope': scope
        })
    });

    const data = await response.json();
    if (response.ok) {
        return data.access_token;
    } else {
        throw new Error(data.error_description);
    }
}

Using the acquired access token, you can embed the report into your application:

<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.23.1/powerbi.min.js"></script>

<div id="reportContainer" style="height: 600px;"></div>

<script>
    const reportId = "YOUR_REPORT_ID";
    const accessToken = await getAccessToken(); // Call the function to get the access token

    async function getEmbedDetails() {
        const url = `https://api.powerbi.com/v1.0/myorg/reports/${reportId}`;
        const response = await fetch(url, {
            headers: {
                'Authorization': `Bearer ${accessToken}`
            }
        });
        const data = await response.json();
        return data;
    }

    (async () => {
        try {
            const embedDetails = await getEmbedDetails();
            const embedUrl = embedDetails.embedUrl;

            const models = window['powerbi-client'].models;
            const embedConfig = {
                type: 'report',
                tokenType: models.TokenType.Embed,
                accessToken: accessToken,
                embedUrl: embedUrl,
                id: reportId,
                permissions: models.Permissions.All,
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: true
                }
            };

            const reportContainer = document.getElementById('reportContainer');
            powerbi.embed(reportContainer, embedConfig);
        } catch (error) {
            console.error('Error embedding Power BI report:', error);
        }
    })();
</script>

hackcrr

If this post helps, then please consider Accept it as the solution and kudos to this post to help the other members find it more quickly