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

Posted 2023-02-23

【中文标题】Flutter web：实施 Firebase 应用检查后出现 403 权限被拒绝错误

【英文标题】：Flutter web : I am getting 403 permission denied error after implementing Firebase app check

【发布时间】：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 存储规则是否允许您访问资源？是否需要登录？是否已达到默认访问时间？等

【参考方案1】：

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

为您的网站注册 reCAPTCHA

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

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

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

然后输入密钥：

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