【问题标题】：Flutter web : I am getting 403 permission denied error after implementing Firebase app checkFlutter web：实施 Firebase 应用检查后出现 403 权限被拒绝错误
【发布时间】：2022-01-02 02:01:06
【问题描述】：

Flutter Firebase - App Check

Flutter 网页

在此之前，我手动将图像上传到存储桶。我需要帮助才能从 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

问题

最初出现 cors 错误
- 请求响应标头上没有“access-control-origin-access”。
- 通过转到 GCP 并打开云 shell 并添加 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 存储部分找到存储桶 url
修复 cors 问题后，我开始收到 Invalid App Check 令牌
- 这是一个简单的修复。只需要按照guide
- 我现在收到错误 “Permission Denied”403 状态代码

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

【问题讨论】：

你到底想达到什么目的？您可以分享您预期结果的任何图片或链接吗？
您能否通过包含DescriptionCard 以及media 是什么来澄清问题？
'Part A', width: media.size.width, 已经有了 maxwidth，重建应用程序，它将修复 UI 视图并分享问题
请检查问题，这就是我想要实现的目标
您的 Firebase 存储规则是否允许您访问资源？是否需要登录？是否已达到默认访问时间？等

标签： firebase flutter flutter-web firebase-app-check

【解决方案1】：

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

为您的网站注册 reCAPTCHA

您可以在Admin page 上注册您的网站。如果您想在本地开发您的网站，您需要访问127.0.0.1 或将 localhost 添加到域中。见Using reCAPTCHA on localhost。

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

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

然后输入密钥：

一旦 App Check 配置正确，那么存储可能会正常工作。

【讨论】：