CODEWITHSUNDEEP
javascriptphpazurepowerbi
asn559
asn559

Reputation: 81

Power BI Embedded - Access Token

So I have some graphs in Power BI which I want to share with my clients.

I'm making a custom page here on my server and trying to embed those graphs using Power BI Embedded setup.

I'm following this link https://learn.microsoft.com/en-us/power-bi/developer/get-azuread-access-token

However, how do I get an access token via javascript API?

Upvotes: 8

Views: 8597

Answers (3)

Andrew_Mont
Andrew_Mont

Reputation: 11

I have already embed the Power BI reports into my web application. And also, i have faced problems while embedding report into my application but finally i embed the reports. Below is the code that will help you to get the Access token.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.12/js/adal.min.js"></script>
        <script 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script>
window.config = {
 instance: 'https://login.microsoftonline.com/',
 tenant: 'common', //COMMON OR YOUR TENANT ID
 clientId: '49df1bc7-db68-4fb4-91c0-6d93f770d1a4', //This is your client ID
 redirectUri: 'https://login.live.com/oauth20_desktop.srf', //This is your redirect URI
 callback: userSignedIn,
 popUp: true
};

var ADAL = new AuthenticationContext(config);

function signIn() {
 ADAL.login();
}

function userSignedIn(err, token) {
 console.log('userSignedIn called');
 if (!err) {
  showWelcomeMessage();
  ADAL.acquireToken("https://analysis.windows.net/powerbi/api", function(error, token) {
   // Handle ADAL Error
   if (error || !token) {
    printErrorMessage('ADAL Error Occurred: ' + error);
    return;
   }
   // Get TodoList Data
   $.ajax({
    type: "GET",
    url: "https://api.powerbi.com/v1.0/myorg/datasets",
    headers: {
     'Authorization': 'Bearer ' + token,
    },
   }).done(function(data) {
    console.log(data);
    // Update the UI
    $loading.hide();
   }).fail(function() {
    printErrorMessage('Error getting todo list data')
   }).always(function() {
    // Register Handlers for Buttons in Data Table
    registerDataClickHandlers();
   });
  });
 } else {
  console.error("error: " + err);
 }
}

function getDataSets() {
 var trythis = "Bearer " + token;
 var request = new XMLHttpRequest();
 request.open('GET', 'https://api.powerbi.com/v1.0/myorg/datasets'); request.setRequestHeader('Authorization', trythis);
 request.onreadystatechange = function() {
  if (this.readyState === 4) {
   console.log('Status:', this.status);
   console.log('Body:', this.responseText);
  }
 };
 request.send();
}

function showWelcomeMessage() {
 var user = ADAL.getCachedUser();
 var divWelcome = document.getElementById('WelcomeMessage');
 divWelcome.innerHTML = "Welcome " + user.profile.name;
}
</script>
    </head>
    <body>
        <button id="SignIn" onclick="signIn()">Sign In</button>
        <h4 id="WelcomeMessage"></h4>
    </body>
</html>

For more information you can go through the link that i will provide here. Link : https://community.powerbi.com/t5/Developer/get-Access-token-using-js/m-p/352093#M10472

Upvotes: 1

RBreuer
RBreuer

Reputation: 1391

Generate EmbedToken is basically a REST API call. you can use NodeJs or AJAX to issue this request and get your EmbedToken.

For AAD auth, I can maybe refer you to ADAL.js: https://github.com/AzureAD/azure-activedirectory-library-for-js

which can help with auth against AAD

Upvotes: 4

Gigga
Gigga

Reputation: 577

I don't think that's possible in Javascript at the moment. I tried to create access tokens in Javascript not a long time ago but failed to find a way to do that.

I ended up doing a bit of server side code (something like this https://learn.microsoft.com/en-us/power-bi/developer/walkthrough-push-data-get-token) and printed the access code to a hidden div. Then I grabbed the token with Javascript and continued with Javascript from there (created the embed token and embedded the report itself).

It might be possible to do a sort of Javascript solution with a proxy, but that's out of my expertise (the proxy has the server side code).

The only pure Javascript solution I'm aware of is the Publish to web -solution (https://learn.microsoft.com/en-us/power-bi/service-publish-to-web), but it's got some limitations and security issues.

Upvotes: 1

Related Questions