Google Invisible Re-Captcha In 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">
<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>
</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.

6 Comments

Join the conversation! Your thoughts help the community grow.

Former member6y ago
Amigo tengo un problema especifico.
Ankush Agnihotri7y ago
[email protected]
Anamika Bala8y ago
Ankush please could you give your email id. I have a specific problem.
- Ankush Agnihotri8y ago
  [email protected]
Rajkumar Chandrasekar8y ago
I am receiving the The bind parameter must be an element or id error while trying to bind to my submit button as given in the example. any clue on why it happens
Arvind More9y ago
Thanks its simple...