Blog

Integrate Google ReCAPTCHA V2

Image

Google's ReCAPTCHA is a system designed to determine if a website user is human, thus preventing bots from exhibiting unwanted behavior on your website.

In this article, I’ll show you how to add google reCAPTCHA to form into your site. This tutorial will explain using a form example.

Registration for reCAPTCHA

Step #1

Get reCAPTCHA API key: Register your website at Google reCAPTCHA platform to get keys i.e. Site key and Secret key needed to code the HTML form.

Click Google reCAPTCHA dashboard to go to Google reCAPTCHA website.

Step #2

Select a reCAPTCHA type (example reCAPTCHA v2 ) and register your website name and fill all detail like email id. Please check below screenshot.

Now you will get your site key and secret key.

ReCAPTCHA Auto Rendering

<form id="form1" runat="server">
    <div class="g-recaptcha" data-sitekey="6Lfn8DoUAAAAAEuzI65jbXXNaewCS9BwO_XXXXXXXX"></div>
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>

This is the easiest way to render reCAPTCHA on a web page. As you can see in the code above, only two attributes (class and data-sitekey) are required. See how reCAPTCHA is displayed in the image below

These are the list of some optional attributes to customize the reCAPTCHA widget

  • data-type : You can use either audio or image. Image is the default type
<div data-type="image" >
<div data-type="audio" />
  • data-theme : you can use either light or dark theme. Light is the default theme.
<div data-theme="light" ></div>  
<div data-theme="dark" ></div> 
  • data-size : The size can be either normal or compact. Normal is the default size.
<div data-size="normal" />
<div data-size="compact"/>

ReCAPTCHA Integration in Website

Step #1

Create a new page and put the following code inside the body tag.

<form action="" id="formId">
    <div id="example1"></div>
    <br>  
    <input type="submit" value="getResponse">
</form>

Step #2

Add the reCAPTCHA API script on the page. Here we are going to render widget explicitly, so add onload and render parameters too with reCAPTCHA API script.

<script src=https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit async defer>

Step #3

Now add the following script for reCAPTCHA render and its validation or callback function

Add jQuery script

<script  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
var widgetId1;
var onloadCallback = function () {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('example1', {
        'sitekey': 'YOUR_SITE_KEY',
        'theme': 'light'
    });

};
jQuery('#formId').submit(function (e) {
    e.preventDefault();
    var message = 'Please checck the checkbox';
    if (typeof (grecaptcha) != 'undefined') {
        var response = grecaptcha.getResponse();
        (response.length === 0) ? (message = 'Captcha verification failed') : (message = 'Success!');
    }
    alert(message);
});

This is how you register google reCAPTCHA for our site and integrate reCAPTCHA widget with the web page, validate reCAPTCHA on the client side.