Power BI Embedded API integration
Embed Microsoft Power BI dashboards on web application using power BI embedded services and Rest API used
Microsoft Power Bi is a powerful tool to embed the analytics dashboards, reports and Tiles into your web application. Data security is one of the important aspects. Power BI embedded services allow you to securely embed Power BI dashboards using embedded tokens. Additionally, you can also apply row level security to allow your web application users to see specific data sets.
This tutorial covers app owns data scenario toembed power Bi reports into your web application. Using this tutorial any developer can embed displays reports, dashboards, or tiles in an application that is fully integrated and interactive, without requiring users to have a Power BI license. This tutorial demonstrates how to integrate a report into a web application using the Power BI embedded Rest APIs and the Power BI JavaScript APIs.
Step 1: Registering an account
We are using Master account to generate the Power BI embedded token. You need to purchase a subscription of a Power BI Pro account. Power Bi Signup
Step 2: Creating a Power BI Application with Azure AD
We are demonstrating the integration of the reports and dashboards using Power BI REST APIs. To access the Power BI Rest APIs, it is required to register an application with Azure AD. Once application is registered, you can get the access to the Power BI Rest APIs.
Note: To register an application in Azure AD, it is important that you have Azure Active directory tenant and organization user.
You can create Power BI application using Power BI App registration Tool. This is the easiest way of creating an App as this has less form fields to fill. You can also create an App using Azure AD portal.
1. Sign in at Power BI App registration Tool.
- Register an application
- Fill Application name
- Select Application Type
You have two options to choose Application type – Native (For Apps IOS, Android) and Server-side web application (for web apps/web APIs)
- Fill Home Page URL
- Fill Redirect URL
Both URLs can belong to your web application you have created.
- You need to choose the required REST APIs and access permissions for your web application. In the below case, we have chosen all the APIs and permissions
- After successful registration you will get the Application Id and Application secret.
- For server-side web application integration type, you need to grant consent for the master account to avoid being prompted for consent by Azure AD. You need to provide the consent permissions to the master account through Azure AD portal.
- Go to Azure AD portal
- Search for App Registration in the search box and select the application you have created in
- Select your Application from the list of application retrieved in App registration window.
- Select the API permissions from left panel. You can click on Add permissions in case you need to give additional permissions to your application. To grant admin consent, click on “Grant admin consent for <user>” and give the consent.
Step 3: Get Azure AD Access token for Power BI application using REST APIs
You need to get the Azure AD access Token before you make calls to Power BI rest APIs. This access token it required to authenticate the Master account. In this approach, we are using Master Account Authentication type. There are different ways to fetch access token from Azure AD. We would fetch the grant type “password” in this case.
URL – POST https://login.microsoftonline.com/common/oauth2/token
| Request Parameters Name | Mandatory | Description |
| client_Id | yes | Specifies the Azure AD client id of the calling web service. To find the calling application’s client ID, in the Azure portal, click Azure Active Directory, click App registrations, click the application. The client_id is the Application ID |
| grant_type | yes | Specifies the requested response type. We would be using the grant_type as “password” |
| resource | yes | In case of power BI embedded services Value would be https://analysis.windows.net/powerbi/api |
| username | yes | Username of the master account |
| password | yes | Password of the master account |
| client_secret | yes | Application client secret, Generated in Step #2 |
curl –location –request POST ‘https://login.microsoftonline.com/common/oauth2/token’
–header ‘Content-Type: application/x-www-form-urlencoded’
c8NYOAAAAdDpTDQIAAADim_DWDgAAAA; x-ms-gateway-slice=estsfd’
–data-urlencode ‘client_Id=d3a9a240-1544-4e91-8131-9a51be8466’
–data-urlencode ‘grant_type=password’
–data-urlencode ‘resource=https://analysis.windows.net/powerbi/api’
–data-urlencode ‘client_secret=phVEZf.2WUR7I5kQ.443H49!.ggfj83WSS’
–data-urlencode ‘[email protected]’
–data-urlencode ‘password=password’
Response:
{
“token_type”: “Bearer”,
“scope”: “App.Read.All Capacity.Read.All Capacity.ReadWrite.All Dashboard.Read.All Dashboard.ReadWrite.All Dataflow.Read.All Dataflow.ReadWrite.All Dataset.Read.All Dataset.ReadWrite.All Gateway.Read.All Gateway.ReadWrite.All Group.Read Group.Read.All Metadata.View_Any Report.Read.All Report.ReadWrite.All StorageAccount.Read.All StorageAccount.ReadWrite.All Workspace.Read.All Workspace.ReadWrite.All”,
“expires_in”: “3599”,
“ext_expires_in”: “3599”,
“expires_on”: “1600041953”,
“not_before”: “1600038053”,
“resource”: “https://analysis.windows.net/powerbi/api”,
“access_token”: “eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6ImppYk5ia0ZTU2JteFBZck45Q0ZxUms0SzRndyIsImtpZCI6ImppYk5ia0ZTU2JteFBZck45Q0ZxUms0SzRndyJ9.eyJhdWQiOiJodHRwczovL2FuYWx5c2lzLndpbmRvd3MubmV0L3Bvd2VyYmkvYXBpIiwiaXNzIjoiaHR0cHM6Ly9zdHMud2luZG93cy5uZXQvZmE0NGUwMGItMTkyOS00ZGE0LWE5NzctYjcyOTQ2YjVkMDNkLyIsImlhdCI6MTYwMDAzODA1MywibmJmIjoxNjAwMDM4MDUzLCJleHAiOjE2MDAwNDE5NTMsImFjY3QiOjAsImFjciI6IjEiLCJhaW8iOiJFMkJnWURBMU82M3k1Mk5”,
“refresh_token”: “0.ASoAC-BE-ikZpE2pd7cpRrXQPUCiqdNEFZFOgTGaUb6LDC8qAKo.AgABAAAAAAAGV_bv21oQQ4ROqh0_1-tAAQDs_wIA9P8lFuiYqjQ1SxtbepoqozcNO1GJ-0qTq8muaF-Det0vrLihLbIe4tiLGtTjclL1M30xP-v- -k9uKoDh56cqn1sPn18f7c9PNLYygbeswmfYjzMkmTD58m-
}
Step 4: Get the embedded URL from the report groups REST API
URL – GET https://api.powerbi.com/v1.0/myorg/groups/[WorkSpaceID]/reports/[ReportID]
You can get the workspace Id and the reports ID from the URL of the report.
Headers:
| Authorization | Bearer iWxQtT3NQdo8f2nyMYarfvQ0YGudFaKGLNt0B00t moXlLf8v2tOflvcdWDORCt1I71w2gJu9XivPjFuu1N XZAhIfco_FqGxONHKxzOdPpTO2AMTciKpBUGBvv8Xf tKcBN6bbMF_MCuf5O0qWI6sU1sfo3mTQ2QR_0CUWiOaoz ENaLNxnOrrK9fX2RFttRX8hIh00m_Zegs-Lr_njrT2r8MwBixHhnWMVmYrRnRSBBzfejvP- |
Response:
{
“@odata.context”: “http://wabi-india-central-a-primary-redirect.analysis.windows.net/v1.0/myorg/groups/65cf3d77-917f-44a8-bf39-5968bc4deaaf/$metadata#reports/$entity”,
“id”: “cac54362-223d-4b8a-8b0b-8a4cde636153”,
“reportType”: “PowerBIReport”,
“name”: “HR Dashboard”,
“webUrl”: “https://app.powerbi.com/groups/65cf3d77-917f-44a8-bf39-5968bc4deaaf/reports/cac54362-223d-4b8a-8b0b-8a4cde636153”,
“embedUrl”: “https://app.powerbi.com/reportEmbed?reportId=cac54362-223d-4b8a-8b0b-8a4cde636153&groupId=65cf3d77-917f-44a8-bf39-5968bc4deaaf&w=2&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLUlORElBLUNFTlRSQUwtQS1QUklNQVJZLXYEYEUYEY”,
“isFromPbix”: true,
“isOwnedByMe”: true,
“datasetId”: “8de608d2-1764-4b7f-a110-66aaf412ffdc”
}
curl –location –request GET ‘https://api.powerbi.com/v1.0/myorg/groups/65cf3d77-917f-44a8-bf39-5968bc4deaaf/reports/cac54362-223d-4b8a-8b0b-8a4cde636153’
–header ‘Authorization: Bearer iWxQtT3NQdo8f2nyMYarfvQ0YGudFaKGLNt0B00t
moXlLf8v2tOflvcdWDORCt1I71w2gJu9XivPjFuu1N
XZAhIfco_FqGxONHKxzOdPpTO2AMTciKpBUGBvv8Xf
tKcBN6bbMF_MCuf5O0qWI6sU1sfo3mTQ2QR_0CUWiOaoz
ENaLNxnOrrK9fX2RFttRX8hIh00m_Zegs-Lr_njrT2r8MwBixHhnWMVmYrRnRSBBzfejvP-‘
Step 5: Get the embedded Token with row level security
URL – POST https://api.powerbi.com/v1.0/myorg/GenerateToken
Headers:
| Authorization | Bearer iWxQtT3NQdo8f2nyMYarfvQ0YGudFaKGLNt0B00t moXlLf8v2tOflvcdWDORCt1I71w2gJu9XivPjFuu1N XZAhIfco_FqGxONHKxzOdPpTO2AMTciKpBUGBvv8Xf tKcBN6bbMF_MCuf5O0qWI6sU1sfo3mTQ2QR_0CUWiOaoz ENaLNxnOrrK9fX2RFttRX8hIh00m_Zegs-Lr_njrT2r8MwBixHhnWMVmYrRnRSBBzfejvP- |
Request Body:
{
“datasets”: [
{
“id”: “8de608d2-1764-4b7f-a110-66aaf412ffdc”
}
],
“reports”: [
{
“id”: “cac54362-223d-4b8a-8b0b-8a4cde636153”
}
],
“identities”: [
{
“username”: “web application user”,
“roles”: [
“roles_defined_in_raw_level_security”
],
“datasets”: [
“8de608d2-1764-4b7f-a110-66aaf412ffdc”
]
}
]
}
Response: {
“@odata.context”: “http://wabi-india-central-a-primary-redirect.analysis.windows.net/v1.0/myorg/$metadata#Microsoft.PowerBI.ServiceContracts.Api.V1.GenerateTokenResponse”,
“token”: “l_zPVX5oga_lufs7dNP_O1nUJPy7kDsWs_n_5RXl0Oy7Uv-i-mEUmWGHVCi5idV2uxt5z9DUkUAmW3z-kDzFxGVwG1ZANJu3gBmNFZE-u7Ma1C4HSH1CKS2DrAB76ujYctZYHKxYuPRhH7pacJsFSYvOltp5CGFwE0hjgg9oaXDA1KLaCmgSIsemildvnPxLhXUI-“,
“tokenId”: “ddb0c74d-9511-4c29-9827-ed909507a6bb”,
“expiration”: “2020-09-03T19:11:51Z”
}
curl –location –request POST ‘https://api.powerbi.com/v1.0/myorg/GenerateToken’
–header ‘Authorization: Bearer iWxQtT3NQdo8f2nyMYarfvQ0YGudFaKGLNt0B00t
moXlLf8v2tOflvcdWDORCt1I71w2gJu9XivPjFuu1N
XZAhIfco_FqGxONHKxzOdPpTO2AMTciKpBUGBvv8Xf
tKcBN6bbMF_MCuf5O0qWI6sU1sfo3mTQ2QR_0CUWiOaoz
ENaLNxnOrrK9fX2RFttRX8hIh00m_Zegs-Lr_njrT2r8MwBixHhnWMVmYrRnRSBBzfejvP-‘
–header ‘Content-Type: application/json’
–data-raw ‘{
“datasets”: [
{
“id”: “8de608d2-1764-4b7f-a110-66aaf412ffdc”
}
],
“reports”: [
{
“id”: “cac54362-223d-4b8a-8b0b-8a4cde636153”
}
],
“identities”: [
{
“username”: “[email protected]”,
“roles”: [
“HP”
],
“datasets”: [
“8de608d2-1764-4b7f-a110-66aaf412ffdc”
]
}
]
}’
Step 6: Loading the report dashboard using Power Bi JavaScript SDK
You can download power BI from GitHub location – https://github.com/Microsoft/PowerBI-JavaScript
<script src=”~/scripts/powerbi.js”></script>
<div id=”reportContainer”></div>
<script>
// Read embed application token from Model
var accessToken = “@Model.EmbedToken.Token”;
// Read embed URL from Model
var embedUrl = “@Html.Raw(Model.EmbedUrl)”;
// Read report Id from Model
var embedReportId = “@Model.Id”;
// Get models. models contains enums that can be used.
var models = window[‘powerbi-client’].models;
// Embed configuration used to describe what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
var config = {
type: ‘report’,
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
// Get a reference to the embedded report HTML element
var reportContainer = $(‘#reportContainer’)[0];
// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, config);
</script>
You will be able to successfully integrate and render the Power BI dashboard into your application. Power BI JavaScript SDK provides many configuration parameters to control the UI elements of Power BI dashboards and report.
Rest API Structure
Rest API Structure – Please add the structure of all the APIs requested you can think through. Use portman to execute the APIs and share the postman APIs with me at [email protected]
| API Name | API Url | API request | API Response | Authorized/Un-Authorized – Yes/No |
| Login API | POST/login | { “Username”:”nitinm” password:”gdgd3393dddhdhdhd” } | { “Token”:”dagdadgagdgagadada” Message:”success” Status:true Data:{ id:1, Name:’nitin’, Email:’[email protected]’ } } | No |
| Get Report list | GET/reportlist | { id:1 } | { Status:true Data:{ list of report} } | Authorized |
| Get Report detail | Get/reportdetail | { Id:1, report_id:1 } | { Status:true, Data:{report detail} } | Authorized |
| Get page | Get/page | { page_ur;’about’ } | { Status:true, Data:{page detail} } | Un-Authorized |
| Forgot password | Get/forgot | { email:’[email protected]’ } | { Status:true, Message:’reset url successfully send on your email id ’ } | Un-Authorized |
| Reset password | Post/resetpassword | { Reset_token:’uytut86868868’ Password:’123456’, Confirm_password:’123456’ , } | { Status:true, Message:’Password successfully changed’ } | Un-Authorized |
Database Structure – Add details of the tables, primary keys, foreign keys, relationship here below.
User – 123456
Client side – MD5(SHA(MD5(12456) + salt)) Store in database
Salt
User login – 12346
Client side – MD5(SHA(MD5(12456)))
Fetch password from database – MD5(SHA(MD5(12456)))
MD5(SHA(MD5(12456))) = MD5(SHA(MD5(12456))) then success
Use Token- Bearer + Token
Like: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiZTM3ZjZlOWM2Zjc3MmQ4NDc3YzAzNzQyNzUzNzE3NWQ3ZjIxZTRiOTAyYmUyYzcwZWE5MDNiMWFiMDA3ZDFkZjNhZDM5ZDA5MDc0NGJkY2MiLCJpYXQiOjE1OTY1MjA3MDEsIm5iZiI6MTU5NjUyMDcwMSwiZXhwIjoxNjI4MDU2NzAxLCJzdWIiOiIyOSIsInNjb3BlcyI6W119.ZY8KBv3aiTLPBTk3nB6prSGzoKb5ZYSq00mtQwRdf_fLww7VFoAUZtgIAnEWz2NvuGTnkcLTgNPAVCg-C6JRWlZitdJmPvnSc2-sXqWE1tm9PnxqUoJYCeBagfKP3xqQo6gTX-Rhl7FuuJUmkYh9Igcxkm2kteMdJsCX84PMKG9UyEzA_GgK-1qEJydZS5HoQMbSy_Hn9OoG3uLbPv-JA8IET_THHYY3gfmWoWTQDtSG33IsJ9VK43uKaD1Lcmjs_PNWpHmm_C8hxrC-rtAzx_gQvSG09nJgsm2YDJq-GMy6vNwQFQyIdmYdYpUb2JtouB6ObbK4kMU0w3VIg6MjEBGuPgNPvf4VGWkQa1UTKw8tgGvbaHMM8tseVo-_UsapXuGCWa5MwXZ1XOVzbUBAqRrAp-PmOoVbupLZ5lYZMdZDGbcta7zA7czPZgojJyGxdU3SmWsNFI8lhfmtnuxHueTfPTa6MS-PX-Olo3JTZenNFuEa69Uam81hes2GRth7715zyu5-mZMi3KKpbcUDjHx64yDR23hBIh3cv_yFhjajTehLhaQJJ-UQPhf_6ds9yM9nUpRvtXuDhceWappTvmZ0F-ynWY6dHll3xGVPoQjWQRNEcubNr2FHz0KeQqmK1mJ0j0e8etyyKaevKfsrUOdf8a_Dh8ib8W5AW9mkcus
API Get Report listing
URL: /api/v1/reportlisting
(http://pineitsolution.com/powerbi/public/api/v1/reportlisting)
Method: GET
Authenticated: True
Headers:
Auth_token: Authentication token to authenticate the user
Request Parameters:
| Parameter Name | E.g. Value | Comment |
| start_date | Timestamp | Date filter |
| end_date | Timestamp | Date filter |
| Category | finance | Category filter |
| sortBy | rating | Sorting filter |
| currentPage | 1 | Offset |
| itemPerPage | 24 | Number of records |
Response:
{
“message”: “success”,
“data”: [
{
“name”: “mobile top 5”,
“long_descirption”: “this is the long description of the dashboard”,
“short_descpription”: “this is short description”,
“tags”: “mobile,top5, finance”,
“embebed_token”: “gadgad636423623qd”
“id”: “6346464”,
“category”: “finance”
},
{
“name”: “mobile top 5”,
“long_descirption”: “this is the long description of the dashboard”,
“short_descpription”: “this is short description”,
“tags”: “mobile,top5, finance”,
“embebed_token”: “gadgad636423623qd”,
“id”: “6346464”,
“category”: “sales”
}
]
}
API Get Report Details
URL: /api/v1/report/:report_id
(http://pineitsolution.com/powerbi/public/api/v1/report/4)
Method: GET
Authenticated: True
Headers:
Auth_token: Authentication token to authenticate the user
Request Parameters:
| Parameter Name | E.g. Value | Comment |
| report_id | Id | Id of the dashboard |
Response:
{
“message”: “success”,
“data”: [
{
“name”: “mobile top 5”,
“long_descirption”: “this is the long description of the dashboard”,
“short_descpription”: “this is short description”,
“html_description”: “<html> hfff gggjgg jgggg jggjggjg ggjggg </html>”,
“tags”: “mobile,top5,finance”,
“embebed_token”: “gadgad636423623qd”
“id”: “6346464”,
“category”: “finance”
},
{
“name”: “mobile top 5”,
“long_descirption”: “this is the long description of the dashboard”,
“short_descpription”: “this is short description”,
“tags”: “mobile,top5, finance”,
“embebed_token”: “gadgad636423623qd”,
“id”: “6346464”,
“category”: “sales”
}
]
}
API Get User Profile
URL: /api/v1/profile/
(http://pineitsolution.com/powerbi/public/api/v1/profile)
Method: GET
Authenticated: True
Headers:
Auth_token: Authentication token to authenticate the user
Response
{
“message”: “success”,
“name”: “Lokesh Paliwal”,
“subscription_type”: “premium”,
“email_address”: “[email protected]”,
“preferences”: “finance, mobile”
}
API Login
URL: http://pineitsolution.com/powerbi/public/api/login
Method: POST
Parameter- {“email”: “[email protected]”, “password”: “123456”}
Response
{
“success”: {
“token”: “eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiZTM3ZjZlOWM2Zjc3MmQ4NDc3YzAzNzQyNzUzNzE3NWQ3ZjIxZTRiOTAyYmUyYzcwZWE5MDNiMWFiMDA3ZDFkZjNhZDM5ZDA5MDc0NGJkY2MiLCJpYXQiOjE1OTY1MjA3MDEsIm5iZiI6MTU5NjUyMDcwMSwiZXhwIjoxNjI4MDU2NzAxLCJzdWIiOiIyOSIsInNjb3BlcyI6W119.ZY8KBv3aiTLPBTk3nB6prSGzoKb5ZYSq00mtQwRdf_fLww7VFoAUZtgIAnEWz2NvuGTnkcLTgNPAVCg-C6JRWlZitdJmPvnSc2-sXqWE1tm9PnxqUoJYCeBagfKP3xqQo6gTX-Rhl7FuuJUmkYh9Igcxkm2kteMdJsCX84PMKG9UyEzA_GgK-1qEJydZS5HoQMbSy_Hn9OoG3uLbPv-JA8IET_THHYY3gfmWoWTQDtSG33IsJ9VK43uKaD1Lcmjs_PNWpHmm_C8hxrC-rtAzx_gQvSG09nJgsm2YDJq-GMy6vNwQFQyIdmYdYpUb2JtouB6ObbK4kMU0w3VIg6MjEBGuPgNPvf4VGWkQa1UTKw8tgGvbaHMM8tseVo-_UsapXuGCWa5MwXZ1XOVzbUBAqRrAp-PmOoVbupLZ5lYZMdZDGbcta7zA7czPZgojJyGxdU3SmWsNFI8lhfmtnuxHueTfPTa6MS-PX-Olo3JTZenNFuEa69Uam81hes2GRth7715zyu5-mZMi3KKpbcUDjHx64yDR23hBIh3cv_yFhjajTehLhaQJJ-UQPhf_6ds9yM9nUpRvtXuDhceWappTvmZ0F-ynWY6dHll3xGVPoQjWQRNEcubNr2FHz0KeQqmK1mJ0j0e8etyyKaevKfsrUOdf8a_Dh8ib8W5AW9mkcus”
}
}
API Get Page
URL: /api/v1/page/:page_url
(http://pineitsolution.com/powerbi/public/api/v1/page/abouts)
Method: GET
Response
{“message”:”success”,
“data”:{“title”:”About us”,
“description”:”Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries”
}
}
Server configurations-
PHP Version 7.2.23
DATABASE- Mysqli
cURL support -enabled
Apache2 is used.
Server Details
Web Server
User – predictvuinfrauser
Password – Pr3d!ctMsAzuR3
MYSQL Server
User – predictvuinfrauser
Password – Pr3d!ctMsAzuR3
MySql Credentails
My$ql123Pred!ctVu
User – webdbserveruser
Database name – predictview_power_embeded
Deployment on Server Steps:
Laravel Php deployment:
- Login to the Server using above credentials
- Type following commands
cd ~/Azure-Power-BI-Embeded/powerbiproject
sudo nohup php artisan serve –host=10.0.0.4 –port=8080 &
Output of server console – sudo tail -f nohup.out
React Deployment:
- Type following commands
cd ~/Azure-Power-BI-Embeded/power-bi-react/
npm run build
sudo cp -r build /var/www/predictvu/public/powerbiproject/
Apache config path – /etc/apache2/sites-enabled/
Add comment