如何让 firebase App Check 在 Web 应用程序中与 Cloud Firestore 一起使用

Question

我尝试让 App Check 在我的 vue.js pwa 中工作。使用最新的 firebase sdk 并按照此处的步骤操作 https://firebase.google.com/docs/app-check/web/recaptcha-provider

我的api密钥（https://console.cloud.google.com/apis/credentials/key..）不受任何API限制。我确实在 https 上添加了一些应用程序限制，包括我的项目域。

一切正常，直到我使用 recaptcha v3 激活 appCheck 并且我收到以下控制台错误：

FirebaseError: [code=unknown]: Fetching auth token failed: AppCheck: Fetch server returned an HTTP error status. HTTP status: 403. (appCheck/fetch-status-error)

此外，该应用无法获取任何 firebase 数据或身份验证。我尝试了几种浏览器，但没有任何 vpn 的东西。在我已经安装的 pwa 中出现 App Check 错误，但与 firebase 的连接仍然有效..

在没有激活 App Check 的情况下，两者都可以正常工作。此外，使用 App Check 调试令牌，整个过程就可以正常工作。我不明白为什么它会中断 firebase 连接，即使我没有启用强制执行。

我很感激有关如何解决此问题的任何提示。

Answer 1

根据您的问题，您希望为带有 Web 应用程序的 Firestore 启用 Firebase App Check。目前Firestore App Check暂不支持

根据这个Documentation:

Cloud Firestore support is currently available only for Android and iOS clients. If your project has a web app, don't enable Cloud Firestore enforcement until web client support is available.

Answer 2

我发现了我在生产代码中不小心留下的问题 self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;。

删除此行或仅在开发环境中解决整个问题时使用

if (location.hostname === "localhost") {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

我没想到这条线会影响我没有注册调试令牌的浏览器，使常规 appCheck 失败，但当然无论如何在生产中使用它都没有意义。

如何让 firebase App Check 在 Web 应用程序中与 Cloud Firestore 一起使用

How to get firebase App Check working with cloud firestore in a web app

firebase

progressive-web-apps

vuejs2

google-cloud-firestore

recaptcha-v3