Step By Step Guide To Integrate Google ReCAPTCHA 2.0 In Your Website

2 min read

google reCAPTCHA 2.0 is one of the best ways to keep bad bots away from spamming your website.

If you have used google reCAPTCHA 1.0 by google then you must know have the idea about how difficult it was for the users but with Google made it very user-friendly. The User fills the form and click/tap on the checkbox in google reCAPTCHA 2.0 and done. There will be sometimes when it will be a little difficult to pass google reCAPTCHA because Google wants to make sure no bad bot bypasses reCAPTCHA 2.0 and spam your website.

This article is intended for developers, who are familiar with HTML (client side) and PHP (server-side), if you aren’t familiar then please study a bit first then only this tutorial will make sense. At the end of this Google reCaptcha 2.0 tutorial, you will learn to How to add reCaptcha to your site.

Note :- This article is also helpful if you want to Upgrade google reCaptcha v1.0 to google reCaptcha v2.0.

 

Getting API keys for Google reCAPTCHA 2.0

First thing first. You will need a Google reCAPTCHA Site Key and a Google reCAPTCHA  Secret key to implement google reCAPTCHA 2.0 in your website. To obtain Google reCAPTCHA 2.0 API keys, you need to sign up on http://www.google.com/recaptcha/admin.

Once you sign up then you will see “Register a new site” section just like on the left image.

You can put anything on the label field as it is just for your notes. I prefer using  “website name – page name” (e.g. Paper Pencil Write-Up – Contact Page) combination, which makes my work easier because I have many keys on Google reCAPTCHA API keys.

Just after Label, there is a field labelled “domains”. You can list more than 1 domain (one per line) without HTTP(s):// also keep on mind domain should end with TLD ( .com, org, .net)  for example – paperpencilwriteup.com/contact.php would be invalid and correct domain would be – paperpencilwriteup.com.

If you want to use google reCAPTCHA in your localhost (xampp, wampp), then you can use the key from any domain as all API keys work on localhost (127.0.0.1).

At the left bottom, you will find a checkbox. You can check that if you (website owner) want google to send you a report when Google finds something suspicious on your website.

Hit the register button once you fill all the required details and you will be redirected to the next page, which will have API keys and some other useful information. Keep this page open for a while as we will need to copy some elements from this page.

 

Integreating google reCAPTCHA 2.0 in HTML form

Now paste the javascript from step 1 before the closing </head> tag on your website:

<script src='https://www.google.com/recaptcha/api.js'></script>

Now copy the entire div from the API key information page and paste it inside form tag just above the submit button:

<div class="g-recaptcha" data-sitekey="your key"></div>

Now open the page and you will see the google reCAPTCHA on your HTML form, just like I have in form.

In case you don’t see the captcha then make sure you don’t have any error(s) on your console and you have used correct key for the website (domain).

And if you see the Google reCAPTCHA then congratulations! you are half way there.

Verify user response with Google reCAPTCHA 2.0

There are 3 ways to verify google reCAPTCHA 2.0, but we will be using PHP in this Google reCaptcha tutorial. You have to download reCAPTCHA PHP Library.

Unzip the file, copy the src folder and paste it on your website application.

Now paste the below code at the top of your file (which contains form) and replace the API keys
(do not share your Google reCAPTCHA secret key)

 

Show the error (if any) below google reCAPTCHA 2.0

just below reCAPTCHA div paste following code:

And we are done.

Hope you find this article useful and don’t forget to like, share and comment.

You can also Hire me to integrate Google reCAPTCHA 2.0 on your website for just  $25/website  (for a very limited time)Leave me an email and I will get back to you – hello @ hiteshchandwani.com 

You can also Hire me for any website development related task or project. I have a total of 6 years of experience developing PHP websites.

Don’t forget to subscribe as I am going post a new tutorial about Invisible reCaptcha.

This article was last updated on 20th April 2018

Hitesh Chandwani I am a Passionate Web Developer, Adventure Seeker, Hobbyist Blogger, Amazed by Tech, Party Lover, big Foodie and list goes on.
Hitesh Chandwani I am a Passionate Web Developer, Adventure Seeker, Hobbyist Blogger, Amazed by Tech, Party Lover, big Foodie and list goes on.