How to connect to Asana's API using Asana's JS/Ruby library

Question

I have a backend API written in Ruby and a client App that uses Angular. I'd like to authenticate the user to authenticate the user via the Angular app.

As such I've created my App on Asana. I'm having a few issues though:

First issue: I'm using the Authorisation Endpoint of Authorisation Code Grant. After reading the docs, I realised that I have to use Implicit Grant instead, which is more suitable for a browser-based app, however when I change it to Implicit Grant, save it and reload the page, it changes back to Authorisation Code Grant.

Then on my Angular App I have the following code:

            var client = Asana.Client.create({
              clientId: 133,
              clientSecret: 'mysecretcode',
              redirectUri: 'http://localhost:7699/profile'
            });
            client.useOauth({
                flowType: Asana.auth.PopFlow
            });
            client.authorize().then(function () {
                console.log('Auth completed');
            }).catch(function (err) {
                console.log(err);
            });
            client.users.me().then(function (result) {
                console.log(result);
            });

The above almost works. I do get redirected to Asana for the authorisation part, once I click on "Allow", I'm redirected back to my app, and I do get a code as part of the url. The code is something like:

http://localhost:7699/profile#access_token=very_long_string

If I understood the docs correctly, I could use the above access_token to make my first request. When I tried using Asana's JS library to make a request like so:

client.users.me().then(function (result) {
    console.log(result);
});

Please note the client object I'm referring to is the same I've created earlier for authorisation. The above returns a 401, Unauthorised code.

Then I tried the following:

var params = {
    grant_type: 'refresh_token',
    client_id: 876787,
    client_secret: 'some_secret',
    redirect_uri: 'http://localhost:7699/profile',
    code: my_access_code
};
$http.post('https://app.asana.com/-/oauth_token', params).then(function (result) {
    console.log(result);
});

Which also gets me a 401 unauthorised code.

What am I doing wrong here?

Answer 1

I recommend you start by copy-pasting one of the examples from the node-asana examples directory into your app, and seeing if that works.

If you want to keep using the popup flow, the thing I suspect you are missing is the call to Asana.auth.PopupFlow.runReceiver(); in popup_receiver.html. This should be on the page pointed to by your redirect_uri, and tells the page that created the popup the auth data it needs to make subsequent requests. Also note how the page that originates the authentication request (popup.html) includes actions that happen after authentication in the callback passed to then: this ensures that these actions happen only after the user completes authentication through the popup.