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

Question

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

因此，我在 Asana 上创建了我的应用程序。但我遇到了一些问题:

第一个问题:我正在使用授权代码授予的授权端点。阅读文档后，我意识到我必须使用 Implicit Grant 来代替，这更适合基于浏览器的应用程序，但是当我将其更改为 Implicit 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 进行授权部分，一旦我单击“允许”，我就会被重定向回我的应用程序，并且我确实会得到一个代码作为网址的一部分。代码类似于:

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

我建议您首先复制粘贴 the node-asana examples directory 中的示例之一进入您的应用程序，看看是否有效。

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