View Component加载reCaptcha时grecaptcha未定义错误求助

1. 搞定"grecaptcha is not defined"报错 #

这个问题本质是reCaptcha脚本加载时机晚于View Component里的代码执行，或者脚本没全局加载：

• 把reCaptcha脚本放到全局布局文件（比如_Layout.cshtml）的<head>或者页面底部，确保View Component渲染前脚本已经开始加载：

  <script src="https://www.google.com/recaptcha/api.js?render=你的站点密钥" async defer></script>
  

• 如果只能在View Component里处理，必须等脚本加载完成再执行逻辑，用grecaptcha.ready()包裹代码：

  grecaptcha.ready(function() {
      grecaptcha.execute('你的站点密钥', {action: '表单对应的动作名'})
          .then(function(token) {
              document.getElementById('g-recaptcha-response').value = token;
          });
  });
  

• 别在View Component里重复引入reCaptcha脚本，重复加载会导致冲突。

2. 修复AspNetCore.ReCaptcha生成的input无值问题 #

View Component是独立渲染的，标签助手可能没正确初始化：

• 在View Component的视图文件开头加上@addTagHelper *, AspNetCore.ReCaptcha，确保标签助手能生效。
• 要是自动生成的input还是没值，就手动处理：
  1. 删掉组件里的recaptcha标签助手，手动加个隐藏input：

     <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
     

  2. 用上面的grecaptcha.ready()方法获取token，赋值到这个input里，保证提交表单时token已经存在。
• 检查View Component绑定的模型，必须包含reCaptcha响应字段，比如：

  public class YourFormModel
  {
      // 其他字段
      public string RecaptchaResponse { get; set; }
  }
  

额外检查项 #

• 确认appsettings.json里的reCaptcha密钥配置正确：

  "Recaptcha": {
      "SiteKey": "你的站点密钥",
      "SecretKey": "你的密钥"
  }
  

• 清一下浏览器缓存，旧缓存可能导致脚本加载异常。
• 看一下控制台有没有其他JS错误，其他错误可能会阻塞reCaptcha脚本的正常加载。

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