Using scripts in angular 6 - recaptcha

Question

I am trying to implement recaptcha in my project, but I'm not sure how to use it.

I'm importing script in this way:

public loadScript() {
let body = <HTMLDivElement>document.body;
let script = document.createElement('script');
script.innerHTML = '';
script.src = 'https://www.google.com/recaptcha/api.js';
script.async = true;
script.defer = true;
body.appendChild(script);
}

Then I call this function in component constructor, and it works - recaptcha is properly rendered and works, but how to get response for my backend from it?

I tried grecaptcha.getResponse() but I get ReferenceError: "grecaptcha is not defined" - what is interesting not always. So how to make Typescript know what grecaptcha is?

Possible duplicate of [How can I validate google reCAPTCHA v2 using javascript/jQuery?](https://stackoverflow.com/questions/27902539/how-can-i-validate-google-recaptcha-v2-using-javascript-jquery) — Ferus7, Aug 01 '18 at 12:49
Not really a solution to the problem, but wouldn't it be better to use a library like [ng-recaptcha](https://github.com/DethAriel/ng-recaptcha) to avoid hacking around in the DOM yourself to get recaptcha? — Capricorn, Aug 01 '18 at 15:03

score 5 · Answer 1 · answered Sep 07 '18 at 13:18

To Use Google reCAPTCHA v3 in Angular 4,5,6 follow the simple steps

Register For the public key on Google official Recaptcha website

Now Add following script file in your angular project index.html

    <script src='https://www.google.com/recaptcha/api.js'></script>

Then add the following tag in your Component file where you want to use Captcha

<div class="form-group">
    <div id="captcha_element" class="g-recaptcha" 
     [attr.data-sitekey]="siteKeyCaptcha"></div>
</div>

Now update your Typescript file with the following code.

declare var grecaptcha: any;

//declare Varible with public key given by Google
siteKeyCaptcha: string = "6LdF6xxxxxxxxxxxxxxxxxxxxxxxxxxxWVT";

//when we route back from the page we have to render captcha again
grecaptcha.render('capcha_element', {
  'sitekey': this.siteKeyCaptcha
});

To get a Response from Captcha on click add call back event as follows in HTML

**HTML**
<div class="form-group">
   <div id="capcha_element" class="g-recaptcha" 
   data-callback="getResponceCapcha" [attr.data-sitekey]="siteKeyCaptcha"></div>
</div>

**Typescript**
ngOnInit() {
  //....rest of code....
  window['getResponceCapcha'] = this.getResponceCapcha.bind(this);
}

getResponceCapcha(captchaResponse: string) {
   this.verifyCaptcha(captchaResponse);
}

verifyCaptcha(captchaResponse: string) {
  //you can do HTTP call from here
}

Click here for example and here for code

Using scripts in angular 6 - recaptcha

1 Answers1