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

2023-12-30

我正在尝试将 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.cjs.js:1555:5) 在对象。 (.../functions/lib/index.js:25:18) 在Module._compile(节点:内部/模块/cjs/loader:1095:14) 在 Object.Module._extensions..js (节点:内部/模块/cjs/loader:1124:10) 在Module.load(节点:内部/模块/cjs/loader:975:32) 在 Function.Module._load (节点:内部/模块/cjs/loader:816:12)

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

请帮忙。谢谢你!


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

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

.....

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ReferenceError:文档未定义 - Firebase appcheck 与 React 的相关文章

  • 如何将 div (或任何元素)覆盖在表格行 (tr) 上?

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css
  • 优化数据可视化 Web 应用程序的性能

    我正在重写 3 年前编写的数据可视化网络工具 从那时起 浏览器的 JavaScript 引擎变得更快 所以我正在考虑将部分工作从服务器转移到客户端 在页面上 数据在表格和地图 或图表 中可视化 它使用相同的数据 但以不同的方式 因此准备显示
  • 将组件注册到现有的 Vue.js 实例

    我是 Vue js 新手 我想注册一个本地组件 如下所述 https v2 vuejs org v2 guide components html Local Registration https v2 vuejs org v2 guide
  • 是否可以将自定义 HTML 添加到传单图层组和图层控件

    有什么方法可以将自定义 HTML 注入图层组和图层控件中吗 在我们的应用程序中 我们实现了滑块 输入 范围 来调整不透明度设置 并且很明显 在其控制容器内部的基础层上使用专用滑块是有意义的 没有选项或参数可以修改此控件 理想情况下 我们希望
  • Strapi 未加载 Digital Ocean 上托管的现有 MongoDB 中的集合

    我正在使用 Strapi 创建一个新应用程序 并尝试将其与托管在 Digital Ocean 上的 MongoDB 连接 但不幸的是Strapi 无法从现有 MongoDB 获取集合 在这里 我提到我实现 Strapi 与现有 MongoD
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 模型不是 AngularJS 中输入的日期对象

    使用 AngularJS 我试图使用输入显示日期type date
  • FormData 中的 Blob 为 null

    我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片 我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou
  • AngularJS - 服务、工厂、过滤器等中的依赖注入

    因此 我想在我的 Angular 应用程序中使用一些插件和库 目前 我只是引用这些函数 方法 因为它们是在 99 的应用程序中以完全忽略依赖注入的方式使用的 我有 例如 javascript 库 MomentJS 它处理格式化和验证日期 并
  • 使用 jQuery/JavaScript 将文本框值复制到剪贴板

    我有一个文本框和按钮 如下所示 div class col xs 11 style padding 20px 0 div
  • 将数组中的所有元素相乘

    我在这里找不到我真正想要的例子 我想将所有数组元素相乘 因此如果数组包含 1 2 3 总和将为 123 6 到目前为止 我已经得到了这段代码 但它返回未定义 function multiply array var sum 1 for var
  • firebase匿名身份验证绑定到设备

    我正在开发一个用于公共信息的应用程序 所以不需要注册 但是 我想提供一些个性化服务 为了做到这一点 我需要将用户活动存储在服务器上 有没有办法允许用户匿名登录 但它与设备绑定 因此在用户删除或注销然后再次登录的情况下 他们仍然具有从 fir
  • 表单序列化javascript(无框架)

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We
  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • 在多个数组中搜索字符串,然后设置 var - jQuery

    我正在寻找基于字符串存在于哪个数组中设置一个变量 例如 var primary red blue yellow var secondary orange purple green 然后检查 purple 并返回它在 secondary 数组
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 使用 QtWebEngine 将 C++ 对象暴露给 Qt 中的 Javascript

    使用 QtWebkit 可以通过以下方式将 C 对象公开给 JavascriptQWebFrame addToJavaScriptWindowObject如中所述https stackoverflow com a 20685002 5959
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将

