Forum Discussion
Get an Azure AD access token for embedding reports using JavaScript
Hi Anonymous ,
Here you can find the detailed code for your request.
<!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>
References:
https://community.powerbi.com/t5/Developer/get-Access-token-using-js/td-p/350294
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embedding-Basics#user-owns-the-data
Thanks you Jayendran!
I have tried this code, it does get me a token but it seems like the token is not valid.
1. this is where i fetch the token from the script you mentioned and assign it to a variable:
ybdtoken = token;
function userSignedIn(err, token) {
console.log('userSignedIn called');
console.log('L35-token is: ', token);
ybdtoken = token;
if (!err) {
showWelcomeMessage();
}
else {
console.error("error: " + err);
}
}2. I use it later on in the powerbi.embed() function and pass all relevent parameters, including the token i have extracted after the user prefourmed a login to his power bi account:
function ybdEmbed(YbdEmbeddedReportId, YbdEmbeddedReportUrl){
// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;
console.log("models: ",models);
//console.log("out function ybdAccessToken: ", ybdAcessToken);
//console.log("token: ",token);
var embedConfiguration = {
type: 'report',
id: YbdEmbeddedReportId,
embedUrl: YbdEmbeddedReportUrl,
tokenType: models.TokenType.Aad,
accessToken: ybdtoken
};
console.log("embedConfiguration: ", embedConfiguration);
var $reportContainer = jQuery('#reportContainer');
console.log("$reportContainer", $reportContainer);
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
}But for some reason it looks like the token i get is invalid:
when i try to embed a report using powerbi.embed() function the report i frame loads but i get an error message asking me to ask for access to this report (in power bi desktop i have already added the user to the report work space)
When i generate a token via GET https://api.powerbi.com/v1.0/myorg/reports:
the token works fine and i can see my embedded report
any idea what can cause this?
thanks!!!
in general, if i use msal.js or adal.js i get a token but looks like the token is invalid as i can't access the report
Hi..
Could you find any solution to your code? I also get the same issue.
When you created Azure AD App, what should be the Redirect URI? is it embed Page URL?
Thank you in advance!
Have you find solution?
I'm facing same issue in my application.
