如何在Web应用中添加Firebase App Check SDK并修复ReCaptchaV3Provider未定义错误

1. 解决ReCaptchaV3Provider is not defined错误 #

在Firebase Compat模式下，ReCaptchaV3Provider并非全局变量，而是挂载在firebase.appCheck命名空间下，必须通过完整路径访问。

2. 修正代码中的其他问题 #

• 禁止重复初始化Firebase App：你已经在全局执行了firebase.initializeApp(firebaseConfig)，点击按钮时再次调用会触发重复初始化错误，应直接传入已初始化的App实例。
• 提前初始化App Check：App Check需在Firebase App初始化后立即配置，而非等待按钮点击，这样才能提前为所有Firebase服务提供安全保护。
• 修正数据库URL拼写错误：原databaseURL中的括号是无效字符，需改为符合规范的项目名称格式。

修正后的完整代码：

const firebaseConfig = {
  apiKey: "ABCDEF",
  authDomain: "ABCDEFGH.firebaseapp.com",
  projectId: "ABCDEFGHO",
  storageBucket: "project_name.appspot.com",
  messagingSenderId: "123456789",
  databaseURL: "https://project-name.firebaseio.com",
  appId: "1:12345678:web:ffffffffffffffff"
};

// 初始化Firebase App
const app = firebase.initializeApp(firebaseConfig);

// 初始化App Check
firebase.initializeAppCheck(app, {
  provider: new firebase.appCheck.ReCaptchaV3Provider('MY_SITE_KEY_HERE'),
  isTokenAutoRefreshEnabled: true
});

document.getElementById("submit").addEventListener("click",function(event){
  // 此处放置按钮点击后的业务逻辑，如表单提交等
});

3. 验证SDK安装的正确性 #

• 脚本版本统一（均为9.14.0）是正确的，但firebase-app-check-compat.js的async defer属性可能导致脚本加载滞后于业务代码，建议移除该属性，确保App Check SDK在你的代码执行前加载完成。
• reCAPTCHA脚本的引入格式正确，只需将MY_SITE_KEY_HERE替换为Firebase控制台获取的实际密钥即可。

内容的提问来源于stack exchange，提问作者user20537113