Add Google reCAPTCHA to WordPress Login Page

Add Google reCAPTCHA to WordPress Login Page without a Plugin

Do you want to Add Google reCAPTCHA to WordPress Login Page without a Plugin? Let’s defend our website from the robot login attempts with google reCAPTCHA. 

Your site continues to have login attempts from robots. When hackers want to know your website username and password. 

The most common attack is a Brute-force attack. A brute-force attack consists of an attacker submitting many passwords or passphrases with the hope of eventually guessing correctly. The attacker systematically checks all possible passwords and passphrases until the correct one is found.

You want to get rid of it. We can check robots with Google reCAPTCHA. 

Get API Key from Google reCAPTCHA:

Google reCAPTCHA is a free service from Google that helps protect websites from robots. It’s made difference between humans and robots. 

To use this service, We need to get an API key from google.

For getting the reCAPTCHA API key go to google.

recaptcha

Then fill the form with your information and submit it. Remember, Choose reCAPTCHA type to reCAPTCHA v2 > “I’m not a robot” Checkbox.

After, submitting your information, You will get the site key and secret key. Save those key information.

Load Scripts in Login Page:

As for google reCAPTCHA documentation, We need to load JS scripts to active reCAPTCHA.

But the Login page is not the same as other pages. We couldn’t use the same hook. To load scripts on the login page, We use login_enqueue_scripts.

Put this code on your function.php:

function wpk_login_enqueue_styles(){
wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js', array(), '1.0.0', true);
}
add_action( 'login_enqueue_scripts', 'wpk_login_enqueue_styles' );

Add Extra field in Login Page:

We can’t edit wp-login.php. Because It will impact WordPress updates. But WordPress has a hook to add an extra field.

For the Google reCAPTCHA, We need to add a line of HTML.

Put this code into function.php

add_action('login_form','wpk_added_extra_login_field');
function wpk_added_extra_login_field(){
?>    
<div style="margin-bottom: 15px" class="g-recaptcha" data-sitekey="Enter Your Site Key"></div>
<?php
}

Note: On this code replace the “Enter Your Site Key” with your site key who is gotten from google.

At the moment, If you see your login page on your server, Google reCAPTCHA is already loaded. But it will be no effect on our login. Only one more step the rest.

reCAPTCHA Validation:

Not only added reCAPTCHA but also needed validation to complete this job. Then it will impact on user login. 

Copy and put this code on function.php

add_filter('wp_authenticate_user', 'wpk_verify_recaptcha_on_login', 10, 2);
function wpk_verify_recaptcha_on_login($user, $password) {
$secret_key = 'Enter Your Secret Key';
    if (isset($_POST['g-recaptcha-response'])) {
        $response = wp_remote_get( 'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response=' . $_POST['g-recaptcha-response'] );
        $response = json_decode($response['body'], true);
        if (true == $response['success']) {
            return $user;
        }else {
            return new WP_Error( 'Captcha Invalid', __('<strong>ERROR</strong>: Prove You are Human.') );
        }
    }
}

Note: On this code replace the “Enter Your Secret Key” with your site key who is gotten from google.

Conclusion:

The Internet is full of spam, In comments, login forms, mail, even phone SMS, and social media, we are facing spammers continually. It’s made us angry but we are helpless. 

If you read the article carefully and put all code into your functions file. But You must collect an API from google place that API then it will be working. Hope You can Add Google reCAPTCHA to WordPress Login Page.

I hope you like this article. Please comment below.

See More:

How to Create Theme Options Panel in WordPress With Redux Framework

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *