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);
}
Ready to innovate ? Let's get in touch
Follow us
We are ISO 9001:2015 Certified
Resources
Connect with us
Follow us
