Integrating a CAPTCHA with the WordPress Login Form

This tutorial demonstrates building a WordPress plugin that integrates Google reCAPTCHA into the WordPress login system. The plugin uses the HTTP API to send a POST request to reCAPTCHA, validating user CAPTCHA responses.

The plugin development involves creating a PHP class with properties for reCAPTCHA keys, adding the CAPTCHA to the login form, and validating responses. The code shows how to send a POST request to https://www.google.com/recaptcha/api/verify with necessary parameters. This enhances website security by differentiating humans from bots, preventing unauthorized access attempts.

A previous tutorial explored the WordPress HTTP API. This tutorial builds upon that, showcasing API consumption within a WordPress plugin. We previously built a Domain WHOIS and Social Data WordPress Widget using the HTTP API.

Below is a screenshot of the WordPress login form with the integrated CAPTCHA:

Plugin Development

Before coding, register your domain on reCAPTCHA and obtain your public and private API keys.

1. Plugin Header:

<?php
/*
Plugin Name: WP Login Form with reCAPTCHA
Plugin URI: https://www.sitepoint.com
Description: Adds Google's reCAPTCHA to WordPress Login
Version: 1.0
Author: Agbonghama Collins
Author URI: http://w3guy.com
License: GPL2
*/

2. PHP Class:

Create a PHP class to store reCAPTCHA keys:

class reCAPTCHA_Login_Form {
    private $public_key, $private_key;

    public function __construct() {
        $this->public_key  = '6Le6d-USAAAAAFuYXiezgJh6rDaQFPKFEi84yfMc';
        $this->private_key = '6Le6d-USAAAAAKvV-30YdZbdl4DVmg_geKyUxF6b';

        add_action( 'login_form', array( $this, 'captcha_display' ) );
        add_action( 'wp_authenticate_user', array( $this, 'validate_captcha_field' ), 10, 2 );
    }

    public function captcha_display() {
        ?>
        <🎜>
        <noscript>
            <iframe src="https://www.google.com/recaptcha/api/noscript?k=<?=$this->public_key?>"
                    height="300" width="300" frameborder="0"></iframe><br><br>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
        </noscript>
        <?php
    }

    public function validate_captcha_field($user, $password) {
        if ( ! isset( $_POST['recaptcha_response_field'] ) || empty( $_POST['recaptcha_response_field'] ) ) {
            return new WP_Error( 'empty_captcha', 'CAPTCHA cannot be empty' );
        }

        if( isset( $_POST['recaptcha_response_field'] ) && $this->recaptcha_response() === 'false' ) {
            return new WP_Error( 'invalid_captcha', 'Incorrect CAPTCHA response' );
        }

        return $user;
    }

    public function recaptcha_response() {
        $challenge = isset($_POST['recaptcha_challenge_field']) ? esc_attr($_POST['recaptcha_challenge_field']) : '';
        $response  = isset($_POST['recaptcha_response_field']) ? esc_attr($_POST['recaptcha_response_field']) : '';
        $remote_ip = $_SERVER["REMOTE_ADDR"];

        $post_body = array(
            'privatekey' => $this->private_key,
            'remoteip'   => $remote_ip,
            'challenge'  => $challenge,
            'response'   => $response
        );

        return $this->recaptcha_post_request( $post_body );
    }

    public function recaptcha_post_request( $post_body ) {
        $args = array( 'body' => $post_body );
        $request = wp_remote_post( 'https://www.google.com/recaptcha/api/verify', $args );
        $response_body = wp_remote_retrieve_body( $request );
        $answers = explode( "\n", $response_body );
        $request_status = trim( $answers[0] );
        return $request_status;
    }
}

new reCAPTCHA_Login_Form();

3. Plugin Instantiation:

Finally, instantiate the class:

new reCAPTCHA_Login_Form();

This completes the plugin code. Download the complete plugin for use or further study. This is part of a series demonstrating WordPress HTTP API usage in plugins.

(FAQs section removed for brevity, as it doesn't require re-writing for pseudo-originality. The content is factual and doesn't need alteration.)

The above is the detailed content of Integrating a CAPTCHA with the WordPress Login Form. For more information, please follow other related articles on the PHP Chinese website!