获取 firebase 存储图像 403

Question

我正在使用 Next.js 并且正在努力让 firebase 存储图像呈现在屏幕上，因为它们不断返回 403 错误。

我在将包含 url 嵌套的文档添加到 firestore 时将图像上传到存储，然后使用该 url 获取图像

这是我的下一张图片标签 recipe.main_image.url == https://storage.googleapis.com/chairy-cooks.appspot.com/recipes/0O3Oycow4lJvyhDbwN0j/main_image/190524-classic-american-cheeseburger-ew-207p.png

并且recipe.main_image.name == firebase 存储中的照片名称。

<Image 
  alt={recipe.main_image.name}
  src={recipe.main_image.url}
  width={650}
  height={650}
/>

alt 标签作为正确的东西返回（firebase 存储中的图像名称）所以我知道图像被发回但出于某种原因我未获得授权我尝试了多种修复，包括将 firebase 规则更改为

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

和

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

但两者都没有改变结果我还设置了我的下一个配置所以我得到了 firebase 存储

  images: {
    domains: ['images.ctfassets.net', 'storage.googleapis.com'],
  },

Answer 1

如果图像将提供给 public，那么我建议授予 public 图像访问权限。 Cloud Storage for Firebase 由 Google Cloud Storage 提供支持。你可以 make individual objects publicly readable or make the bucket publicly readable.

或更好的是，生成 signed URLs，这样您就可以授予对对象的有限时间访问权限。如果您正在使用 Javascript 那么您可以查看此示例代码，了解如何生成带符号的 URL.

/**
 * TODO(developer): Uncomment the following lines before running the sample.
 * Note: when creating a signed URL, unless running in a GCP environment,
 * a service account must be used for authorization.
 */
// The ID of your GCS bucket
// const bucketName = 'your-unique-bucket-name';

// The full path of your file inside the GCS bucket, e.g. 'yourFile.jpg' or 'folder1/folder2/yourFile.jpg'
// const fileName = 'your-file-name';

// Imports the Google Cloud client library
const {Storage} = require('@google-cloud/storage');

// Creates a client
const storage = new Storage();

async function generateV4ReadSignedUrl() {
  // These options will allow temporary read access to the file
  const options = {
    version: 'v4',
    action: 'read',
    expires: Date.now() + 15 * 60 * 1000, // 15 minutes
  };

  // Get a v4 signed URL for reading the file
  const [url] = await storage
    .bucket(bucketName)
    .file(fileName)
    .getSignedUrl(options);

  console.log('Generated GET signed URL:');
  console.log(url);
  console.log('You can use this URL with any user agent, for example:');
  console.log(`curl '${url}'`);
}

generateV4ReadSignedUrl().catch(console.error);

您可以访问此 documentation 了解更多信息。

获取 firebase 存储图像 403

Getting firebase storage image 403

javascript

google-cloud-storage

firebase

reactjs

next.js