next.js 正在获取firebase存储映像403

d6kp6zgx  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(119)

我在用Next。js和我努力让firebase存储图像呈现在屏幕上,因为他们不断回来作为403错误。
我上传一个图像到存储器时,添加一个文档到FireStore,里面嵌套了一个URL,然后使用该URL来获取图像
这是我的下一个图像标签与食谱。main_image.url == https://storage.googleapis.com/example.com/recipes/0O3Oycow4lJvyhDbwN0j/main_image/190524-classic-american-cheeseburger-ew-207p.png
和recipe.main_ www.example.com == 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'],
  },
avkwfej4

avkwfej41#

如果这些图像将提供给公众,那么我建议允许公众使用这些图像。Cloud Storage for Firebase由Google Cloud Storage提供支持。您可以使单个对象公开可读使存储桶公开可读
或者更好的方法是生成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了解更多信息。

相关问题