为 REACT Web 实施 Firebase AppCheck答案

【问题标题】：Implementing Firebase AppCheck for REACT Web为 REACT Web 实施 Firebase AppCheck
【发布时间】：2022-11-05 04:50:47
【问题描述】：

我正在尝试为我的 React Web 应用程序实现 Firebase AppCheck 功能。我注册了 reCaptchav3，但它似乎不起作用。我按照Firebase AppCheck Documentation 上的示例进行操作，不知道出了什么问题。有谁知道该怎么做？

firebase.js（我的 firebase 配置文件）

import firebase from "firebase/compat/app";
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check"

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(process.env.REACT_APP_APP_CHECK_RECAPTCHA_SITEKEY),
    isTokenAutoRefreshEnabled: true
});
const firestore = app.firestore();
export const database = {
    usersRef: firestore.collection('user'),
    portfolioRef: firestore.collection('portfolio'),
    projectTitleRef: firestore.collection('projectTitle'),
    audioRef: firestore.collection('audio'),
    videoRef: firestore.collection('video'),
    imageRef: firestore.collection('image'),
    ascensionRef: firestore.collection('ascensionNumber')
};
export const storage = app.storage("gs://sftc-development.appspot.com");
export const auth = app.auth();
export default app;

这是我得到的错误

【问题讨论】：

标签： reactjs firebase firebase-app-check

【解决方案1】：

一个对我有用的解决方案：9.8.4

转到https://firebase.google.com/docs/app-check/web/debug-provider?hl=en
在完成您的 firebase 设置后 -> 注册您的网站 reCAPTCHA v3 并在https://www.google.com/recaptcha/admin/create 获取您的 reCAPTCHA v3 站点密钥和密钥站点密钥进入您的代码配置（React 部分）/密钥进入 Firebase
secret_key_in_firebase site_key_in_code_config
1. 构建和部署
2. 对于开发环境，您需要调试令牌。按照此处的步骤获取它并将其添加到代码配置（React 部分）： https://firebase.google.com/docs/app-check/web/debug-provider?hl=en&authuser=0
step 1 step 4

最后，代码应如下所示：
```
    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
        window.FIREBASE_APPCHECK_DEBUG_TOKEN = 'your_debug_token';
    }
    
    const appCheck = initializeAppCheck(app, {
        provider: new ReCaptchaV3Provider('your_site_key_from_register'),
    
        // Optional argument. If true, the SDK automatically refreshes App Check
        // tokens as needed.
        isTokenAutoRefreshEnabled: true
    });
```

【讨论】：