How to auto generate embed token using javascript?

I am using powerbi embedded. I successfully embed a report into my application using javascript. But I have to update embedded token manually every time.

Now I want to call rest API from my code so that token update automatically. How to call API from my code to generate token and how to update token when it’s going to expire?

My code is :

<html>
<head>
  <title>Test</title>
  <script src="/Scripts/powerbi.js"></script>
</head>
<body>



 <div id="captionArea">
    <h1>Power BI Embed test</h1>
  </div>
  <div id="embedContainer" style="height:500px">
  </div>
  <script>
    (function () {
      // Please change these values
      var txtAccessToken = 'H4sIAAAAAA...';
      var txtEmbedUrl =
        'https://app.powerbi.com/reportEmbed?reportId=b21f4f90-e364-4b4c-9281-c5db87cdf3a5&groupId=a4781858-f...';
      var txtEmbedReportId = 'b21f4f90-e364-4b4c-9281-c5db87cdf3a5';
 
      var models = window['powerbi-client'].models;
      var permissions = models.Permissions.All;
      var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
        permissions: permissions,
        settings: {
          filterPaneEnabled: true,
          navContentPaneEnabled: true
        }
      };
 
      var embedContainer = document.getElementById('embedContainer');
      var report = powerbi.embed(embedContainer, config);
    }());
  </script>
</body>
</html>

Answer

I solved it. You can use MSAL or ADAL to generate an access token. I used MSAL.js 1.0 with implicit grant flow: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa

After getting access token you can use ajax to call REST-API to generate embed token.

You can follow this Failed to load response data when tried to get access token from azure using JavaScript

Advertisement

Answer