Google Invisible Re-Captcha In ASP.NET C#

This blog imparts knowledge on Google Invisible Re-Captcha in an ASP.NET C#.

Invisible ReCaptcha V2

 

The new Invisible reCAPTCHA isn't validated before the specified button is clicked and once it is clicked; reCAPTCHA does its stuff and the user is flagged as being human or not; if they are human, then the associated JavaScript function is triggered.

 

Let's start with the development:

 

Step 1

Open the link mentioned below and click Get recaptcha button, as shown below.

 

Google Recaptcha Link - Google Recaptcha

 

 

 

Step 2

Create an ASPX page and design your form, as shown below.

 

Step 3

Add the mentioned CSS given below and JavaScript file to your head tag of the form 

<link rel="stylesheet" href="https://www.gstatic.com/recaptcha/api2/r20170329125654/demo__ltr.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<script src="https://www.google.com/recaptcha/api.js" async="async" defer="defer"></script>

Step 4

Add the mentioned div given below anywhere between form start and end tag. 

<div id="googleRecaptchadiv">
    <!-- BEGIN: ReCAPTCHA implementation example. -->
    <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="6LeLzA4UAAAAANNRnB8kePzikGgmZ53aWQiruo7O" data-callback="onSuccess" data-bind="recaptcha_demo_submit"></div>
    <script>
        var onSuccess = function(response) {
            debugger;
            var errorDivs = document.getElementsByClassName("recaptcha-error");
            if (errorDivs.length) {
                errorDivs[0].className = "";
            }
            var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
            if (errorMsgs.length) {
                errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
            }
            var clickButton = document.getElementById("<%= Button1.ClientID %>");
            clickButton.click();
        };
    </script>
    <!-- Optional noscript fallback. -->
    <!-- END: ReCAPTCHA implementation example. -->
</div>

Step 5

Now, run the project and you will able to see captcha when you hit Submit button, as mentioned below.


Step 6

Download the source from the attachment named as Google_Invisible_Recaptcha.zip.