How To Implement Google Invisible reCaptcha

Posted By :Ajay Kumar |24th December 2020

What is reCaptcha

 

Basically, the purpose of using recaptcha is to enhance the security feature for any online application/website. Earlier version of reCatcha requires manual verification that they are human. Sometimes it is time consuming for the users and challenging for people with certain disabilities.

By using Google Invisible reCaptcha ,user can get advanced security that too hassle free.It stops misusing your form from spambots.

There are two way to invoke invisible reCapthca:

Firstly, we need to add a few attributes (g-recaptcha and data-sitekey)in html button and necessary javascript resources( data-callback).

  • Automatically bind the challenge to a button

Step 1 : Include javascript resources

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Step 2: Add attribute in html

<html>
<head>
<title>reCAPTCHA demo</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <script>
 function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</head>
<body>
 <form id='demo-form' action="?" method="POST">
 <button class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'>Submit</button>

</form>
</body>
</html>
  • Programatically invoke

step1:-Create a div with data-size='invisible'.


<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

step2:-Call grecaptcha.execute from a javascript method.

grecaptcha.execute();
  
Call from ts file ,make onSumbit globally and get token :-

window['onSubmit]=(token)=>{

this.signup(token);

}

 


About Author

Ajay Kumar

Ajay Kumar is a frontend developer. He is good in Web Designing and working on HTML5, CSS3, JS, Angular9+, Ionic technologies. In his free time, he loves to travel

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Chat With Us