纯HTML网站如何验证reCAPTCHA v2？加载时遇连接错误求助

嘿，我来帮你解决这个reCAPTCHA的问题！你遇到的“Cannot contact reCAPTCHA”错误，大概率是脚本加载方式不对或者没有正确配置site key导致的。纯HTML环境下要搞定reCAPTCHA v2，咱们一步步来：

1. 先搞定你的Site Key #

首先你得去Google的reCAPTCHA服务平台注册你的网站，拿到专属的Site Key——这是连接reCAPTCHA服务的核心凭证，没有它肯定会加载失败。

2. 正确加载reCAPTCHA脚本 #

之前的脚本加载缺少关键参数，要在URL里加上onload回调和render=explicit，这样脚本加载完成后会自动触发你定义的渲染函数，而不是自动渲染（纯HTML场景下显式渲染更可控）。

3. 完整的实现代码（替换你的现有代码） #

下面是可以直接用的完整示例，记得把YOUR_SITE_KEY替换成你自己的Site Key：

<html>
<head>
    <title>reCAPTCHA v2 纯HTML验证示例</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <!-- 带关键参数的reCAPTCHA脚本加载 -->
    <script src="https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad&render=explicit" async defer></script>
    <script>
        // 脚本加载完成后触发的回调，用来渲染reCAPTCHA
        function onRecaptchaLoad() {
            grecaptcha.render('recaptcha-container', {
                'sitekey': 'YOUR_SITE_KEY', // 替换成你的Site Key
                'callback': onRecaptchaSuccess, // 验证成功后的回调
                'expired-callback': onRecaptchaExpired // 验证过期后的回调
            });
        }

        // 保存验证成功后的令牌
        let recaptchaToken = null;
        function onRecaptchaSuccess(token) {
            recaptchaToken = token;
            console.log("reCAPTCHA验证通过，令牌：", token);
        }

        // 验证过期时清空令牌
        function onRecaptchaExpired() {
            recaptchaToken = null;
            alert("reCAPTCHA验证已过期，请重新完成验证");
        }

        // 表单提交时的验证逻辑
        $(document).ready(function() {
            $('#submit-form').submit(function(e) {
                // 先阻止默认提交行为
                e.preventDefault();
                
                // 检查用户是否完成了reCAPTCHA验证
                if (!recaptchaToken) {
                    alert("请先完成reCAPTCHA验证再提交！");
                    return false;
                }

                // 这里可以添加你的表单处理逻辑（比如收集表单数据）
                // 因为你不用后端，这里可以做前端的提示或其他操作
                alert("表单提交成功！reCAPTCHA令牌：" + recaptchaToken);
                
                // 重置reCAPTCHA，方便下次提交
                grecaptcha.reset();
                recaptchaToken = null;
            });
        });
    </script>
</head>
<body>
    <form id="submit-form">
        <!-- 示例表单字段，你可以换成自己的 -->
        <label>用户名：</label>
        <input type="text" name="username" required><br><br>
        
        <!-- reCAPTCHA的容器，必须存在 -->
        <div id="recaptcha-container"></div><br><br>
        
        <button type="submit">提交</button>
    </form>
</body>
</html>

关键注意点 #

• 一定要替换YOUR_SITE_KEY为你自己的真实Site Key，这是解决“Cannot contact reCAPTCHA”错误的核心
• 脚本里的onload参数值必须和你定义的回调函数名完全一致（这里是onRecaptchaLoad）
• async defer确保脚本异步加载，不会阻塞页面渲染
• 前端验证只是提升用户体验，如果涉及敏感操作（比如注册、提交重要数据），必须在后端用Secret Key验证reCAPTCHA令牌——不过你说不用后端，当前场景下前端校验足够满足基础需求

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