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 
  1. <link rel="stylesheet" href="https://www.gstatic.com/recaptcha/api2/r20170329125654/demo__ltr.css" type="text/css" />  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />  
  3. <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. 
  1. <div id="googleRecaptchadiv">  
  2.     <!-- BEGIN: ReCAPTCHA implementation example. -->  
  3.     <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="6LeLzA4UAAAAANNRnB8kePzikGgmZ53aWQiruo7O" data-callback="onSuccess" data-bind="recaptcha_demo_submit"></div>  
  4.     <script>  
  5.         var onSuccess = function(response) {  
  6.             debugger;  
  7.             var errorDivs = document.getElementsByClassName("recaptcha-error");  
  8.             if (errorDivs.length) {  
  9.                 errorDivs[0].className = "";  
  10.             }  
  11.             var errorMsgs = document.getElementsByClassName("recaptcha-error-message");  
  12.             if (errorMsgs.length) {  
  13.                 errorMsgs[0].parentNode.removeChild(errorMsgs[0]);  
  14.             }  
  15.             var clickButton = document.getElementById("<%= Button1.ClientID %>");  
  16.             clickButton.click();  
  17.         };  
  18.     </script>  
  19.     <!-- Optional noscript fallback. -->  
  20.     <!-- END: ReCAPTCHA implementation example. -->  
  21. </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.
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now