显示文件选择 UI：将 Dropbox 与 OAuth 2 集成

Question

我正在尝试创建一个网页，允许我的用户将文件上传到我的 S3 存储。要选择文件，用户可以使用 Google Drive、Dropbox 以及本地系统。在实施其中的 Dropbox 部分时遇到问题。

我正在使用 this 集成技术（使用核心 API 和 OAuth 2）。

首先，当用户选择 Dropbox 时，我会在 IFrame 中打开一个 HTML 页面。这里我有一个授权按钮，它将打开上面 link 中提到的授权端点。 link 向我展示了 Iframe 中的 X-FRAME-Options 错误，所以我不得不打开这个 link 作为弹出窗口才能工作。

有办法解决这个问题吗？我希望使用 location.href.

授权 URL 在同一个 iframe 中打开

另外，当我将其作为弹出窗口打开时，在用户成功登录后，我通过的 redirect_uri 在弹出窗口中打开。我不得不做一些非常规的 setInterval 编码来解决这个问题。有人也可以为此提出解决方案吗？

我也尝试使用 Smarx's 博客中提到的 CSRF 令牌，但这也给了我同样的错误。

编辑：

@smarx 我尝试使用 dropbox.js 并且效果很好。卡在一处我使用了 OAuth 弹出驱动程序并有一个按钮，上面写着登录。

首先在加载时创建客户端，然后创建弹出驱动程序，如下所示

client = new Dropbox.Client({ key: client_id });
client.authDriver(new Dropbox.AuthDriver.Popup({
        receiverUrl: "http://localhost/uploadCare/dbcallback.html"
    });
);

在回调中 html 我正在写

Dropbox.AuthDriver.Popup.oauthReceiver()

如文档中所述。但这不会让我返回原始页面并显示文件列表。

这部分的解释我特别没看懂 "要使用弹出驱动程序，请在您的站点上创建一个包含接收者代码的页面，更改代码以反映 dropbox.js 在您站点上的位置，然后指向 Dropbox.AuthDriver.Popup 构造函数到它."

你能帮帮我吗？

Answer 1

出于安全原因（例如 clickjacking），您绝对不能将 dropbox.com 放入 iframe。

几点建议：

您可以只使用 the Chooser 作为您的用例吗？这对您和您的用户来说肯定会更容易。
如果您不能使用选择器，您是否有理由不使用 dropbox.js？它有一个弹出式授权驱动程序，几乎可以为您处理所有这一切。重定向肯定会在与 auth 相同的 window 中发生，因此通常需要 windows 之间的通信（通常通过 localStorage）。这已经在 dropbox.js.

显示文件选择 UI：将 Dropbox 与 OAuth 2 集成

Showing file selection UI : Integrating Dropbox with OAuth 2

dropbox

dropbox-api