ReferenceError：文档未定义 - Firebase appcheck 与 React

Question

我正在尝试将 appcheck 集成到我的 Firebase React 中，我使用 TypeScript Web 版本 9。我将下面的代码添加到我的 Functions/src/index.ts 中

我的 appcheck 集成代码：

const { initializeAppCheck, ReCaptchaV3Provider } = require("firebase/app-check");

const firebaseConfig = { .. app info..};
const app = initializeApp(firebaseConfig);

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(' myKeyString '),
  
    // Optional argument. If true, the SDK automatically refreshes App Check
    // tokens as needed.
    isTokenAutoRefreshEnabled: true
  });

完整错误描述： 错误：解析函数触发器时发生错误。

ReferenceError：文档未在makeDiv（.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1150:24）处定义在initializeV3（.../functions/node_modules/@firebase/ app-check/dist/index.cjs.js:1095:17) 在 ReCaptchaV3Provider.initialize (.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1295:9) 在 _activate （.../functions/node_modules/@firebase/app-check/dist/index.cjs.js:1599:23）在initializeAppCheck（.../functions/node_modules/@firebase/app-check/dist/index.html） cjs.js:1555:5) 在对象。(.../functions/lib/index.js:25:18) 在 Module._compile (节点:internal/modules/cjs/loader:1095:14) 在 Object.Module._extensions..js (节点:internal/ module/cjs/loader:1124:10) 在 Module.load (node:internal/modules/cjs/loader:975:32) 在 Function.Module._load (node:internal/modules/cjs/loader:816:12)

• 如果没有initializeAppCheck部分，我的功能部署正常并且一切正常。

请帮忙。谢谢你！

Answer 1

我也遇到了同样的问题，对我有用的解决方案是通过导出应用程序检查作为反应参考来创建自定义挂钩。然后在其他地方使用它（确保初始化）

import React, { useEffect, createRef } from "react";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
import { app } from "@lib/firebase/firebase"; // our already initialized firebse-app

export const appCheckRef = createRef();
const useAppCheck = () => {
    useEffect(() => {
        if (appCheckRef.current) {
            return;
        }
        const appCheck = initializeAppCheck(app, {
            provider: new ReCaptchaEnterpriseProvider(process.env.NEXT_PUBLIC_RECAPTCHA_KEY_ID/* reCAPTCHA Enterprise site key */),
            isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
        });
        appCheckRef.current = appCheck;
    }, []);
}
export default useAppCheck;

确保在您的应用程序初始化中使用此挂钩。

  useAppCheck();

您现在可以在其他地方使用该引用（确保仅在初始化后使用它们）：

import { appCheckRef } from "@lib/firebase/useAppCheck";
import { getToken } from "firebase/app-check"


export const apiRequest = async (options:AxiosRequestConfig) => {
...
    let appCheckTokenResponse = await
        getToken(appCheckRef.current,/* forceRefresh= */ false);


    const headers = {
        "X-Firebase-AppCheck": appCheckTokenResponse.token,...moreHeaders

.....