Jquery Ajax request to Asana's oauth2 API

Question

I'm developing an Asana app using Ember.js and I've running into some issue when I need to call the API. The oauth2 sign in/sign up is working great and I receive a working token ( tested it using curl)

I understand that I need to use the "Authorization: Bearer" header to auth with the API and this also work great using curl.

Here's my code:

$.ajax({
  url: 'https://app.asana.com/api/1.0/users/me',
  type: 'GET',
    dataType: "json",
  complete: function (resp) { console.log(resp) },
  error: function (jqXHR,  textStatus,  errorThrown) { console.log( textStatus )},
  beforeSend: function (xhr) { xhr.setRequestHeader("Authorization: Bearer", "my_access_token") }
});

When I execute this code, I get the following error

Uncaught SyntaxError: Unexpected token : me:1

parsererror

it looks like Asana doesn't reply with a properly encoded JSON file?

this the response that can't be parsed (sorry for the poorly formatted JSON)

{"data":{"id":864403617524,"name":"Sylvain","email":"my@email.com","photo":{"image_21x21":"https://s3.amazonaws.com/profile_photos/864403617524.skysUHPuO07ZftDGJSjY_21x21.png","image_27x27":"https://s3.amazonaws.com/profile_photos/864403617524.skysUHPuO07ZftDGJSjY_27x27.png","image_36x36":"https://s3.amazonaws.com/profile_photos/864403617524.skysUHPuO07ZftDGJSjY_36x36.png","image_60x60":"https://s3.amazonaws.com/profile_photos/864403617524.skysUHPuO07ZftDGJSjY_60x60.png","image_128x128":"https://s3.amazonaws.com/profile_photos/864403617524.skysUHPuO07ZftDGJSjY_huge.jpeg"},"workspaces":[{"id":498346170860,"name":"Personal Projects"},{"id":3958612780941,"name":"insideFPL"},{"id":5502245946578,"name":"Shipping Pixel"}]}}

Any help is much appreciated.

Cheers,

S

Answer 1

The problem seems to be that you have set the Authorization header incorrectly. The following works for me:

$.ajax(
  'https://app.asana.com/api/1.0/users/me',
  {
    type: 'GET',
    dataType: 'json',
    beforeSend: function (xhr) {
      xhr.setRequestHeader("Authorization", "Bearer $token")
    },
    complete: function (resp) {
      console.log(resp);
    },
    error: function (jqXHR,  textStatus,  errorThrown) {
      console.log(textStatus);
    }
  }
);

Bearer should be at the beginning of the second parameter, and there should be no colon in either string.