WordPress密码保护页面表单添加reCaptcha验证的实现问题
搞定WordPress密码保护页面的reCaptcha验证
嘿,看你已经成功在密码保护页面的表单上显示了reCaptcha字段,剩下的验证逻辑其实没那么复杂,我给你拆成两步来弄:
一、先把reCaptcha字段精准插到表单里
你之前用my_custom_js输出脚本,其实可以用WordPress自带的钩子,把reCaptcha直接嵌到密码表单里,这样更稳妥,不会出现加载位置不对的问题:
// 替换你原来的my_custom_js,把这段加到主题的functions.php里 add_filter('the_password_form', 'add_recaptcha_to_password_form'); function add_recaptcha_to_password_form($form) { // 这里用的是reCaptcha v2的复选框样式,换成你的Site Key $recaptcha_html = '<div class="g-recaptcha" data-sitekey="你的Site Key"></div>'; // 把验证框插到提交按钮的前面 $form = str_replace('</p><p class="submit">', $recaptcha_html . '</p><p class="submit">', $form); // 加载Google的reCaptcha脚本,用wp_enqueue_script比直接echo更规范 wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js', array(), null, true); return $form; }
二、添加后端验证,确保提交前先过reCaptcha
密码保护页面的表单提交会走WordPress的login_form_postpass动作,我们就在这里加验证逻辑,确保只有reCaptcha通过了,才会去检查密码:
// 同样加到functions.php里 add_action('login_form_postpass', 'validate_recaptcha_for_password_page'); function validate_recaptcha_for_password_page() { // 只处理POST提交的情况 if ($_SERVER['REQUEST_METHOD'] !== 'POST') return; // 先检查用户有没有完成reCaptcha if (!isset($_POST['g-recaptcha-response'])) { wp_die('麻烦先完成reCaptcha验证再提交哦'); } // 给Google发请求验证响应 $secret_key = '你的Secret Key'; $verify_response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', array( 'body' => array( 'secret' => $secret_key, 'response' => $_POST['g-recaptcha-response'], 'remoteip' => $_SERVER['REMOTE_ADDR'] ) )); // 处理请求失败的情况 if (is_wp_error($verify_response)) { wp_die('验证服务暂时出问题了,麻烦稍后再试~'); } // 解析验证结果 $result_data = json_decode(wp_remote_retrieve_body($verify_response), true); if (!$result_data['success']) { // 验证失败的话,给用户提示 $error_text = 'reCaptcha验证没通过,麻烦再试一次'; // 如果有错误码,也可以顺便显示(方便你排查问题) if (isset($result_data['error-codes'])) { $error_text .= '(错误:' . implode(', ', $result_data['error-codes']) . ')'; } wp_die($error_text); } // 到这里就说明reCaptcha验证通过了,WordPress会自动继续处理密码验证 }
几个要注意的点
- 记得把代码里的
你的Site Key和你的Secret Key换成你在Google reCaptcha控制台申请的密钥 - 如果用的是reCaptcha v3,逻辑会有点不一样:前端不需要显示复选框,而是自动生成token,后端验证时要判断返回的分数是否符合你的要求
- 要是服务器在国内,可能需要配置代理才能访问Google的验证接口,不然会验证失败
- 你可以自定义
wp_die里的提示文字,让它更贴合你的网站风格
这样改完之后,用户提交密码的时候就必须先过reCaptcha,验证通过才会检查密码是否正确啦。
内容的提问来源于stack exchange,提问作者Ma Ko




