Put Google’s Invisible reCAPTCHA on WordPress Login Without a Plugin

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.