Getting the Embedded Token for Power BI embedded in Angular Application

I want to generate the embedded token for Power BI on Angular. I am currently inside an organisation using its own version of power BI (xyz.powerbi.com) and having Azure AD for authentication.

Steps Taken:

1. Added Power BI service to the Azure AD app registration. Granted organisation access for the same.

2. Hit the authentication endpoint for getting the access token - https://login.microsoftonline.com/tenantId/oauth2/token with the client id and the client secret along with the resource as https://analysis.windows.net/powerbi/api and got the access token.

How should I use this access token to generate the embedded token by hitting the Power Bi endpoints??

Is the above mentioned method the right way to generate the Azure AD access token to hit the Power BI API?

The embedded token will be further used to embed the Power BI report in an application.

Difficulties Faced:
I tried to generate the Power BI embedded token by hitting the following REST api

https://api.powerbi.com/v1.0/myorg/groups/group-id/reports/report-id/GenerateToken

by using the access token generated from the Azure AD in Authorization tab and the appropriate body as mentioned in https://learn.microsoft.com/en-us/rest/api/power-bi/embedtoken/reports_generatetokeningroup

I have not provided(intentional) the username/password combination and want to use the azure AD's access token for the access privileges.

I got a 401 unauthorized as expected. How do I overcome this??

You get 401 unauthorized error because you didn't set Authorization (value format should be "bearer {access token from Azure AD}") header while calling /GenerateToken endpoint.

Make sure you have assigned the following Delegated permissions in Azure AD app:
Report.ReadWrite.All or Report.Read.All,
Dataset.ReadWrite.All or Dataset.Read.All,
Content.Create.

You can set them here:

And then you need to use the following request to generate the embedded token:

 POST https://api.powerbi.com/v1.0/myorg/groups/{GROUP ID}/reports/{REPORT ID}/GenerateToken
    headers = {
    Authorization: Bearer {access_token from Azure AD}
    Content-Type:application/json; charset=utf-8
    Accept:application/json
    }
    data= {
      "accessLevel": "View",
      "allowSaveAs": "false"
    }

Here is the Sample Response:

{
    "@odata.context": "http://wabi-west-us-redirect.analysis.windows.net/v1.0/myorg/groups/{GROUP_ID}/$metadata#Microsoft.PowerBI.ServiceContracts.Api.V1.GenerateTokenResponse",
    "token": "H4sIAAAAAAA...",
    "tokenId": "...",
    "expiration": "yyyy-mm-ddTxx:xxxxx"
}

There was something wrong by generating the access token for the resource 'https://analysis.windows.net/powerbi/api' through the client credentials(client secret and client id) via PostMan even though the access token looks similar to the one produced in the way mentioned below.

I generated the access token again using the adal library in angular and passed the access token to the Embedded Power BI component and it worked.

There was no need of generating the embedded token separately as mentioned in the official documentation.