如何在 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 都是唯一的。