You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动