Re: API Document is very confusing, unable to gene...

irfanharun · ‎10-05-2018

Hi all,

I'm a PHP developer and trying to get my power BI reports displayed in my webpage for a client. I have the application ID, workspace ID and report ID. I'm trying to get the below boilerplate to test the API but have not had success even after going through the documentation multiple times (probably due to my limited knowledge).

So, my understanding is that in embedConfiguration variable : id is the application ID, embedUrl is https://app.powerbi.com/reportEmbed . I know from documentation that tokenType should be 'models.TokenType.Embed'

I need help to understand what is accessToken and where can i get it to get my very basic page up and running with a power BI dashboard.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>powerbi APi test</title>
    <script src="https://microsoft.github.io//PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
    <script src="https://microsoft.github.io//PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
  </head>
  <body>
<div id="reportContainer">

</div>

<script type="text/javascript">
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
type: 'report',
id: '68d9a1dc-c230-4ec7-b2dd-9e56c16xxxxxxx',
embedUrl: 'https://app.powerbi.com/reportEmbed',
tokenType: models.TokenType.Embed,
accessToken: 'h4...rf'
};

var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
</script>
  </body>
</html>

TedPattison · ‎10-05-2018

Are you use first-party embedding (user-owns-data) or third-party embedding (app-owns-data)? You have to answet that question first.

If you are using first-party embedding, then you just need to acquire an access token from Azure AD and that will serve as the token you use on the page to embed the report. If you are using third-party embedding then you use the access token to call into the Power BI Service API to acquire an embed token which you will use to embed the report.

read this blog post to get a better understanding.

Aslo, the ID in the configuration is the report ID not the application ID. Also, you need to call into the Power BI Service to get he embed URL which will be different for each report. Here is an example of what the JavaScript in page should look like.

