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

Question

Flutter Firebase - App Check

颤振网

之前，我手动将图片上传到存储桶。 我需要帮助从 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 但没有成功，因为主要问题是 Permission Denied from server

问题

1. 最初出现 cors 错误
   • 请求响应中没有“access-control-origin-access”header。
   • 通过转到 GCP 并打开云 shell 并添加 cors 规则来修复它。

   • Open Google Cloud Console
   • Select the project same as firebase project
   • open the cloud shell
   • The create a file touch cors.json
   • use vim to edit 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,
    }
   ]
   

   • run command gsutil cors set cors.json gs://<your-bucker>

   You can find the bucket url from firebase storage section

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

App check invalid token is gone	but, getting Permission Denied 403 Error Code

Answer 1

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

为您的网站注册 reCAPTCHA

您可以在 Admin page. If you want to develop your website locally, you need to visit 127.0.0.1 or add localhost to the domains. See Using reCAPTCHA on localhost.

上注册您的网站

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

转到项目设置>App Check>并添加reCAPTCHA密钥。

然后输入密钥：

正确配置 App Check 后，存储可能会正常工作。