如何使用Asana的JS/Ruby库连接到Asana的API

Question

我有一个用Ruby编写的后端API和一个使用Angular的客户端应用程序。我想通过Angular应用验证用户。

因此，我在Asana上创建了我的应用程序。我有几个问题:

第一个问题:我正在使用Authorisation Code Grant的授权端点。在阅读文档后，我意识到我必须使用Implicit Grant代替，这更适合基于浏览器的应用程序，但是当我将其更改为Implicit Grant，保存并重新加载页面时，它会更改回Authorisation Code Grant。

然后在我的Angular应用中，我有以下代码:

            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);
            });

以上几乎可以工作。我确实被重定向到Asana的授权部分，一旦我点击"允许"，我被重定向回我的应用程序，我确实得到一个代码作为url的一部分。代码类似于:

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

如果我正确地理解了文档，我可以使用上面的access_token来发出我的第一个请求。当我尝试使用Asana的JS库发出这样的请求时:

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

请注意，我所指的client对象与我之前为授权创建的对象相同。上面返回一个401，未授权代码。

然后我尝试了以下操作:

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);
});

这也让我得到一个401未授权代码。

我在这里做错了什么?

Answer 1

我建议你首先从node-asana examples目录中复制粘贴一个例子到你的应用程序中，看看是否有效。

如果你想继续使用弹出流，我怀疑你缺少的是在popup_receiver.html中调用Asana.auth.PopupFlow.runReceiver();。这应该在您的redirect_uri所指向的页面上，并告诉创建弹出窗口的页面它需要进行后续请求的验证数据。还要注意，发起身份验证请求的页面(popup.html)如何在传递给then的回调中包含身份验证后发生的操作:这确保了这些操作仅在用户通过弹出完成身份验证后发生。