Flutter Web中reCAPTCHA与Firebase初始化报错：缺失sitekey参数

错误原因 #

该错误核心是Firebase App Check调用reCAPTCHA时未获取到有效站点密钥，即便你已在index.html中引入reCAPTCHA脚本，也可能是App Check初始化环节缺失或配置逻辑有误。

解决步骤 #

1. 补充Firebase App Check脚本依赖 #

当前代码未引入firebase-app-check.js，需在Firebase初始化前添加该脚本：

<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-check.js"></script>

2. 正确初始化Firebase App Check #

在Firebase App初始化完成后，显式传入reCAPTCHA v3站点密钥初始化App Check：

// 初始化Firebase App之后
const appCheck = firebase.appCheck();
// 替换为你的reCAPTCHA v3站点密钥
appCheck.activate('你的reCAPTCHA站点密钥', {
  isTokenAutoRefreshEnabled: true
});

3. 验证密钥与配置合法性 #

• 必须使用reCAPTCHA v3站点密钥（不可用v2密钥），Flutter Web的App Check集成仅支持v3
• 在Google reCAPTCHA控制台中，确保你的Flutter Web域名（如localhost:5000、生产域名）已加入密钥的允许列表
• 在Firebase控制台的App Check页面，确认该reCAPTCHA密钥已关联到你的Web应用

配置注意事项 #

• 脚本加载顺序：需按firebase-app.js → firebase-app-check.js → 初始化代码的顺序加载，依赖顺序错误会导致功能异常
• 环境区分：开发环境（localhost）和生产环境需配置对应密钥，或临时启用Firebase App Check的测试模式（上线前必须关闭）
• Flutter端配合：若Flutter代码中也有App Check初始化逻辑，需避免重复初始化，优先统一在index.html或Flutter代码中处理（可使用firebase_app_check包）
• 域名白名单：reCAPTCHA控制台和Firebase控制台均需添加你的Web应用域名，否则密钥会被拒绝
• 版本一致性：确保firebase-app.js与firebase-app-check.js的版本完全一致（如均为9.22.1），版本不兼容会引发未知错误

修正后的完整index.html示例 #

<!DOCTYPE html>
<html>
<head>
  <!-- 其他meta标签和脚本 -->
  <!-- 替换为你的reCAPTCHA v3站点密钥 -->
  <script src="https://www.google.com/recaptcha/api.js?render=你的reCAPTCHA站点密钥" defer></script>
</head>
<body>
  <!-- 引入Firebase核心和App Check脚本 -->
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app-check.js"></script>
  
  <script type="module">
    const firebaseConfig = {
      apiKey: "你的apiKey",
      authDomain: "你的authDomain",
      projectId: "你的projectId",
      storageBucket: "你的storageBucket",
      messagingSenderId: "你的messagingSenderId",
      appId: "你的appId",
      measurementId: "你的measurementId"
    };
    // 初始化Firebase App
    const app = firebase.initializeApp(firebaseConfig);
    
    // 初始化App Check
    const appCheck = firebase.appCheck();
    appCheck.activate('你的reCAPTCHA站点密钥', {
      isTokenAutoRefreshEnabled: true
    });
  </script>
</body>
</html>

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