如何实现完成reCAPTCHA验证后显示可点击按钮？

别担心，我一步步带你搞定这个功能，就算你对JavaScript和jQuery不熟悉也能轻松上手！

1. 先获取reCAPTCHA密钥 #

首先你需要去Google的reCAPTCHA服务注册你的网站，获取两个密钥：

• Site Key：用于前端页面加载reCAPTCHA组件
• Secret Key：用于后端验证用户的reCAPTCHA响应是否有效（这个很重要，绝对不能泄露给前端）

2. 前端代码实现 #

我们用原生JavaScript来写，不需要jQuery，更简单直接：

HTML结构 #

<!-- 先引入reCAPTCHA的官方脚本，把`你的Site Key`替换成你实际获取的密钥 -->
<script src="https://www.google.com/recaptcha/api.js?render=你的Site Key"></script>

<!-- 跳转按钮，初始状态隐藏 -->
<button id="nextPageBtn" style="display:none;">跳转至下一页</button>

<!-- reCAPTCHA的容器，脚本会自动在这里渲染验证组件 -->
<div id="recaptcha-container"></div>

JavaScript逻辑 #

// 页面加载完成后初始化reCAPTCHA
window.onload = function() {
    grecaptcha.render('recaptcha-container', {
        'sitekey': '你的Site Key',
        'callback': function(response) {
            // 验证成功后，显示跳转按钮
            document.getElementById('nextPageBtn').style.display = 'block';
            
            // 给按钮添加跳转事件，把`你的目标页面地址`替换成实际链接
            document.getElementById('nextPageBtn').onclick = function() {
                window.location.href = '你的目标页面地址';
            }
        }
    });
};

3. 后端必须做的安全验证（重要！） #

只做前端验证是不安全的，用户可以绕过前端直接跳转，所以一定要加后端验证。这里给你一个PHP的简单示例：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $recaptchaResponse = $_POST['g-recaptcha-response'];
    $secretKey = '你的Secret Key';
    
    // 向Google发送验证请求
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = [
        'secret' => $secretKey,
        'response' => $recaptchaResponse
    ];
    
    $options = [
        'http' => [
            'header' => "Content-type: application/x-www-form-urlencoded\r\n",
            'method' => 'POST',
            'content' => http_build_query($data)
        ]
    ];
    
    $context = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    $response = json_decode($result);
    
    if ($response->success) {
        // 验证成功，允许跳转或处理后续逻辑
        header('Location: 你的目标页面地址');
        exit;
    } else {
        // 验证失败，提示用户重新验证
        echo 'reCAPTCHA验证失败，请重试！';
    }
}
?>

如果用后端验证，前端可以改成表单提交的方式，把按钮放在表单里：

<form id="submitForm" action="你的后端验证页面.php" method="POST">
    <div id="recaptcha-container"></div>
    <button type="submit" id="nextPageBtn" style="display:none;">跳转至下一页</button>
</form>

这样表单提交时会自动带上reCAPTCHA的验证响应，后端就能完成安全校验了。

效果说明 #

用户打开页面时，只会看到reCAPTCHA验证组件，跳转按钮处于隐藏状态。当用户完成验证（比如勾选“我不是机器人”或完成图片验证），回调函数会触发，按钮就会显示出来，点击就能跳转啦。

内容的提问来源于stack exchange，提问作者Deba Sis Rana