WordPress全站强制reCAPTCHA：实现访问前验证与定时重验的教程

本教程详细阐述如何在WordPress网站上实现全站强制reCAPTCHA验证，确保访客在访问任何页面前必须完成验证。文章将指导您通过自定义JavaScript和HTML/CSS构建一个全屏验证层，并集成Google reCAPTCHA v2，同时实现每隔指定时间（如6小时）要求访客重新验证的逻辑，并讨论对搜索引擎可见性的影响及重要注意事项。 引言：理解需求与挑战 在某些特定场景下，网站运营者可能需要对所有访问者强制实施一道安全屏障，例如在访问网站内容之前要求完成CAPTCHA验证。这种需求通常伴随着以下特点： 全站生效 ：无论访问哪个页面，都必须先通过验证。 定时重验 ：访客在一定时间（如6小时）内只需验证一次，超时后需重新验证。 WordPress兼容 ：解决方案需能无缝集成到WordPress平台。 SEO考量 ：可能需要接受甚至期望网站内容对搜索引擎不可见。 传统的WordPress CAPTCHA插件通常针对表单（如登录、评论）设计，难以实现全站强制且带有时效性的验证逻辑。直接在主题文件（如header. php ）中插入简单代码也可能因加载顺序或缺乏复杂逻辑而失败。因此，我们需要一种更灵活、更底层的自定义实现方式。 核心策略：基于Google reCAPTCHA v2的自定义实现 我们将采用Google reCAPTCHA v2作为验证机制，并通过自定义HTML、CSS和JavaScript来构建一个覆盖整个页面的验证层。当访客首次访问或验证过期时，此层将显示reCAPTCHA，成功验证后隐藏并设置一个计时器（通过Cookie或LocalStorage实现）。 步骤一：获取reCAPTCHA API密钥 首先，您需要在Google reCAPTCHA官方网站注册您的网站，并获取reCAPTCHA v2的 网站密钥（Site Key） 和 秘密密钥（Secret Key） 。 网站密钥（Site Key） ：用于 前端 页面渲染reCAPTCHA小部件。 秘密密钥（Secret Key） ：用于服务器端验证用户提交的CAPTCHA响应，这是确保验证安全性的关键。 步骤二：构建前端界面与行为逻辑 为了实现全站覆盖和定时重验，我们需要在页面加载时注入特定的HTML、CSS和JavaScript。 1. HTML结构：全屏覆盖层与验证容器 在您的WordPress主题文件（推荐使用子主题，或通过钩子注入）的标签内，尽早地添加以下HTML结构。这个captcha-overlay将覆盖整个页面，g-recaptcha是reCAPTCHA小部件的渲染容器。 注意 ：将您的网站密钥替换为您实际获取的Site Key。data-callback="onCaptchaSuccess"指定了验证成功后要调用的JavaScript函数。 2. CSS样式：确保页面遮罩 添加以下CSS样式，确保captcha-overlay能够覆盖整个页面，并且captcha-container居中显示。您可以将这些CSS添加到主题的style. css 文件，或通过WordPress的wp_head或wp_footer钩子注入。 3. JavaScript逻辑：加载、渲染与验证 这是核心逻辑部分，包含reCAPTCHA的异步加载、渲染以及验证成功后的处理（隐藏覆盖层和设置定时Cookie）。 代码解释： PHP 8.5.5 PHP 8.5.5 是 PHP 8.5 分支的维护更新版本。该版本延续了“小步快跑”的迭代逻辑，通过深度错误修复、底层性能微调以及安全加固，旨在为开发者提供一个更健壮、更高效的运行环境。该版本严格遵守语义化版本规范，不包含破坏性变更。 下载 grecaptcha.ready polyfill：确保在reCAPTCHA API完全加载之前调用grecaptcha.ready()也能正常工作，将回调函数排队等待执行。 CAPTCHA_EXPIRATION_KEY 和 CAPTCHA_EXPIRATION_HOURS：定义LocalStorage键名和验证有效期。 checkCaptchaStatus()：检查LocalStorage中是否存在有效的验证时间戳。如果存在且未过期，则隐藏覆盖层；否则，显示覆盖层。 onCaptchaSuccess(token)：这是reCAPTCHA验证成功后调用的函数。 重要提示 ：在实际生产环境中，您 必须 将token发送到您的服务器进行后端验证。前端验证是不可靠的。示例代码中注释掉的部分展示了如何通过AJAX发送token到WordPress后端（例如通过admin- ajax .php）进行验证。 如果服务器端验证成功，则隐藏覆盖层，并更新LocalStorage中的有效期。 grecaptcha.ready() 回调：在reCAPTCHA API加载完成后，检查是否需要显示CAPTCHA，如果需要，则渲染reCAPTCHA小部件。 异步加载reCAPTCHA API脚本：通过动态创建'; } add_action('wp_head', 'custom_captcha_scripts'); // 如果需要服务器端验证，可以添加一个AJAX处理函数 function verify_captcha_callback() { // 获取并验证reCAPTCHA token // 使用 wp_remote_post() 向 Google reCAPTCHA API 发送请求 // 验证成功后返回JSON响应 // error_log('CAPTCHA token received: ' . $_POST['token']); // 调试 $token = isset($_POST['token']) ? sanitize_text_field($_POST['token']) : ''; $secret_key = '您的秘密密钥'; // 替换为您的秘密密钥 $response = wp_remote_post( 'https://www.google.com/recaptcha/api/siteverify', array( 'body' => array( 'secret' => $secret_key, 'response' => $token, 'remoteip' => $_SERVER['REMOTE_ADDR'] ) ) ); if ( is_wp_error( $response ) ) { wp_send_json_error( array( 'message' => 'CAPTCHA verification failed: ' . $response->get_error_message() ) ); } $body = wp_remote_retrieve_body( $response ); $data = json_decode( $body ); if ( $data->success ) { wp_send_json_success( array( 'message' => 'CAPTCHA verified successfully!' ) ); } else { wp_send_json_error( array( 'message' => 'CAPTCHA verification failed.', 'errors' => $data->{'error-codes'} ) ); } } add_action('wp_ajax_verify_captcha', 'verify_captcha_callback'); // 登录用户 add_action('wp_ajax_nopriv_verify_captcha', 'verify_captcha_callback'); // 未登录用户