ReferenceError：文档未定义 - Firebase appcheck 与反应答案

【问题标题】：ReferenceError: document is not defined - Firebase appcheck with reactReferenceError：文档未定义 - Firebase appcheck 与反应
【发布时间】：2022-08-07 16:57:19
【问题描述】：

我正在尝试将 appcheck 集成到我的 firebase react 中，我使用 typescript web 版本 9。我将下面的代码添加到我的函数/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.cjs.js:1555:5) 在对象。 (.../functions/lib/index.js:25:18) 在 Module._compile (node:internal/modules/cjs/loader:1095:14) 在 Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10) 在 Module.load (node:internal/modules/cjs/loader:975:32) 在 Function.Module._load (节点:internal/modules/cjs/loader:816:12)

没有initializeAppCheck 部分，我的功能部署良好，一切正常。

请帮忙。谢谢！

在 node 中运行脚本时，document 不存在。
ReCaptcha 3 Provider 似乎依赖于文档对象，该对象在浏览器之外不可用

标签： javascript firebase firebase-app-check

【解决方案1】：

我也遇到了同样的问题，对我有用的解决方案是创建一个自定义钩子，通过将 app-check 导出为反应参考。然后在其他地方使用它（确保初始化）

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

.....

【讨论】：