Scroll To Top

reCAPTCHA using ajax, PHP and Jquery – how to implement it

Posted in PHP4 years ago • Written by Clara Rose8 Comments

reCAPTCHA using ajax, PHP and Jquery!

First of all you need to get access to recaptcha. So click HERE and look at the right up corner – there is a button saying Get “reCAPTCHA” – click on it and login into your google account, if needed. In the form at the same page fill your group label and add the domains that you will use the reCAPTCHA on – if you don’t have a domain, don’t worry – reCAPTCHA is working by default on localhost.

recaptcha using ajax

recaptcha using ajax

Once the website is added, you will see a table right above the form containig the name and the URL – click on it.

There you will see this:

recaptchaKeys

  • Click on Step 1 and copy-paste the first snippet(script) before the closing </head> tag on your HTML template.
  • Copy the second snippet(div) and paste it where you want the widget to appear.

If you save your file and refresh you will see that reCAPTCHA is shown on the page. What we need is to verify the user input.

In order to do this we have to create an ajax request to our server and verify if everything is ok.

Here is a simple javascript that will do the job:

    $("#butoonID").click(function () {
    /* Check if the captcha is complete */
    if ($("#g-recaptcha-response").val()) {
        $.ajax({
            type: 'POST',
            url: "verify.php", // The file we're making the request to
            dataType: 'html',
            async: true,
            data: {
                captchaResponse: $("#g-recaptcha-response").val() // The generated response from the widget sent as a POST parameter
            },
            success: function (data) {
                alert("everything looks ok");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("You're a bot");
            }
        });
    } else {
        alert("Please fill the captcha!");
    }
});

Ok the above code will send a request to our verify.php file and we need to handle this request and check if the captcha is not abused.

verify.php

$captcha = filter_input(INPUT_POST, 'captchaResponse'); // get the captchaResponse parameter sent from our ajax

/* Check if captcha is filled */
    if (!$captcha) {
        http_response_code(401); // Return error code if there is no captcha
    }
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR-SECRET-KEY-HERE&amp;amp;response=" . $captcha);
    if ($response . success == false) {
        echo 'SPAM';
        http_response_code(401); // It's SPAM! RETURN SOME KIND OF ERROR
    } else {
       // Everything is ok and you can proceed by executing your login, signup, update etc scripts
    }

What just happened in this reCAPTCHA  using ajax implementation tutorial?

First of all take a look at the $response variable – we are constructing a link there and this link contains your private key. Now take a look at the last screenshot above – you can get this key by clicking on Step 2 – server side integration

We got the “captchaResponse” which was send via ajax to our PHP back end script. We made 2 checks – the first checks if the captcha response is not empty(just in case) – if it’s empty, then we do nothing. We also check if the response is true, or false. If it’s false it means that we are probably dealing with a bot or a spammer.

If you did everything as described in the tutorial you have a working reCAPTCHA  using ajax and php!

You also can also easily implement it in this simple PHP ajax signup form.

Article publié pour la première fois le 09/04/2015

TAGS: , , , ,

Leave a Reply

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

Design Racy
DesignRacy is an online design blog focussing on design, web development, wordpress and photoshop.

For the latest articles, subscribe to our feed and like us on Facebok.



Copyright 2015 - DesignRacy.com

Recent Posts

daily November 2, 2019, Comments Off on daily
designblog November 2, 2019, Comments Off on designblog
Shares

WAIT BEFORE YOU GO
GET FREE THEMES AND DESIGN

SUBSCRIBE TO OUR MAILING LIST AND GET NOTIFIED EVERY MONTH WHEN NEW FREEBIES AND TUTORIALS BECOME AVAILABLE.