How to Integrate Google reCAPTCHA

How to Integrate Google reCAPTCHA

Today, every website is preferring to integrate Google reCAPTCHA. So, we are going to learn that how someone can integrate Google reCAPTCHA in his/her website. We know that the old captcha style, definitely, irritates the users and it creates frustration also. These are absolutely useless against spams. Captcha inputs are often unreadable and unclear as you can see in the image below.

captcha-old

These were the some basic reasons that intended the Google to develop a system which will have more flexibility and more security. So, Google introduced the No CAPTCHA reCAPTCH A. Now, it protects your website from spams and robots. It has advanced security and is more user friendly.

What is actually No CAPTCHA reCAPTCHA?

It is so simple to use. It needs only a mouse click or pressing the spacebar or just focus on that input filed with keyboard. If Google feels that you are not human, it will give the second prompt and it will ask you to fill the captcha.

Now, the question is that how can we use it? Please follow me to end of this article.

Integrate Google reCAPTCHA

What should you already have?

Integrate Google reCAPTCHA you need followings.

  1. A Gmail account. If not, please create it for you.
  2. Basic Knowledge of HTML ,JavaScript and also PHP

Step 1:

Now visit this link https://www.google.com/recaptcha/admin and get the API key

get-recaptcha-keys.jpg

Step 2:

In this step , you will have the two keys.

recaptcha-keys

Step 3:

Underneath these keys, there are some scripts that will be added to the client side. You can also define the language for reCaptcha. English language is default. Add the script line at footer or just below the form.

just below the form

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

With language option

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

Step 4:

Now, add this line in your form where you want the recaptcha’

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

The data-sitekey is key of your own site-key which is generated by Google for you.

For further details visit developers.google.com

The complete form is here

To ensure that reCAPTCHA is working properly, we will run some server-side checks. Save this file as index.php
Lucikeky, Google developers have done a much work for us in reCaptcha. So, include this file recaptchalib in your index.php. We will creae some variable to use this librry in our site. These variables are
Finally, our index.php will have a look like this