// data required for embedding Power BI report
var embedReportId = "5dc619ea-d9ab-40cf-8a31-f1e0c480e520";
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=5dc619ea-d9ab-40cf-8a31-f1e0c480e520&groupId=54afb565-3935-47e1-9a89-67e48a78ca45&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLUVBU1QyLXJlZGlyZWN0LmFuYWx5c2lzLndpbmRvd3MubmV0In0%3d";
var accessToken = "H4sIAAAAAAAEAC2WRwrsCBJE7_K3GpBU8gO9kPfeayfvva9m7j5F0_skSR4RkfH3Hyt9hzkt_vz3T-XS7lvR2D08J2J1JUzm50U9OzUv13Rju1FgMHmQiUoVtwYkRkiaBaGrUYBtApNAvDWZVGlsgFDyVpjNv72ZUIGD7jqgsYnpPGCk7wR7cAWqHdDCx1vE7ypphXIin8NKFYuZZ05Sng4xJbjQmcJjS4t_rbrYS_lLfWw6Tw7ocZqzCKLx0jVa-ghXMgCxeMhlH4auJ5n5Gue79gj4cYW7FFSLPaUIOMdTRTKXdcXJeprqvRVA3QPuhuHqCd4XwfMdC14YYVloPnIEd-YA4w98iWAbXHxcAeEOOWueNQddIJlI3FHRwPJp_1Mc02sdUoDcigoPLTo28yJ6_BCdg0yDWE_2fmop_Rs29e5q-myTg2TnZhkEK_jV2iOcthOA_MTV44dKFDL6kt27zd-o3ciN-GAGWCZu5qZtjE5uCnNjoBnFPRnDzLxR8RaeldFdhr1CoYzvauvPlzTd6FghYkwgV2PPbS3Eg5DHxQDhD3ybbIKlir4n7ws47HncgilDAj-6610ErdYgH0jvJKpTb5Kr6CSBrt9tFBRpVxaA-_ZVXmpk2jsos77qSNB4pU4LmmS7iGqeAWl-90TstFommRoLy3FXuPJA8aBt4XASjf7qQrREBOOEZj3v0jnfZbaQ68n7oID-sDlnHVRdc5z7uCqIZN4tFQvl6ZmyKoHXwpzV-9dhu5VFBdB4Q8DjoCBORQ3fi50e6m7XeiU4fMP12FQBY_AYkKA6mLqjBeXVfneoWIHvSn9vsW26e6C3fNpFaiUkm3H3WvpsAYT62efJa7D1GoIMLE9OLIyzIZ7qWietm5sgHXPVlVY9J-AeT5-0wGDVFy_FDgTfQsK3vPfECI5rqLnCz5LGUNIcUHX3rW2UpFUvqOJNUkAWLz4pMITFPbp8CRA--vx5ApIhkg9tZeZnu9CphPKILPrzUqWXMVPJz4zKieKzsSvK2dyrMrkTW9ivvbc4Lq8ZBCV7xmdzZPXYEmJxkDkNgB0_cCS_gfUahEEOYAteP8KoZYl9kXuSxE5fsyBrTYbeYyK4cKYJ2NDoOv5kpC3x8WUKFA0EBChYgbZ8XPOUnTxAZfzpATvJCfOt6OR2TbGvnzhNhnevuOMXeXyffPhy3w155YTTQncDbyVhXjlQWSmuHMDGXzYRcxwhLxX9svAX_zZ0OQKQdEAC7hzgouH4Vvou8FY6p9iLvM_AKw25JRDxI6ZhpRUF8JSetTa-siSsA_JQW5mV6KFLlw-XPYEl6n8yNU1CADfH2NDLsSuPmv-Ipt6WLTJf4oibRoJ78K1MYx7PyDOlkkwhFphj8wgccT6RyfDGXgwx8zd2nfrhPD-QsfXMNLzngBZkFlPnUC6zvQ9wAN8stCrNtaDiOBsW6lPMMCOR_xSqGkYN6LMjwdFu2xZUv4rD3ClRtSiuzhkcVq6GzDBQ6c5SXxdLrNqeSCOD_30GKhc8Le0Vpnbk1-_x_bhfVo-TL7yTOvyzeH22BPaMAE89XH-zT46cb7HQB68kn0j3uNO427sEgYMKY67AxUYpdzT3lYH5OqsZvIn8kZ-ceQgucvL5siNhjJWwcqP1jjSgUUR3pFJCvmUFQJ6nMK_jsWB-Aph8Y_Y-wVfk7Z2svs10aeQZuTHoIOI9Oay3i1cRZDEFPSBohhjQaMJeAZPQZ8xa2QVQrYg4v1rmPhbomxvc2zybuJPi4jsy8lnPHabrul-9FnSF6Gb4hilivNljSjsaeTnaj-GgixplG7gswEI5qQ0iuFmQxEWX_nO1cpOPjo234dnCxEF2vzyXq46Kw0btqxbJ4PiWOTda-N2lnKowpVpF7c28l-FxGL0hOdcRCdl9noZCMPOoMxhpLpQaFE4ZVfM0j6QTdgV6CexS3ZRb6UzD3lBeNpQJ0RjwuJ7WGVkylzJHDbV78g8DfJcTHnWDEI4Lhl4Wq6JqmD7DN4egHHypdLsyssuZPAzgon4BTIVbjGqlBKL7ygMvert9dQa9LrSszxZ2vR-P_XeULcg6n7XJeEhgYCq4Xl9w7Mo5hX40uC_KGDeZtIp4YXb3wYOPSVayDGEyJ6benWKkpiPTQnKPEHVEv2cxWYfB420VwtiC_sJLjVccBjm1x3_c9eQ04uW8RMYRFzDhIQOnYEA12gBr4ER7RvDJvRgx0j1cQHX1Ddar25lqSGPjIeLM6I2ebWqjEd2tkyRoJ01MtVpe18T8bUe2G3CNk4yWujvY9PUHnaWLmmOkPXO1ktJAQKNI8ve-iUsHoaZCfjKgWNU1WyrUAr0QQN0bNQ6Pd1X57vlMpy59R3HmKjeX-VFlJ7924MaMLZ8_2UMdTMVz6a3uxR_zUoVs0yIRp-NL_ddff_7zh93e5ZjV8v3VpBxFThzOzxd6Ue50incXt4KagVU7kPTZhRPxT1Fnq0J2dBHTh4eYLTCtPhgevjo4nfV8wwHCo0O5pufxq0vCGrNHYne5HbR6DBuoVldDKStLQYn054fvGRSQb3cLq_DM57m1ecxl9Yqbh0pRmhyKgkBA7rqG5gJLcTvw_sF5jlRLSMhdrVLXfVCoD447y5J5AzMCg4OAOcLH4B6PwXg2ryr2NLmta2MXth2cj-keBqH8pa9H3G8wOnXDlYOyU6LWpcv5hkf2whOWEr5RyTW7xv7KpJyEiLTbu8ltihJ3q62sEs78k2NJ71g-iDGwepzMdT8H73OmtMQFSNbLc9avDiL_Yn6Xptzk4EdZL1TzaAmJmQ82wROk9kwJtP-Zctt6So9zK39j72UCmqdLUtMnCcYPcsAiWALWb2vIAhRLlKJwQ91MQMl6MLOMI_md4pt5mLyhIcRLR-FxH_JZYE0Sb1Wwa6uhKziNemmm-pkBKvV5_QXfDdUJvmTKS0sShZhtvB4OxQuVZrTbNUyDB2aiSd-JbGGqBJwNFuRCSmnCd_GTDSCqAD64yLsZmEYT0xuPTuFcCcnQeS2Td7DqBEFv6Tm8FDXeUApDhfYINj5qtBjcRYkPhvH20Y_i2tG6vlLGILH-SPei0tnJEc-oTJ04XfICWq8-wyacUjCZqKuo9wgDPdq4J2YhCPg5iupjPup76sr94CeCv32-jsJu2yEqFRbTO3WQpnz_MP_v_96EnKYaDAAA";

