如何在 React 中使用 Firebase App Check。 403错误

Question

我想在 Gatsby 项目中使用 Firebase App Check。我已经在 Firebase 控制台中完成了 App 注册。

在我的项目中：

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "firebase/app-check";

const app = initializeApp({
  // My firebase configuration object
});

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('MY_RECAPTCHA_PUBLIC_KEY'),
  isTokenAutoRefreshEnabled: true
});

getToken(appCheck)
  .then(() => {
    console.log('success')
  })
  .catch((error) => {
    console.log(error.message)
  })

但是，它不起作用并出现错误：

@firebase/app-check: FirebaseError: AppCheck: Fetch 服务器返回 HTTP 错误状态。 HTTP 状态：403。（appCheck/fetch-status-error）。

那么，谁能帮我检查一下问题出在哪里？ 怎么解决？

谢谢！

Answer 1

在 Google Cloud Console 中转到您的 Firebase 项目： https : //console.cloud.google.com/apis/credentials

在“API Keys”下点击您的 Firebase API Key 的名称。

“API 限制”

如果您限制使用 API 密钥，请确保您包括：

选定的 API ：Firebase 应用检查 API

Answer 2

添加到@jprio 的答案中：

如果您使用不受限制的API 密钥并使用 ReCaptchaEnterprise，则必须确保为您的 Recaptcha Enterprise 站点密钥正确设置了适当的域。

1. 在 Google Cloud 控制台中，转到安全性，然后是 reCAPTCHA Enterprise： https : //console.cloud.google.com/security/recaptcha
2. 单击三个点，然后在生成的密钥上按“编辑密钥”
3. 在Domain List 下，输入您网站的域，无需添加任何 HTTP/HTTPS/WWW 前缀或端口号。
4. 如果是本地开发，一定要添加localhost/127.0.0.1。 这就是为我解决问题的原因。 保存更改。 在部署到您的网站之前不要忘记删除这些
5. 大约 5 分钟后在您的客户端上刷新，允许更改传播。 如果您使用的是 ReCaptcha Enterprise，请确保您在客户端中使用 ReCaptchaEnterpriseProvider。

Answer 3

我有一个类似的问题。 对我来说，当我在 firebase 配置中使用正确的 appId 时，错误得到了解决。 事实证明，我在 firebase 上设置了两个应用程序，并且下载了具有不同 appId 的错误 json 文件。

根据 firebase 支持，每个应用的 appId 都是唯一的。