How to Use WordPress Admin Ajax to Validate reCAPTCHA v3 and Use Axios for Front End Validation

In today’s digital age, security is a top priority for any website. One way to protect your website from spam and malicious attacks is to use reCAPTCHA, a popular tool from Google that adds an additional layer of security to your website’s forms. In this blog post, we will explore how to use WordPress admin ajax to validate reCAPTCHA v3 and use Axios as the example for the front end. This step-by-step guide will show you how to set up and enqueue the necessary scripts, create the client-side and server-side code, and test the validation. By the end of this tutorial, you will have a better understanding of how to protect your website from spam and malicious attacks using reCAPTCHA and WordPress admin ajax.

Step 1: Set up reCAPTCHA v3 on your website

The first step is to set up reCAPTCHA v3 on your website. You can follow the official documentation to obtain the site and secret keys that you will need to validate the reCAPTCHA token.

Step 2: Enqueue the necessary scripts

In your WordPress theme’s functions.php file, you will need to enqueue the necessary scripts to use reCAPTCHA v3 and Axios. You can use the following code:

function enqueue_scripts() {
  // Enqueue reCAPTCHA v3 script
  wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js?render=your-site-key', array(), null, true );

  // Enqueue Axios script
  wp_enqueue_script( 'axios', 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js', array(), null, true );

  // Localize the Ajax URL to use in the client-side code
  wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

 

This code enqueues the reCAPTCHA v3 script and the Axios script, and localizes the Ajax URL to use in the client-side code.

Step 3: Create the client-side code

In your WordPress theme’s header.php file, you can create the client-side code to generate the reCAPTCHA token and verify it using Ajax. You can use the following code:

<script type="text/javascript">
  var site_key = 'your-site-key';

  grecaptcha.ready(function() {
    grecaptcha.execute(site_key, {action: 'submit'}).then(function(token) {
      verifyRecaptcha(token);
    });
  });

  function verifyRecaptcha(token) {
    var data = new FormData();
    data.append('action', 'verify_recaptcha');
    data.append('token', token);

    axios.post(ajax_object.ajax_url, data, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    .then(function(response) {
      if (response.data.success) {
        // Handle successful validation
      } else {
        // Handle failed validation
      }
    })
    .catch(function(error) {
      // Handle Ajax error
    });
  }
</script>

 

This code uses the reCAPTCHA v3 API to generate a token and passes it to the verifyRecaptcha() function. The function creates a new FormData object, appends the action and token parameters, and sends an Ajax POST request to the verify_recaptcha endpoint with the axios.post() method. The response data is then handled based on whether the validation was successful or not.

Step 4: Create the server-side code

In your WordPress theme’s functions.php file, you can create the server-side code to validate the reCAPTCHA token. You can use the following code:

add_action( 'wp_ajax_verify_recaptcha', 'verify_recaptcha' );
add_action( 'wp_ajax_nopriv_verify_recaptcha', 'verify_recaptcha' );

function verify_recaptcha() {
  $secret_key = 'your-secret-key';
  $token = $_POST['token'];
  $url = 'https://www.google.com/recaptcha/api/siteverify';

  $response = wp_remote_post( $url, array(
    'body' => array(
      'secret' => $secret_key,
      'response' => $token
    )
  ) );

  if ( is_wp_error( $response ) ) {
    $error_message = $response->get_error_message();
    echo json_encode( array( 'success' => false, 'message' => $error_message ) );
  } else {
    $response_body = wp_remote_retrieve_body( $response );
    $data = json_decode( $response_body );

    if ( $data->success ) {
      // reCAPTCHA validation was successful
      echo json_encode( array( 'success' => true ) );
    } else {
      // reCAPTCHA validation failed
      echo json_encode( array( 'success' => false, 'message' => 'reCAPTCHA validation failed' ) );
    }
  }

  wp_die();
}

 

This code sets up an Ajax endpoint called verify_recaptcha, which is called when the client-side code sends the POST request to the server. The server-side code retrieves the secret key and token from the request payload, and sends a POST request to the reCAPTCHA API to validate the token. If the API call succeeds, the server-side code returns a success response to the client. If the API call fails, the server-side code returns an error response to the client.

Step 5: Test the validation

To test the validation, you can open your website in a web browser and submit a form that includes reCAPTCHA v3 validation. If the validation is successful, the server-side code will return a success response to the client. If the validation fails, the server-side code will return an error response to the client.

You can use the browser’s developer console to view the network requests and responses, and to debug any issues that arise during the validation process.

And that’s it! With these steps, you can use WordPress admin ajax to validate reCAPTCHA v3 and use Axios as the example for the front end.