Firebase AppCheck拒绝本地Web应用请求，如何正确配置reCAPTCHA？

1. localhost能否注册reCAPTCHA？ #

完全可以。在reCAPTCHA控制台注册密钥时，直接在域名输入框填localhost就行，不用加协议（http/https）或端口号，开发环境下localhost是官方允许的合法域名。

2. 当前实现的问题及修正方法 #

你现在的代码只是单纯渲染了reCAPTCHA组件，但根本没和Firebase App Check挂钩——这就是请求被拒绝的关键原因。Firebase App Check需要通过SDK来集成reCAPTCHA，而不是手动写reCAPTCHA的DOM。正确的做法如下：

首先，确认用的是reCAPTCHA v3 #

Firebase App Check只支持reCAPTCHA v3（或Enterprise版），如果之前注册的是v2，得重新去控制台注册一个v3的密钥。

然后，整合Firebase SDK和App Check #

1. 引入必要的Firebase脚本：

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

2. 初始化Firebase并激活App Check：

// 替换成你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API密钥",
  authDomain: "你的认证域名",
  projectId: "你的项目ID",
  storageBucket: "你的存储桶",
  messagingSenderId: "你的消息发送者ID",
  appId: "你的App ID"
};

firebase.initializeApp(firebaseConfig);

// 用你的reCAPTCHA v3密钥激活App Check
const appCheck = firebase.appCheck();
appCheck.activate('你的reCAPTCHA_V3_SITE_KEY', {
  isTokenAutoRefreshEnabled: true // 自动刷新验证令牌，避免过期
});

3. 删除冗余代码
   你原来写的<div class="g-recaptcha">和对应的api.js引用可以删掉了——Firebase App Check会自动处理reCAPTCHA的验证流程，不需要手动渲染组件。

额外排查点 #

• 去Firebase控制台确认App Check已经启用，并且把你的reCAPTCHA密钥绑定到了对应的Web应用上。
• 开发环境下，localhost可以用测试模式，但正式上线前要切换到生产验证配置。
• 打开浏览器控制台看看有没有具体的错误提示，比如密钥不匹配、SDK版本不兼容之类的，这些都可能导致请求被拒。

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