CODEWITHSUNDEEP
javascriptaccess-tokenazure-media-services
garglblarg
garglblarg

Reputation: 551

Unable to get Azure-Media-Services Access-Token in JS

I followed this article to connect to Azure via Rest where the first step is to get an access-token for the service. So i tried to send the following request:

POST https://wamsprodglobal001acs.accesscontrol.windows.net/v2/OAuth2-13 HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Host: wamsprodglobal001acs.accesscontrol.windows.net
Content-Length: 120
Expect: 100-continue
Connection: Keep-Alive
Accept: application/json

grant_type=client_credentials&client_id=ams_account_name&client_secret=URL_encoded_ams_account_key&scope=urn%3aWindowsAzureMediaServices

and replaced the client_id and key(encoded) in the data to be posted.

But Chrome promptly complains about setting the unsafe Host-, Content-Length-, Connection- and Expect-Headers. So i omitted those and end up with the following:

xhr = new XMLHttpRequest();
xhr.open("POST", "https://wamsprodglobal001acs.accesscontrol.windows.net/v2/OAuth2-13");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Accept", "application/json");
xhr.send("grant_type=client_credentials&client_id=<id>&client_secret=<encodedSecret>scope=urn%3aWindowsAzureMediaServices");

now upon sending the request i get:

XMLHttpRequest cannot load https://wamsprodglobal001acs.accesscontrol.windows.net/v2/OAuth2-13. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://nope.com' is therefore not allowed access.

But the request works when i send it through the Rest Client, Fiddler and requestmaker.com which i take as evidence that the request is formed correctly ...

Any hint as to how i can get this to work would be greatly appreciated.

Upvotes: 0

Views: 329

Answers (1)

johndeu
johndeu

Reputation: 2512

Try the following (generated from POSTMAN)

var data = "grant_type=client_credentials&client_id=<ACOUNTNAME>&client_secret=<ACCOUNTKEY>&scope=urn%3AWindowsAzureMediaServices";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://wamsprodglobal001acs.accesscontrol.windows.net/v2/OAuth2-13");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("host", "wamsprodglobal001acs.accesscontrol.windows.net");
xhr.setRequestHeader("connection", "Keep-Alive");
xhr.setRequestHeader("accept", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");

xhr.send(data);

In Postman, i have to have the Interceptor plugin enabled for this to work though, and disable Automatically Follow Redirects. See if that helps at all.

After you get the response back and parsed the access_token, you can use it in the next call to get the closest API endpoint like this

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://media.windows.net/");
xhr.setRequestHeader("x-ms-version", "2.11");
xhr.setRequestHeader("authorization", "Bearer <ACCESS_TOKEN>");
xhr.setRequestHeader("cache-control", "no-cache");


xhr.send(data);

Upvotes: 1

Related Questions