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

Question

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

使用this技术进行集成（使用核心API和OAuth 2）。

首先，当用户选择Dropbox时，我在IFrame中打开一个HTML页面。这里我有一个授权按钮，它将打开上面链接中提到的授权端点。此链接显示了Iframe中的X-FRAME-Options错误，因此我必须打开此链接作为弹出窗口才能工作。

有解决方法吗？我希望使用location.href在同一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

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

一些建议：

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