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.
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.