How to Integrate Google Invisible reCAPTCHA on WordPress Login
If you’re looking to protect your WordPress site against brute force attacks, you can add features like a CAPTCHA or honeypot on your login page or enable 2-factor authentication. The code below is an example of how to add Google’s invisible reCAPTCHA to your WordPress login.
I did grab a bit of this code from somewhere else, but made some adjustments. I can’t find the original post I referenced (many of the ones out there use plugins or are using the old version of reCAPTCHA). – Hence me posting this blog post. 🙂 The one I referenced was integrating reCAPTCHA v.2, so I just made adjustments for the invisible version. (Please Note: You will need to generate a new public/private key pair in the reCAPTCHA admin to use the invisible version, but the changes to the code is minimal.) I also made a note of one issue I ran into with the WP_Error
.
Please Note: If you aren’t already familiar with WordPress development, this code should go into either your custom theme‘s functions.php
, your child theme‘s functions.php
, or a plugin file. Do not edit your theme’s functions.php
if you are not the theme author, as your file changes will be replaced on the next update of the theme.
/** * These Functions Add and Verify the Invisible Google reCAPTCHA on Login */ add_action('login_enqueue_scripts', 'login_recaptcha_script'); function login_recaptcha_script() {wp_register_script('recaptcha_login', 'https://www.google.com/recaptcha/api.js');
wp_enqueue_script('recaptcha_login');
} add_action( 'login_form', 'display_recaptcha_on_login' ); function display_recaptcha_on_login() {echo "<script> function onSubmit(token) { document.getElementById('loginform').submit(); } </script> <button class='g-recaptcha' data-sitekey='YOUR_PUBLIC_KEY' data-callback='onSubmit' data-size='invisible' style='display:none;'>Submit</button>";
} add_filter('wp_authenticate_user', 'verify_recaptcha_on_login', 10, 2); function verify_recaptcha_on_login($user, $password) { if (isset($_POST['g-recaptcha-response'])) {$response = wp_remote_get( 'https://www.google.com/recaptcha/api/siteverify?secret=YOUR_SECRET_KEY&response=' . $_POST['g-recaptcha-response'] );
$response = json_decode($response['body'], true);
if (true == $response['success']) {
return $user;
} else {
// FIXME: This one fires if your password is incorrect... Check if password was incorrect before returning this error...
// return new WP_Error( 'Captcha Invalid', __('<strong>ERROR</strong>: You are a bot') );
}
} else {
return new WP_Error( 'Captcha Invalid', __('<strong>ERROR</strong>: You are a bot. If not then enable JavaScript.') );
}
}
Get Your Site Key and Secret Key:Â https://www.google.com/recaptcha/admin
Edit: If you use a password manager to login to your WordPress site, you will have a hard time with this. Turn auto-login off and don’t let it auto-fill (copy & paste your password). The invisible captcha does not like auto-fill and will not authenticate.
Please Note: If you have any custom login forms (or ones using the wp_login_form()
function, this will not add the client-side reCAPTCHA code (the script & the button) to your form. You’ll need to add that manually or start redirecting that login traffic to wp-login.php
instead.