如何從 NextJS 應用程序獲取經過身份驗證的 Google Cloud Storage 請求？

Question

我正在使用 Cloud Storage 實例在我的 NextJS Web 應用程序上存儲圖像。

我指的是這樣的圖像：

... some code
image="https://storage.cloud.google.com/{my-project}/myimage.jpg"
... some more code 

我收到這樣的錯誤：

GET http://localhost:3000/_next/image?url=https%3A%2F%2Fstorage.cloud.google.com{image link to Cloud Storage} 400 (Bad Request) 

在閱讀了一些文檔后，我發現我的 Firestore 設置為非公開的，因此只有某些經過身份驗證的用戶才能訪問雲內容。

我無法指定用戶，因為我的本地開發人員環境在 localhost 上運行，而且我不知道 Firebase 將如何查看我的請求，因為我已經在本地計算機上使用gcloud auth login 。

我已經使用添加的next.config.js配置並重新啟動了我的服務器：

module.exports = {
    images: {
        domains: ["storage.cloud.google.com"]
    }
}

我看到有一個答案Frontend Authenticated request Google Cloud Storage解釋了使用令牌，但我不想管理另一個令牌。 是否有可以使用服務帳戶管理訪問權限的解決方案？

我想避免使用此解決方案公開所有圖像。

我不想下載文檔中提到的圖像。

Answer 1

我發現可以限制存儲桶，但是如果使用帶有訪問令牌的鏈接，則將訪問該圖像。

https://firebasestorage.googleapis.com/v0/b/{project-id}/o/{image path}?alt=media&token={token}

這不是我想要的理想方式，因為可以在源代碼上查看令牌，並使圖像存儲桶幾乎可以公開訪問。