firebase - Flutter web：实施 Firebase 应用检查后出现 403 权限被拒绝错误

Question

Flutter Firebase - 应用检查

颤振网络

在此之前，我手动将图像上传到存储桶。我需要帮助才能从 Firebase 存储桶中获取数据。

• 我试图获取以 1920x1080p 分辨率存储为 jpeg 格式的图像。

  Future<String> imageData = FirebaseStorage.instance
      .ref()
      .child('images')
      .child('panda_16x9.jpeg')
      .getDownloadURL();
  

• 然后我将imageData传递给FutureBuilder

  FutureBuilder<String>(
  future: imageData,
  builder: (context, imageUrl) {
    if(imageUrl.hasError) {
      return __(widget saying error)__
    }
    if(imageUrl.hasData) {
      return Image.network(imageUrl.data!);
    }
    return __(loading widget)__
  });
  

• 我也尝试获取数据是 Uint8List 但没有成功，因为主要问题是来自服务器的权限被拒绝

问题

1. 最初是得到cors错误
   • 请求响应标头上没有“access-control-origin-access”。
   • 通过转到 GCP 并打开云外壳并添加 cors 规则来修复它。

   • 打开谷歌云控制台
   • 选择与firebase项目相同的项目
   • 打开云壳
   • 创建文件touch cors.json
   • 使用 vim 编辑vim cors.json

   [
    {
     "origin":["*"], // In production we will replace it with original domain name
     "method":["GET","POST","UPDATE","DELETE"],
     "header":["Access-Control-Allow-Origin"],
     "maxAgeSeconds":3600,
    }
   ]
   

   • 运行命令gsutil cors set cors.json gs://<your-bucker>

   您可以从 Firebase 存储部分找到存储桶网址

2. 修复 cors 问题后，我开始收到 Invalid App Check 令牌
   • 这是一个简单的修复。只需要按照指南进行操作
   • 我现在收到错误“权限被拒绝”403 状态代码

应用检查无效令牌不见了	但是，获得 Permission Denied 403 错误代码

Answer 1

您没有提到是否在 Firebase 项目中设置了reCAPTCHA或配置了 WebApp。

为您的网站注册 reCAPTCHA

您可以在管理页面上注册您的网站。如果您想在本地开发您的网站，您需要访问127.0.0.1或添加 localhost 到域。请参阅在 localhost 上使用 reCAPTCHA。

然后，在您的 firebase 项目中配置该应用程序。

转到项目设置>应用检查> 并添加reCAPTCHA密钥。

然后输入密钥：

正确配置 App Check 后，存储可能会起作用。