When using Google's reCAPTCHA v2 (No CAPTCHA reCAPTCHA) in your web application, you can use AJAX to determine the success of the reCAPTCHA verification on the server-side. The process involves sending the user's response token to the server, which will then verify the token with Google's reCAPTCHA API to ensure the user is not a bot.

Here's a general outline of the steps to implement this in your web application:

  1. Include the reCAPTCHA API JavaScript: In your HTML file, include the reCAPTCHA API script to load the reCAPTCHA widget and display it on your page.
html
<!DOCTYPE html> <html> <head> <!-- Other meta tags and stylesheets --> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <!-- Your form and other page content --> <form id="myForm"> <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div> <button type="submit">Submit</button> </form> </body> </html>
  1. Verify reCAPTCHA on the Server: When the user submits the form, use JavaScript (AJAX) to send the reCAPTCHA response token to your server.
html
<script> document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); var formData = new FormData(this); var recaptchaResponse = grecaptcha.getResponse(); // Send the reCAPTCHA response token to the server formData.append("recaptchaResponse", recaptchaResponse); // Make an AJAX request to your server to verify the reCAPTCHA var xhr = new XMLHttpRequest(); xhr.open("POST", "/verify-recaptcha", true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // Process the server response, e.g., display success message or submit the form var response = JSON.parse(xhr.responseText); if (response.success) { // reCAPTCHA verification successful, submit the form or take further actions document.getElementById("myForm").submit(); } else { // reCAPTCHA verification failed, display an error message or take appropriate actions alert("reCAPTCHA verification failed. Please try again."); // Optionally, reset the reCAPTCHA widget grecaptcha.reset(); } } }; xhr.send(formData); }); </script>
  1. Verify reCAPTCHA Token on the Server: On the server-side (e.g., in your backend or API), handle the AJAX request to verify the reCAPTCHA token with Google's reCAPTCHA API.

    You can use any server-side programming language to handle the verification, but here's an example using Node.js with the axios library:

javascript
const axios = require("axios"); app.post("/verify-recaptcha", (req, res) => { const recaptchaResponse = req.body.recaptchaResponse; const secretKey = "YOUR_SECRET_KEY"; axios .post("https://www.google.com/recaptcha/api/siteverify", { secret: secretKey, response: recaptchaResponse, }) .then((response) => { const { success } = response.data; // Process the success value and send the result back to the client res.json({ success }); }) .catch((error) => { console.error("Error verifying reCAPTCHA:", error.message); res.status(500).json({ success: false }); }); });
  1. Handle the Server Response: Back on the client-side (JavaScript), handle the response from the server. If the server indicates that the reCAPTCHA verification was successful, you can proceed with the form submission or any other desired actions. If the verification failed, display an error message or take appropriate actions.

Remember to replace "YOUR_SITE_KEY" and "YOUR_SECRET_KEY" with the actual reCAPTCHA site key and secret key you obtained from the reCAPTCHA dashboard when registering your site.

By following these steps, you can implement reCAPTCHA verification using AJAX to determine the success of the reCAPTCHA response on your server. This helps prevent bots from submitting forms on your website while allowing genuine users to proceed with their actions.

Have questions or queries?
Get in Touch