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

Question

我想在 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）。

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

谢谢！

Answer 1

不要将 localhost 添加到 ReCaptcha 的接受域中。 Google Firebase 文档很清楚，您不应该将 localhost 添加到允许的域，例如 @uponly 建议的参考： https: //firebase.google.com/docs/app-check/web/debug-provider ?authuser=0&hl=en#web -版本9

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

太长了；

1. window.FIREBASE_APPCHECK_DEBUG_TOKEN=true在调用之前设置initializeAppCheck以告诉代码请求调试令牌
2. 在应用程序的网络浏览器中打开控制台，并按照打印的提示打印令牌AppCheck debug token:
3. 转到Firebase 控制台 Web 门户并导航到Project Settings -> App Check。单击您要为其设置 AppCheck 的应用程序行末尾的三个点，然后在弹出窗口中添加调试令牌。