WordPress全站CAPTCHA强制验证与定时豁免实现指南

<!-- HTML 结构示例 -->
<div id="captcha-overlay" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column;
">
    <h2>请验证您不是机器人以继续访问</h2>
    <div id="recaptcha-container"></div>
</div>

<div id="site-content" style="display: none;">
    <!-- 您的WordPress网站所有内容将在此处 -->
    <?php while ( have_posts() ) : the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; ?>
</div>

<script async src="https://www.google.com/recaptcha/api.js"></script>

<script>
    // 这段逻辑确保 grecaptcha.ready() 可以安全地在任何时候被调用。
    // 当在 reCAPTCHA 未加载完成时调用 grecaptcha.ready()，
    // 其回调函数会被排队，在 reCAPTCHA 加载完成后执行。
    if(typeof grecaptcha === 'undefined') {
      grecaptcha = {};
    }
    grecaptcha.ready = function(cb){
      if(typeof grecaptcha === 'undefined') { // 再次检查，确保在全局变量被修改前
        // window.__grecaptcha_cfg 是一个存储 reCAPTCHA 配置的全局变量。
        // 默认情况下，其 'fns' 属性中列出的任何函数都会在 reCAPTCHA 加载时自动执行。
        const c = '___grecaptcha_cfg';
        window[c] = window[c] || {};
        (window[c]['fns'] = window[c]['fns']||[]).push(cb);
      } else {
        cb();
      }
    }

    // 定义 reCAPTCHA 验证成功后的回调函数
    function onRecaptchaSuccess(token) {
        // 在这里，您应该将 token 发送到服务器进行验证
        // 示例：通过 AJAX 发送 token
        fetch('/wp-admin/admin-ajax.php', { // 替换为您的验证端点
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'action=verify_recaptcha&token=' + token
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 验证成功，解除页面拦截，并设置豁免Cookie
                document.getElementById('captcha-overlay').style.display = 'none';
                document.getElementById('site-content').style.display = 'block';
                setCookie('recaptcha_passed', 'true', 6 * 60 * 60 * 1000); // 6小时有效期
            } else {
                alert('CAPTCHA 验证失败，请重试。');
                grecaptcha.reset(); // 重置 CAPTCHA
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('验证过程中发生错误，请重试。');
            grecaptcha.reset();
        });
    }

    // Cookie 工具函数
    function setCookie(name, value, duration) {
        const d = new Date();
        d.setTime(d.getTime() + duration); // duration in milliseconds
        const expires = "expires=" + d.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
    }

    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for(let i=0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    // 页面加载时检查豁免Cookie
    document.addEventListener('DOMContentLoaded', function() {
        if (getCookie('recaptcha_passed') === 'true') {
            // 如果有豁免Cookie，直接显示内容
            document.getElementById('captcha-overlay').style.display = 'none';
            document.getElementById('site-content').style.display = 'block';
        } else {
            // 没有豁免Cookie，渲染 CAPTCHA
            grecaptcha.ready(function(){
                grecaptcha.render("recaptcha-container", {
                    sitekey: "YOUR_SITE_KEY", // 替换为您的 Site Key
                    callback: onRecaptchaSuccess // 验证成功后的回调函数
                });
            });
        }
    });
</script>

// 示例：在您的自定义插件或主题的functions.php中
add_action('wp_ajax_verify_recaptcha', 'handle_recaptcha_verification');
add_action('wp_ajax_nopriv_verify_recaptcha', 'handle_recaptcha_verification');

function handle_recaptcha_verification() {
    $response_token = isset($_POST['token']) ? sanitize_text_field($_POST['token']) : '';
    $secret_key = 'YOUR_SECRET_KEY'; // 替换为您的 Secret Key

    if (empty($response_token)) {
        wp_send_json_error(['message' => 'CAPTCHA token missing.']);
    }

    $verify_url = 'https://www.google.com/recaptcha/api/siteverify';
    $request_args = array(
        'body' => array(
            'secret' => $secret_key,
            'response' => $response_token,
            'remoteip' => $_SERVER['REMOTE_ADDR'] // 可选
        )
    );

    $response = wp_remote_post($verify_url, $request_args);

    if (is_wp_error($response)) {
        wp_send_json_error(['message' => 'Failed to connect to reCAPTCHA API.']);
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (isset($data['success']) && $data['success'] === true) {
        wp_send_json_success(['message' => 'CAPTCHA verified successfully.']);
    } else {
        // 可以根据 $data['error-codes'] 提供更详细的错误信息
        wp_send_json_error(['message' => 'CAPTCHA verification failed.', 'errors' => $data['error-codes'] ?? []]);
    }

    wp_die(); // 终止后续执行
}