随机推荐

  • 在.Net Framework中使用最新版本的System.Net.Http

    最新版本System Net Http https www nuget org packages System Net Http nuget 上的版本是 4 3 4 但即使是最新的 Net Framework 4 8 也附带了该库的 4 2
  • 拼写检查等统计句子建议模型

    已经有可用的拼写检查模型 可以帮助我们根据经过训练的正确拼写语料库找到建议的正确拼写 是否可以将粒度从字母表增加到 单词 以便我们可以有均匀的短语建议 这样如果输入了错误的短语 那么它应该从正确短语的语料库中建议最接近的正确短语 当然它是从
  • Google 地图信息窗口中的 YouTube 视频

    我正在尝试将 YouTube 视频放入 Google 地图 v3 信息窗口中 它在 Firefox 和 Internet Explorer 中运行良好 It does not在 Safari 和 Chrome 中工作 在这些浏览器中 定位已
  • 在 Activity.onCreate(..) 中显示警报

    我是 Android 新手 这是我的第一个问题 所以请放轻松 是否可以检查 Activity 的 onCreate 内的某些条件并显示 AlertDialog 我在 Oncreate 中匿名创建一个 AlertDialog 并在该实例上调用
  • 使用 R Markdown 的 Beamer 演示

    我正在使用 R Markdown 来制作投影仪演示我对幻灯片水平有疑问 我选择法兰克福主题 该主题允许制定演示计划 标题中的项目符号 我的问题 当我输入 slide level 2 时 我有内容 但没有演示文稿的计划 当我输入 slide
  • 如何从命令行将错误列表(或任何自定义查询)从 TFS 导出到 Excel?

    我需要将错误列表从 Team Foundation Server 导出到 Excel 手动执行此操作很简单 但我需要命令行版本 因为该任务需要自动化 有人知道该怎么做吗 回答你原来的问题 在 TFS 中添加新查询 创建查询并单击 保存 这应
  • 使用 Visual Studio 创建 MSI 并强制所有用户

    我使用 Visual Studio 2015 带有 Visual Studio 安装程序插件 创建了一个安装程序 目标是始终使用相同的本地资源运行应用程序 无论谁登录 因此我们的目标是 CommonAppDataFolder Win10 上
  • 淡出旧元素,淡入新元素

    我是新来反应并尝试过反应动画 http facebook github io react docs animation html 当在 TransitionGroup 中添加或删除元素时 它们非常有用 但是 如果我用类似的元素替换单个元素
  • 非活动类中的警报对话框

    我有一个代码可以检查一些数据并在非活动类中显示警报 但是在运行应用程序时崩溃并且不显示警报对话框 我使用下面的代码 if str isEmpty strPort isEmpty new AlertDialog Builder Mtx get
  • Kivy (Python) - 椭圆点击事件

    我正在尝试翻译的开头一个简单的画布应用程序 https bloom510 github io pitch canvas 我用 JavaScript 编写了 Kivy 框架 我已经能够沿着圆的周长分布顶点 但是无论是用 Python 还是 K
  • 即使在 conda 中安装后也无法导入 Poppler

    我正在尝试使用 pdf 渲染包 Poppler 我在这里找到了相同的 Anaconda 安装 https anaconda org conda forge poppler https anaconda org conda forge pop
  • Python读取文件时出现UnicodeDecodeError,如何忽略错误并跳转到下一行?

    我必须将文本文件读入Python 文件编码为 file bi test csv text plain charset us ascii 这是第三方文件 我每天都会收到一个新文件 所以我宁愿不更改它 该文件包含非 ascii 字符 例如 我需
  • Laravel - 有没有办法将 whereHas 和 with 结合起来

    我目前面临一个小问题 我只想在存在特定条件的关系时返回模型 这与 whereHas 方法配合得很好 m Model whereHas programs function q q gt active 但是 将关系称为这样的属性将为我提供所有内
  • Flask 将 pyaudio 发送到浏览器

    我正在将服务器麦克风的音频发送到浏览器 主要是this https stackoverflow com a 56037682 4871482发布但有一些修改的选项 一切都工作正常 直到你转到手机或野生动物园 它根本不起作用 我尝试过使用类似
  • 迁移学习:模型给出不变的损失结果。难道不是训练吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在尝试训练一个回归Inception V3 上的模型 输入是大小为 96 320 3 的图像 总共有 16k 图像 其中 12k 用于训练
  • Silverlight for WP7 中的 FileNotFoundException

    找不到文件或程序集名称 System Windows debug resources Version 2 0 5 0 Culture en US PublicKeyToken 7cec85d7bea7798e 或其依赖项之一 我很确定这与某
  • 蛇线中的网格自动流动?

    我想知道是否可以在列模式下使用 css 网格并以蛇线填充单元格 像这样 01 06 07 12 02 05 08 11 03 04 09 10 对此有什么建议吗 感谢您的帮助 如果我们考虑到你总是有 3 行 这里有一个想法 containe
  • html/css 中的元素可以有小数高度吗?

    我正在一个网站上工作 当我用 firefox 中的 firebug 查看它时 各种元素的高度似乎都是 133 8 像素 而 chrome 中的 firebug lite 报告的高度为 133px 使用相同的方法 这是浏览器渲染的差异 还是只
  • Netlify 和 React Vite:Netlify 在 Vite 和 React 站点中重新加载时显示“找不到页面”

    我有一个用 React JS 构建的网站 我使用 Vite 作为 JS Bundler 问题是 当我在 Netlify 上部署站点并重新加载页面时 它显示 找不到页面 我尝试添加更改vite config jsfile import def
  • ReferenceError:文档未定义 - Firebase appcheck 与 React

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