使用JavaScript从客户端浏览器上传到Google云端存储

时间:2016-03-02 12:10:29

标签: javascript http google-cloud-storage google-api-client

我正在使用Google云端存储。要上传到云存储,我已经研究了不同的方法。我发现最常见的方法是将文件发送到服务器,然后将其发送到Google云端存储。

我想将文件直接从用户的网络浏览器移至Google云端存储。我无法找到与此相关的任何教程。我已阅读Google API Client SDK for JavaScript。

通过Google API参考,它声明可以使用HTTP请求传输文件。但我对如何使用API client library for JavaScript.

感到困惑

这里的人们需要分享一些代码。但是我还没有编写任何代码,但我找不到一种方法来完成这项工作。

1 个答案:

答案 0 :(得分:3)

编辑1:未经测试的示例代码

所以我对此非常感兴趣,并花了几分钟时间将一些代码放在一起。我决定构建一个小型Express服务器来获取访问令牌,但仍然从客户端上传。我使用fetch来上传而不是客户端库。

我没有谷歌云帐户,因此没有对此进行测试,因此我无法确认它是否有效,但我不明白为什么不应该这样做。代码是on my GitHub here

在尝试运行之前,请仔细阅读并进行必要的更改。最值得注意的是,您需要指定私钥文件的位置,并确保它在那里,并且您需要在index.html中设置存储桶名称。

编辑结束1

免责声明:我之前只使用过Node.js Google客户端库发送电子邮件,但我认为我已经掌握了Google的API。

要使用任何Google服务,我们需要访问令牌来验证我们的身份;但是,由于我们希望允许任何用户上传到我们自己的云存储桶,因此我们无需通过标准OAuth流程。

Google提供了他们所谓的服务帐户,这是一个帐户,我们用它来识别访问我们自己资源的应用程序的实例。在标准OAuth流程中,我们需要为服务识别我们的应用,让用户同意使用我们的应用(从而授予我们权限),获取该特定用户的访问令牌,然后向服务发出请求;使用服务帐户,我们可以跳过用户同意过程,因为从某种意义上说,我们是自己的用户。使用服务帐户,我们只需使用从Google API控制台生成的凭据即可生成JWT(JSON网络令牌),然后我们将其用于获取访问令牌,我们将其用于向云存储服务发出请求。有关此流程的Google指南,请参阅here

过去,我使用像this one之类的包来生成JWT,但我找不到任何用于编码JWT的客户端库;主要是因为它们几乎完全在服务器上生成。但是,我发现this tutorial,粗略地看来,足以编写我们自己的编码算法。

我想在此指出,打开应用以允许公众免费访问您的Google资源可能会对您或您的组织在未来造成不利影响,因为我相信您已经考虑过了。这是一个主要的安全风险,这就是为什么你到目前为止看到的所有教程已经实现了两次连续上传。

如果是我,我至少会在我的服务器上执行身份验证过程的第一部分:当用户准备上传时,我会向我的服务器发送请求,以使用我的服务为Google服务生成访问令牌服务帐户的凭据,然后我会向每个用户发送我的服务器生成的新访问令牌。这样,我在外部世界和我的Google帐户之间增加了一层安全保障,因为身份验证的负担在于我的服务器,并且只有客户端才能完成上传。

无论如何,一旦我们拥有访问令牌,我们就可以利用CORS feature that Google provides将文件上传到我们的存储桶中。此功能允许我们使用标准XHR 2请求来使用Google的服务,并且主要用于代替JavaScript client library。我更喜欢在客户端库上使用CORS功能,因为我认为它更直接,并且在实现方面稍微灵活一些。 (我没有对此进行过测试,但我认为fetch可以像XHR 2一样在这里工作。)。

从这里开始,我们需要从用户那里获取文件,以及我们想要的关于文件的任何信息(读取:文件名),然后向{{POST发出https://www.googleapis.com/upload/storage/v1/b/<BUCKET_NAME_HERE>/o请求1}}(当然,替换为您的存储桶的名称),根据CORS feature page制作经过身份验证的请求部分以及其他任何参数,将访问令牌添加到URL中根据{{​​3}},您希望包含的正文/查询字符串。可以找到云存储服务的API列表Cloud Storage API documentation on inserting an object以供参考。

由于我之前从未这样做过,而且我没有能力对此进行测试,因此我没有任何示例代码可以包含我的答案,但我希望我的帖子足够明确这里的代码应该相对简单。

为了让记录保持平稳,我总是发现OAuth非常令人困惑,而且由于我对未知事物的恐惧,因此一般都不愿意使用OAuth。但是,我想我终于掌握了它,特别是在这篇文章之后,所以我迫不及待想要一个免费的小时来玩它。

如果我说的话不清楚或不连贯,请告诉我。