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

问题描述:

我正在使用Google云端存储。要上传到云存储,我已经查看了不同的方法。我发现最常见的方法是将文件发送到服务器,然后将其发送到Google Cloud存储。使用JavaScript从客户端浏览器上传到Google云端存储

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

通过Google API参考,它指出可以使用HTTP请求传输文件。但我很困惑如何使用API client library for JavaScript.

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

+0

通常的做法是使用firebase存储API使用“put”调用。参考资料在这里:https://firebase.google.com/docs/storage/web/upload-files – fmacdee

+2

这是一个坏主意,因为它基本上允许任何人上传任何东西,而尽管服务器让你有机会警察和验证提交并隐藏您的API密钥。 – dandavis

+0

我不确定您是否希望用户在不进行身份验证的情况下执行此操作。这是你在追求什么,或者你在寻找一个经过认证的用户来做到这一点? – fmacdee

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

所以我就在这个非常感兴趣,并有几分钟扔一些代码在一起。我决定构建一个小型的Express服务器来获得访问令牌,但仍然从客户端上传。我用fetch做上传,而不是客户端库。

我没有Google云帐户,因此没有测试过,因此我无法确认它是否有效,但我看不出它为什么不应该。代码是on my GitHub here

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

编辑结束1

声明:我只用过Node.js的谷歌客户端库发送电子邮件,但是我想我有谷歌的API的基本掌握。

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

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

在过去,我已经使用包如this one来生成JWT,但是我找不到任何客户端库来编码JWT的;主要是因为它们几乎全部在服务器上生成。但是,我发现this tutorial,它匆匆一瞥,似乎足以编写我们自己的编码算法。

我想在这里指出的是,打开一个应用程序,让你的谷歌资源,市民可免费访问可能被证明不利于您或您在未来的组织,因为我敢肯定你考虑。这是一个主要的安全风险,这就是为什么到目前为止你看到的所有教程都实现了两次连续上传。

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

不管怎么说,一旦我们有访问令牌,我们可以利用CORS feature that Google provides将文件上传到我们的桶。此功能允许我们使用标准的XHR 2请求使用Google的服务,本质上设计为用于代替JavaScript client library。我宁愿只在客户端库上使用CORS功能,因为我认为它的实现更简单一些,并且稍微灵活一些。 (我没有测试过这个,但我认为fetch可以在这里工作,就像XHR 2一样。)。

从这里,我们需要从用户那里获取文件,以及我们想要的关于文件的任何信息(读取:文件名),然后向https://www.googleapis.com/upload/storage/v1/b/<BUCKET_NAME_HERE>/o发送POST请求(替换为你的水桶,当然)与访问令牌的名字添加到URL为每使验证请求,在您要包括,为每Cloud Storage API documentation on inserting an object身体/查询字符串CORS feature page和任何其他参数部分。 Cloud Storage服务的API列表可以参考here

正如我从来没有这样做已经在这之前,我没有测试了这一点的能力,我没有任何的代码示例包括与我的答案,但我希望我的帖子是够清楚了把代码放在一起应该比较简单。

只是为了以正视听,我总是发现的OAuth是相当混乱,普遍回避它打客场,由于我害怕它的未知数。不过,我想我已经掌握了它,特别是在这篇文章之后,所以我迫不及待地想要得到一个空闲时间来玩弄它。

请让我知道如果有什么我说不清楚或相干。