如何从NextJS应用程序获得经过验证的请求到谷歌云存储?

Question

我正在使用云存储实例在我的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设置为非公共，因此只有某些经过认证的用户才能访问云内容。

我不能指定一个用户，因为我的本地开发环境是在本地主机上运行的，我不知道Firebase将如何看到我的请求，因为我已经在本地机器上登录了gcloud auth login。

我已经用添加的next.config.js配置并重新启动了服务器:

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

我看到有一个答案前端认证请求谷歌云存储解释使用令牌，但我不想有另一个令牌来管理。是否有一个解决方案，我可以管理访问使用服务帐户?

我想避免使用这个解决方案使所有的图像公开。

我不想下载文档中提到的形象。

Answer 1

我发现bucket可以被限制，但是如果使用带有访问令牌的链接，那么图像将被访问。

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

这不是我想要的理想方式，因为令牌可以在源代码上查看，并使图像桶几乎可以公开访问。