Umbraco Form 12.1.1版本与Google reCAPTCHA V3兼容问题

首先明确：reCAPTCHA V3是隐形验证，不会在页面上显示传统的验证码框，这是正常设计。提交表单失败、页面停留的问题，可从以下方向排查：

• 确认reCAPTCHA V3密钥配置无误
  进入Umbraco后台「Forms」→「Settings」→「reCAPTCHA」，检查填写的Site Key和Secret Key是Google reCAPTCHA控制台生成的V3密钥（V2密钥无法兼容V3验证）。同时确保控制台中已添加当前网站的域名（本地调试需包含localhost）。

• 验证表单已启用reCAPTCHA V3验证
  编辑目标表单，切换到「Settings」标签页，在「Validation」区域勾选「Enable reCAPTCHA」，并确认下拉选项选择的是「reCAPTCHA v3」。

• 检查前端脚本加载与提交逻辑
  查看页面源码，确认存在reCAPTCHA脚本：<script src="https://www.google.com/recaptcha/api.js?render=你的SiteKey"></script>。若缺失，需确保渲染表单的模板中包含@Html.RenderUmbracoFormScripts()（MVC视图），或在Razor组件中正确引入Forms的必要脚本。
  若自定义了表单提交逻辑，需手动调用reCAPTCHA获取token并传入表单：

  document.querySelector('form.umbraco-form').addEventListener('submit', function(e) {
    e.preventDefault();
    grecaptcha.execute('你的SiteKey', {action: 'submit'}).then(function(token) {
      document.querySelector('input[name="g-recaptcha-response"]').value = token;
      this.submit();
    }.bind(this));
  });
  

• 查看服务器端日志定位错误
  检查Umbraco日志文件（默认路径App_Data/Logs），查找是否存在reCAPTCHA相关错误，比如「Invalid reCAPTCHA token」「Secret key invalid」等，这类日志可直接定位问题根源。

• 排查内容安全策略（CSP）限制
  若网站配置了CSP，需允许加载reCAPTCHA相关资源，在CSP规则中添加：

  script-src 'self' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
  frame-src 'self' https://www.google.com/recaptcha/;
  style-src 'self' https://www.google.com/recaptcha/;
  

• 确认版本兼容性
  若以上都没问题，可尝试将Umbraco Forms更新至最新稳定版本，或回退到已知兼容的版本，排查是否存在版本间的适配问题。

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