WordPress全站reCAPTCHA集成与高级访问控制指南

<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 验证框
  grecaptcha.ready(function(){
    grecaptcha.render("captcha-container", { // "captcha-container" 是您页面上用于显示验证框的HTML元素ID
      sitekey: "您的网站密钥" // 替换为您的Google reCAPTCHA网站密钥
    });
  });
</script>

<div id="captcha-container"></div>

// 在WordPress的functions.php或自定义插件中
add_action('wp_ajax_verify_captcha', 'my_verify_captcha_callback');
add_action('wp_ajax_nopriv_verify_captcha', 'my_verify_captcha_callback'); // 允许未登录用户访问

function my_verify_captcha_callback() {
    $recaptcha_response = $_POST['g-recaptcha-response'];
    $secret_key = '您的私钥'; // 替换为您的Google reCAPTCHA私钥

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

    if (is_wp_error($response)) {
        wp_send_json_error('CAPTCHA验证失败: ' . $response->get_error_message());
    }

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

    if ($data->success) {
        // CAPTCHA验证成功
        // 设置一个Cookie或Session，表明用户已通过验证
        setcookie('recaptcha_verified', 'true', time() + (6 * HOUR_IN_SECONDS), COOKIEPATH, COOKIE_DOMAIN);
        wp_send_json_success('CAPTCHA验证成功！');
    } else {
        // CAPTCHA验证失败
        wp_send_json_error('CAPTCHA验证失败，请重试。');
    }
    wp_die(); // 终止AJAX请求
}

add_action('wp_head', 'add_captcha_overlay_html');
function add_captcha_overlay_html() {
    // 只有在未验证时才输出覆盖层
    if (!isset($_COOKIE['recaptcha_verified']) || $_COOKIE['recaptcha_verified'] !== 'true') {
        echo '<div id="full-page-captcha-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
        echo '<h2>请先完成验证以访问网站</h2>';
        echo '<div id="captcha-container"></div>'; // reCAPTCHA 容器
        // 这里可以添加一个用于提交验证的按钮，或者直接在 reCAPTCHA 回调中提交
        echo '</div>';
    }
}

add_action('template_redirect', 'check_recaptcha_access');
function check_recaptcha_access() {
    // 检查是否已通过验证Cookie
    if (!isset($_COOKIE['recaptcha_verified']) || $_COOKIE['recaptcha_verified'] !== 'true') {
        // 如果未通过验证，阻止WordPress正常加载模板
        // 此时，add_captcha_overlay_html 已经输出了覆盖层
        // 我们可以选择直接输出一个简单的页面，或者依赖JS来处理验证和隐藏覆盖层
        // 为了简单起见，我们这里只是确保覆盖层可见，并通过JS处理后续
        // 实际应用中，您可能需要更复杂的逻辑来完全阻止内容渲染
        remove_action('wp_head', 'wp_generator'); // 移除一些不必要的输出
        remove_action('wp_head', 'rsd_link');
        // 等等...
        // 确保页面不会渲染任何其他内容，只显示覆盖层
        // 复杂场景下，可能需要 ob_start() 和 ob_end_clean() 来清空缓冲区
    }
}