Unexpected Embed Token Format and Embedding Failure

Hello,

I have a question regarding the Power BI Embed Token.

According to the official documentation, the Embed Token should be returned in the following format:

{ "token": "H4sI....AAA=", "tokenId": "49ae3742-54c0-4c29-af52-619ff93b5c80", "expiration": "2018-07-29T17:58:19Z" }

(https://learn.microsoft.com/en-us/rest/api/power-bi/embed-token/generate-token)

However, the token I received is in the following format:

{
  "@odata.context":"https://wabi-south-east-asia-redirect.analysis.windows.net/v1.0/myorg/$metadata#Microsoft.PowerBI.ServiceContracts.Api.V1.GenerateTokenResponse","token":"H4sIAAAAAAAEACWT.....9UU4Q0IGAAA=.eyJjbHVzdGVyVXJ....nRydWV9","tokenId":"70ed8690-4b40-41d3-b665-c5d1bf86e76f","expiration":"2025-03-18T02:46:43Z"
}

It appears that the compressed token and JWT token are concatenated with a dot (.). Additionally, the expected suffix "AAA=" has changed to "AAA==".

The response status code is 200, indicating a successful request.

I attempted embedding by extracting the compressed token from the received value, but it failed. I also tried embedding using the entire token, but it was unsuccessful.

Below is the error screen I encountered:

The message in Korean states: "This content is not available."

For reference:

• The app was successfully registered in Azure AD.
• API permissions have been granted.
• I have retrieved an access token using a refresh token.

String url = "https://login.microsoftonline.com/" + tenantId + "/oauth2/v2.0/token";

HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
        .uri(URI.create(url))
        .header("Content-Type", "application/x-www-form-urlencoded")
        .POST(HttpRequest.BodyPublishers.ofString("client_id=" + clientId +
                "&client_secret=" + clientSecret +
                "&refresh_token=" + refreshToken +
                "&grant_type=refresh_token" +
                "&scope=https://analysis.windows.net/powerbi/api/Report.ReadWrite.All"))
        .build();

HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

Generate Power BI Embed Token

String url = "https://api.powerbi.com/v1.0/myorg/GenerateToken";
String requestBody = "{\n" +
                        "\"datasets\": [\n" +
                "{\n" +
                    "\"id\": \"0a141e78-e.....b07ed05c6\"\n" +
                "}\n" +
          "],\n" +
                "\"reports\": [\n" +
                "{\n" +
                    "\"allowEdit\": true,\n" +
                        "\"id\": \"48f02....cacc746\"\n" +
                "}\n" +
          "]\n" +
        "}\n";
HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
        .uri(URI.create(url))
        .header("Authorization", "Bearer " + accessToken)
        .header("Content-Type", "application/json")
        .POST(HttpRequest.BodyPublishers.ofString(requestBody))
        .build();
HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());

power-bi report embeding in React

import React, { useEffect, useRef, useState } from "react";
import { models } from 'powerbi-client';

const PowerBIEmbed = ({ embedToken }) => {
  const powerbiRef = useRef(null);

  console.log("embedToken ::: " + embedToken);

  useEffect(() => {
    const embedPowerBI = async () => {
        try {
            if (embedToken && powerbiRef.current) {
                const embedConfig = {
                    type: "report",
                    tokenType: models.TokenType.Embed,
                    accessToken: embedToken,
                    embedUrl: "https://app.powerbi.com/reportEmbed?reportId=48f026ea-9....bf48",
                    id: "48f026....cacc746",
                    permissions: models.Permissions.All,
                    viewMode:models.ViewMode.View,
                    settings: {
                        panes: {
                            filters: {
                                visible: true
                            },
                            pageNavigation: {
                                visible: true
                            }
                        },
                        bars: {
                            statusBar: {
                                visible: true
                            }
                        }
                    }
                };

                window.powerbi.embed(powerbiRef.current, embedConfig);

                if (window.powerbi) {
                } else {
                    throw new Error("PowerBI object not found.");
                }
            } else {
              throw new Error("Embed token is not available.");
            }
        } catch (err) {
            console.error("Error embedding Power BI:", err);
        }
    };
    
    embedPowerBI();
  }, [embedToken]);

  return <div ref={powerbiRef} />;
};

export default PowerBIEmbed;

React Error message

reportEmbed?reportId=48f026.....acc746&groupId=6a8....48&uid=uexun:549 
            
            
           GET https://api.powerbi.com/metadata/cluster 403 (Forbidden)

 Could you clarify why the token format differs from the documentation and provide guidance on how to correctly use it for embedding?

Thank you.