Umbraco CMS集成reCAPTCHA 2触发‘too much recursion’错误求助

根据你描述的情况——reCAPTCHA能正常显示但点击触发递归错误，我遇到过类似的场景，大概率是以下几个原因导致的，给你逐一排查方案：

1. 元素ID与label的for属性冲突（最可能的原因） #

你代码里给reCAPTCHA容器设置了id="captchaContainer"，同时对应的label标签用了for="captchaContainer"。但reCAPTCHA的div不是标准的表单输入控件，浏览器尝试将label的点击事件绑定到这个div时，会触发不必要的事件循环，进而引发"too much recursion"错误。

修改方案：
去掉label的for属性，或者给label设置一个不关联容器的id，因为reCAPTCHA本身会提供 accessibility 提示，不需要额外绑定label到容器：

<div class="form-group">
    <div class="col-6">
        <label class="form-control-label">Captcha:</label> <!-- 移除for属性 -->
    </div>
    <div class="col-6">
        <!-- 可以移除id，除非需要显式初始化reCAPTCHA -->
        <div class="g-recaptcha" data-sitekey="@ConfigurationManager.AppSettings[DictionaryKeys.ReCaptchaPublicKey]"></div>
    </div>
</div>

2. Bootstrap JS与reCAPTCHA的事件绑定冲突 #

Bootstrap 4依赖jQuery，而reCAPTCHA的脚本也会使用DOM事件绑定。如果页面中存在jQuery版本不一致、重复引入，或者Bootstrap的某些组件（如模态框、工具提示）的事件与reCAPTCHA冲突，也可能导致递归错误。

排查方案：

• 检查页面是否重复引入了jQuery或Bootstrap JS（比如布局页和内容页都引入了），确保只加载一次；
• 将reCAPTCHA的脚本放在Bootstrap JS之后加载，让Bootstrap先完成事件初始化；
• 暂时禁用Bootstrap的某些交互组件（如tooltip、popover），测试是否还会报错，逐步定位冲突点。

3. Umbraco表单的重复事件绑定 #

Html.BeginUmbracoForm会自动处理表单的提交事件，如果页面存在表单重复渲染（比如局部视图多次加载），或者自定义的表单事件与reCAPTCHA的事件叠加，可能引发递归。

解决思路：

• 确保页面中只有一个注册表单实例；
• 尝试将reCAPTCHA容器移到Umbraco表单外部测试（虽然不符合规范，但可以快速验证是否是表单事件冲突）；
• 检查是否有自定义的表单提交事件监听器，避免与reCAPTCHA的验证事件重复绑定。

4. 改用显式初始化reCAPTCHA #

自动初始化（通过g-recaptcha类）有时候会和页面的异步加载逻辑冲突，改用显式初始化可以避免这个问题：

首先修改脚本引入：

<script src="https://www.google.com/recaptcha/api.js?onload=initCaptcha&render=explicit" async defer></script>

然后添加初始化函数：

<script>
    function initCaptcha() {
        grecaptcha.render('captchaContainer', {
            sitekey: '@ConfigurationManager.AppSettings[DictionaryKeys.ReCaptchaPublicKey]'
        });
    }
</script>

同时给reCAPTCHA容器保留id：

<div id="captchaContainer"></div>

先从第一个方案开始排查，因为ID冲突是这类错误最常见的诱因，大概率能解决你的问题。

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