Trying to get Power BI access token via JS - CORS error?

[ahenderson]

Hello All,

I am a newbie to the whole Power BI thing. Have been asked by a customer to research the potential for embedding power BI data in our PHP/Javascript web application. I have created myself a Power BI Professional account, created a workspace and added some test reports in there. I have also ued the test C# application to embed that report in a web page. The final piece of the puzzle for me is teo embed the same report in our current application.

And that's where I'm struggling. Since our app is PHP/JS I am trying to use the latter to make the appropriate API calls to get the report content. I believe this should be possible using the REST APIs (although the majority of examples online are C#). However, I currently can't get past the attempt to get an Access Token 😞 I have the following code:

function getPowerBIAccessToken()
{
	var url = 'https://login.microsoftonline.com/common/oauth2/token';

	var username = "my_username"; // Username of PowerBI "pro" account 
	var password = "xxxxxxx"; // Password of PowerBI "pro" account

	var clientID="my_client_id";  // == power BI app ID...
    var formData = {
      grant_type:'password',
      client_id: clientID,
      resource:'https://analysis.windows.net/powerbi/api',
      scope:'openid',
      username:username,
      password:password
    };

	//
	// Create a CORS request object.
	//
	var corsRequest = createCORSRequest('POST', url);
	if(corsRequest)
	{
		corsRequest.onload = function() {
			var response = corsRequest.responseText;
			alert("Request succeeded, response = '"+response+"'");
		};
		
		corsRequest.onerror = function() {
			alert("There was an error with the request");
		}
		
		corsRequest.send(formData);
	}
	else
	{
		alert("Unable to create CORS request");
	}
}

The createCORSRequest function looks like:

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {

    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.
    xhr.open(method, url, true);

  } else if (typeof XDomainRequest != "undefined") {

    // Otherwise, check if XDomainRequest.
    // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
    xhr = new XDomainRequest();
    xhr.open(method, url);

  } else {

    // Otherwise, CORS is not supported by the browser.
    xhr = null;

  }
  return xhr;
}

which I got from (https://www.html5rocks.com/en/tutorials/cors/). However, when I run this code in Chrome I get the following in the console:

In case that image is too small, the error is:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/common/oauth2/token' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So, despite using a request object that should support CORS, I seem to be still getting a CORS error. Although, does the HTTP 400 (Bad Request) error that is also shown suggest that the request has been made?

Is anyone able to confirm for me whether what I am trying to achieve here is possible? i.e. embedding Power BI content in a web page using only JS to make the API requests? I find it hard to believe that the MS online login URL does not support CORS (unless I am misunderstanding what's going on, of course).

Any thoughts, suggestions, pointers would be very welcome.

Thanks,
Al.