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

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

在我的项目中：

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: 获取服务器返回了 HTTP 错误状态。 HTTP 状态：403。（appCheck/fetch-status-error）。

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

Thanks!

不要将 localhost 添加到 ReCaptcha 接受域。 https://i.stack.imgur.com/abh1U.pngGoogle Firebase 文档明确表示您不应该将 localhost 添加到允许的域，例如 @uponly 建议的参考：

使用“在本地主机上使用调试提供程序”部分中更清楚地概述的步骤

TLDR;

1. Set window.FIREBASE_APPCHECK_DEBUG_TOKEN=true就在你打电话之前initializeAppCheck告诉您的代码请求调试令牌
2. 在应用程序的网络浏览器中打开控制台，并按照打印的提示打印令牌AppCheck debug token:
3. 前往Firebase 控制台门户网站 https://console.firebase.google.com/并导航至项目设置 -> 应用程序检查。单击您要为其设置 AppCheck 的应用程序行末尾的三个点，然后在弹出窗口中添加调试令牌。