// Get models object to access enums for embed configuration
var models = window['powerbi-client'].models;

var config = {
  type: 'report',
  id: embedReportId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed  
};

// Get a reference to the embedded report HTML element
var reportContainer = document.getElementById('embedContainer');

// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, config);

irfanharun · ‎10-08-2018

Thank you for directing me to the blog Ted.

I'm trying to use third party embedding using power BI pro license. So, my understanding is i'm going to need an access token using which i'll have to generate embedd token before i can show my report in simple html and page page.

I was able to get access token using with all read/write access. (tested it in postman for working)

please do let me know if my understanding is right and if yes, what should be the next steps

TIA

Irfan Harun

TedPattison · ‎10-08-2018

Yes, your understanding is correct. Once you obtain an access token, next you call into the Power BI Service API to get embedding data for a report and an embed token. If you use the Power BI API SDK, then you have a librtary to help with this. Here is a simple example of getting the embedding data and an embed token for a report.

public static ReportEmbeddingData GetReportEmbeddingData() {

  PowerBIClient pbiClient = GetPowerBiClient();

  var report = pbiClient.Reports.GetReportInGroup(workspaceId, reportId);
  var embedUrl = report.EmbedUrl;
  var reportName = report.Name;

  // create token request object
  GenerateTokenRequest generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");

  // call to Power BI Service API and pass GenerateTokenRequest object to generate embed token
  string embedToken = pbiClient.Reports.GenerateTokenInGroup(workspaceId,
                                                              report.Id,
                                                              generateTokenRequestParameters).Token;

  return new ReportEmbeddingData {
    reportId = reportId,
    reportName = reportName,
    embedUrl = embedUrl,
    accessToken = embedToken
  };

}

irfanharun · ‎10-08-2018

Thank you again Ted.

I'm trying to do this only through jquery and my intention was to get the access token through an Ajax call and then use the access token to get the embed token.

However, I'm getting CORS error when trying to get the access token. This works fine for some reason in Postman but not in my html page.

  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://login.microsoftonline.com/common/oauth2/token",
    "method": "POST",
    "headers": {
      "content-type": "application/x-www-form-urlencoded",
      "cache-control": "no-cache",
      "postman-token": "f89336c3-4da3-37db-7c6e-6ceeec420920",
    },
    dataType: 'jsonp',
    "data": {
      "grant_type": "password",
      "username": "asd@asd.com",
      "password": "asd!23",
      "client_id": "741312d6-f40e-45b4-b491-fff4ea3655c3",
      "resource": "https://analysis.windows.net/powerbi/api"
    }
  }

  $.ajax(settings).done(function (response) {
    console.log(response);
  });

Can you please provide an input on this.

Thanks

Irfan

API Document is very confusing, unable to generate token

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024