在Svelte应用中添加Google reCAPTCHA无效果，求解决方法

我来帮你梳理几个可行的排查和解决思路，针对你遇到的reCAPTCHA无效果的情况：

1. 手动初始化reCAPTCHA（最可能的核心原因） #

Google reCAPTCHA的自动渲染机制是在脚本加载完成时，一次性扫描页面中所有带有g-recaptcha类的元素。但在Svelte这类框架中，组件往往是页面初始加载后才动态挂载到DOM的，这时候自动扫描已经完成，自然不会渲染验证码。

解决方法是在组件挂载后，手动调用reCAPTCHA的渲染API：

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    // 确保reCAPTCHA脚本已加载完成
    if (!window.grecaptcha) {
      await new Promise(resolve => {
        const script = document.createElement('script');
        script.src = 'https://www.google.com/recaptcha/api.js';
        script.async = true;
        script.defer = true;
        script.onload = resolve;
        document.head.appendChild(script);
      });
    }

    // 找到目标元素并手动渲染
    const captchaEl = document.querySelector('.g-recaptcha');
    if (captchaEl) {
      window.grecaptcha.render(captchaEl, {
        sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
        // 可选：添加验证成功后的回调等参数
        // callback: (token) => console.log('验证成功:', token)
      });
    }
  });
</script>

<div class="g-recaptcha"></div>

2. 检查脚本加载的时机与顺序 #

如果你坚持在index.html中引入脚本，需要确保组件挂载时脚本已经加载完成。可以通过监听window.grecaptcha的存在，或者在组件中等待脚本加载完毕再执行渲染逻辑。另外，注意不要重复引入reCAPTCHA脚本，多次引入可能导致冲突。

3. 确认测试密钥的有效性 #

你使用的6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI是Google官方提供的测试专用密钥，在开发环境下是有效的，但生产环境必须替换为你自己申请的正式密钥。如果测试环境也不显示，先检查浏览器控制台是否有报错。

4. 排查浏览器控制台错误 #

打开浏览器开发者工具的「Console」面板，查看是否有以下类型的错误：

• grecaptcha is not defined：说明脚本未加载成功
• 跨域或资源加载失败：可能是网络环境问题导致脚本无法获取
• DOM元素找不到：确认.g-recaptcha元素确实存在于DOM中（可以在Elements面板检查）

5. 检查样式是否隐藏了验证码 #

有时候验证码已经渲染，但被CSS样式（比如display: none、visibility: hidden或父元素溢出隐藏）遮挡，导致看不到。可以在Elements面板中定位到验证码元素，检查其样式和布局。

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