Google has recently introduced a new update to their reCaptcha service called the Invisible reCaptcha. It’s based on the same technology as the previous version (the “no captcha reCaptcha”), but simplifies the process to remove even the checkbox step. The captcha functionality is now tied completely to the submit button.
We’ll split this article into three parts: Requesting the reCaptcha keys, Implementing the frontend, and Implementing the backend.
Requesting the reCaptcha keys
The first and easiest step to installing reCaptcha will be to request the public and private keys from the reCaptcha website. These are used as a unique site identifier, and also to prove that the real site owner is verifying their user’s identity.
Visit the reCaptcha website and click Get reCaptcha. Select Invisible reCAPTCHA from the radio box, enter your site’s domain(s) and hit register. You’ll now be given your personalized Site Key (public key) and Secret key (private key). Do not share your Secret Key with anybody, as otherwise they will be able to impersonate you.
Implementing the Frontend
To get started in the actual implementation, we’re first going to create a very simple HTML form named
Now let’s add some reCaptcha functionality. First you’ll need to link the reCaptcha API script in the tag.
This is used to do two things:
- Prevents the submit button from immediately navigating away when clicked
- Contacts Google with relevant user metrics to determine if they’re suspicious or not
In the previous version of reCaptcha, we would normally insert a new element above the submit button to be clicked. In the Invisible reCaptcha, we integrate directly with the submit button instead.
You’ll need to update the
data-sitekey field with your own key from Google. Site keys are unique but are not secret, so don’t worry that this is public facing.
At this point the reCaptcha library will be loaded and will prevent the submit button from being clicked. This is where the
This code first accepts an argument (here called
data) which carries the reCaptcha response data. You could add any client-side verification in at this point, but we’re simply going to submit the form.
Also note that
getElementById("contact") refers to the ID used by the form, so it must match your form’s ID. Ours is simply named “contact”.
With these changes, our frontend is fully functional. Once submit is clicked the script will send data to Google and then complete the form. All that’s left is visual changes and cleanup.
You might have noticed the reCaptcha badge in the lower right corner of the screen. This exists to let users know that a form is protected by reCaptcha now that the verification checkbox has been removed. It’s possible to hide this badge however by configuring it to be inline, and then modifying it with CSS.
Please note that because Google collects user information to enable reCaptcha functionality, their terms of service require you to alert users to its use. If you hide the badge you’ll want to add an informational paragraph somewhere on the page instead.
Finally, let’s prepare for the next step. Add an
action attribute to your form so we can send our results to the next page.
Now with the frontend code finished, let’s put it all together. Our completed
form.html page now looks like this:
Implementing the Backend
The backend is where we validate the user’s input, and decide which actions to take as a result.
We’ll start by creating a new file called
results.php. Note that the file extension should be .php, as it will require server-side code.
We’ve started with an empty template that simply thanks the user for submitting the form. Form data will be visible in the
$_POST variable, which we’ll use shortly.
Next up is processing the reCaptcha response to verify the user is human. We’ll start by setting up our variables.
$secret is your Secret Key from reCaptcha. As this is being entered on the server-side, this will be completely hidden from the user.
$remoteip is the user’s IP address. This is an optional field, though improves accuracy.
$url is the URL we need to query to receive our response from reCaptcha.
Next up is collecting and processing the form data.
$response will hold a reference to the user’s session, which is necessary for getting a proper response back.
Finally we have all the ingredients we need to query reCaptcha and verify the user’s humanity. For this purpose we’ll use a curl script.
$curlData has now captured the JSON response from reCaptcha. To make sense of this response, we’ll decode the JSON into an associative array.
Finally we can simply read the “success” property to receive our result.
Once again, let’s put it all together to see our (hopefully) working script.
Please note that this example doesn’t include error handling, such as if this page were accessed directly.
In this example we’re only printing “Success” or “Failure” based on the result of the captcha, but you can extend this to instead send an email, enable a user registration, or allow another action.
With all three pieces of the puzzle put together, we’re finished! You should now have a working implementation of Google’s Invisible reCaptcha on your form.
For more technical details or other questions, reCaptcha’s documentation can be found on Google’s Developer site.