使用JavaScript從客戶端瀏覽器上傳到Google雲端存儲

Question

我正在使用Google雲端存儲。 要上傳到雲存儲，我已經研究了不同的方法。 我發現最常見的方法是將文件發送到服務器，然后將其發送到Google雲端存儲。

我想將文件直接從用戶的網絡瀏覽器移動到Google雲端存儲。 我找不到任何與此相關的教程。 我已閱讀Google API Client SDK for JavaScript。

通過Google API參考，它指出可以使用HTTP請求傳輸文件。 但我對如何使用JavaScript的API客戶端庫感到困惑。

這里的人需要共享一些代碼。 但我沒有寫任何代碼，我找不到一種方法來完成這項工作。

Answer 1

編輯1：未經測試的示例代碼

所以我對此非常感興趣，並花了幾分鍾時間將一些代碼放在一起。 我決定構建一個小型Express服務器來獲取訪問令牌，但仍然從客戶端上傳。 我使用fetch來上傳而不是客戶端庫。

我沒有谷歌雲帳戶，因此沒有測試過這個，所以我無法確認它是否有效，但我不明白為什么它不應該。 代碼在我的GitHub上 。

在嘗試運行之前，請仔細閱讀並進行必要的更改。 最值得注意的是，您需要指定私鑰文件的位置，並確保它在那里，並且您需要在index.html設置存儲桶名稱。

編輯結束1

免責聲明：我只使用Node.js Google客戶端庫發送電子郵件，但我認為我已經掌握了Google的API。

要使用任何Google服務，我們需要訪問令牌來驗證我們的身份; 但是，由於我們希望允許任何用戶上傳到我們自己的雲存儲桶，因此我們無需通過標准OAuth流程。

Google提供他們稱之為服務帳戶的帳戶，該帳戶是我們用來識別訪問我們自己資源的應用程序實例的帳戶。 在標准OAuth流程中，我們需要為服務識別我們的應用，讓用戶同意使用我們的應用（從而授予我們權限），獲取該特定用戶的訪問令牌，然后向服務發出請求; 使用服務帳戶，我們可以跳過用戶同意過程，因為從某種意義上說，我們是自己的用戶。 使用服務帳戶，我們只需使用從Google API控制台生成的憑據即可生成JWT（JSON網絡令牌），然后我們將其用於獲取訪問令牌，我們將其用於向雲存儲服務發出請求。 有關此流程的Google指南，請參閱此處 。

在過去，我使用像這樣的包來生成JWT，但我找不到任何用於編碼JWT的客戶端庫; 主要是因為它們幾乎完全在服務器上生成。 但是，我發現這個教程 ，粗略地看來，足以編寫我們自己的編碼算法。

我想在此指出，打開應用以允許公眾免費訪問您的Google資源可能會對您或您的組織在未來造成不利影響，因為我相信您已經考慮過了。 這是一個主要的安全風險，這就是為什么你到目前為止看到的所有教程已經實現了兩次連續上傳。

如果是我，我至少會在我的服務器上執行身份驗證過程的第一部分：當用戶准備上傳時，我會向我的服務器發送請求，以使用我的服務帳戶的憑據為Google服務生成訪問令牌，然后我會向每個用戶發送我的服務器生成的新訪問令牌。 這樣，我在外部世界和我的Google帳戶之間增加了一層安全性，因為身份驗證的負擔在於我的服務器，並且只有客戶端才能完成上傳。

無論如何，一旦我們擁有訪問令牌，我們就可以利用Google提供的CORS功能將文件上傳到我們的存儲桶。 此功能允許我們使用標准XHR 2請求來使用Google的服務，並且主要用於代替JavaScript客戶端庫 。 我更喜歡在客戶端庫上使用CORS功能，因為我認為它更直接，並且在實現方面稍微靈活一些。 （我沒有對此進行測試，但我認為fetch在這里可以和XHR 2 。）

從這里開始，我們需要從用戶那里獲取文件，以及我們想要的關於文件的任何信息（讀取：文件名），然后向https://www.googleapis.com/upload/storage/v1/b/<BUCKET_NAME_HERE>/o發送POST請求https://www.googleapis.com/upload/storage/v1/b/<BUCKET_NAME_HERE>/o （當然，替換為您的存儲桶的名稱），根據CORS功能頁面的“認證請求”部分和其他任何參數，將訪問令牌添加到URL在您希望包含的正文/查詢字符串中， 根據插入對象的Cloud Storage API文檔 。 可在此處找到雲存儲服務的API列表以供參考。

由於我之前從未這樣做過，而且我沒有能力對此進行測試，因此我沒有任何示例代碼可以包含我的答案，但我希望我的帖子足夠明確，將代碼放在一起應該從這里相對簡單。

為了直截了當，我總是發現OAuth非常混亂，並且由於害怕它的未知因素而一直避免使用它。 但是，我想我終於掌握了它，特別是在這篇文章之后，所以我迫不及待想要一個免費的小時來玩它。

如果我說的話不清楚或連貫，請告訴我。