Skip to content

Megabyte

Web Development

  • About
  • Community
  • Contact

Megan 🐹 is a web developer specializing in WordPress. She is a Senior Developer at Blackbird, an award-winning web agency. Neopets first introduced her to coding.

She also enjoys competitive swimming, reading, and taking care of her pets, Sammy (calico cat) and Artie (bearded dragon).

Search Posts

Categories

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

Google Invisible reCAPTCHA on WordPress Login
Posted July 26, 2018December 10, 2020

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.

Was this post helpful?

Category: WordPressTags: Security WordPress Admin wp-login
Reach Me: Get help on Codementor
Content Disclaimer