Power BI (Embed dashboard with Vue.js and Power BI REST API using Postman). Part 3 (Power BI Rest API using Postman).

The Power BI REST API provides a service for embedding dashboards and reports in another application, accessing data, creating/modifying user permissions. Microsoft Power BI REST APIs docs.

There are different embedding solutions: Embed for your customers and Embed for your organization. The following describes how to implement an Embed for your customers solution with a service principal. Service Principal is the app-only authentication method recommended by Azure AD.

To integrate a dashboard into your application, you need to obtain the Embed token, Embed URL and specify the type of content you want to embed (a dashboard or a report) in the embedConfiguration object in the Power BI client. Powerbi-client is a javaScript library for embedding Power BI into your applications. To obtain an Embed token your app (service principal) must first authenticate (obtain an access token) with Azure AD.

Implementation details:

1. Generate an access token to access Rest APIs.
2. Generate an embed token to view and embed the specified dashboard from the specified workspace.
3. Get the dashboard embed data.

1. Generate an access token.

Open Postman application and create a POST request with this url https://login.microsoftonline.com/{tenantID}/oauth2/token.

To get your tenantID:

1. Sign in to the Azure portal.
2. Select Azure Active Directory.

3. Go to Overview.

Add these values to the request body:

grant_type: client_credentials
client_secret: secret (described in Part 2, “Register an Azure AD application” section)
client_id: Application (client ID) (described in Part 2, “Register an Azure AD application” section)
resource: https://analysis.windows.net/powerbi/api

2. Generate an embed token.

• Create a POST request with this url https://api.powerbi.com/v1.0/myorg/groups/{groupID}/dashboards/{dashboardID}/GenerateToken
• Add required parameters to the request body (more about Embed Token and required scope):

{
 “accessLevel”: “View”,
 “datasetId”: datasetID
}

• Set Bearer Authorization header with the access token generated in the previous step.
• The token returned in the body is the accessToken that needs to be added to the embedConfiguration object in the Vue.js part of this post.

3. Get the dashboard embed data.

• Create a GET request with this url: https://api.powerbi.com/v1.0/myorg/groups/{groupID}/dashboards/{dashboardID}
• Set Bearer Authorization header with the access token generated in the very first step (Generate access token).
• The embedUrl returned in the body is the embedUrl that needs to be added to the embedConfiguration object in the Vue.js part of this post.

👉 PART 4 (Vue.js)