How to add reCAPTCHA in angular 2 application?

Question

How to Integrate reCAPTCHA in your Angular 2 Application?

Please show us what you have tried before, this is not a "we do that for you" site, we help you fixing errors that occur during your try. — Marvin Fischer
– Marvin Fischer, Commented Feb 21, 2018 at 9:50
I don't need an answer. I have posted the answer myself to share it with others. — ruchit
– ruchit, Commented Feb 21, 2018 at 10:20

ruchit · Accepted Answer · 2018-02-21 09:47:02Z

7

Assuming that you have Site Key and Client Secret given by reCAPTCHA. Put below code in component.

@ViewChild('captchaRef2') captchaRef2: ElementRef;
private _reCaptchaId: number;
private SITE_ID = [YourSiteKey];

ngAfterViewInit() {
    const grecaptcha = (window as any).grecaptcha;
    if (grecaptcha) {
      this._reCaptchaId = grecaptcha.render(this.captchaRef2.nativeElement, {
        'sitekey': this.SITE_ID,
        'callback': (resonse) => this.reCapchaSuccess(resonse),
        'expired-callback': () => this.reCapchaExpired()
      });
    }
}

Below is the Success callback function. If the response data has value then reCAPTCHA verified successfully.

reCapchaSuccess(data:any){
    if(data){
      alert("Congratulation! reCAPTCHA verified.")
      // Some logic goes here
    }
  }

Below function will be called when reCAPTCHA expired.

reCapchaExpired(){
    alert("Oops! reCAPTCHA expired.")
    // Some logic goes here
  }

Put below div in the HTML file.

<div #captchaRef2></div>

Put below JS script in index.html file.

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

answered Feb 21, 2018 at 9:47

ruchit

2302 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

senyor Over a year ago

With Angular 8 @ViewChild asks for 2 parameters. I've provided null as the second one and it worked.

Faraz Ahmed · Accepted Answer · 2019-08-02 16:41:42Z

0

By putting above js script, sometimes I face below error: "grecaptcha.render is not a function" so, in case you face this error just use following js script instead of above

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

cheers!

answered Aug 2, 2019 at 16:41

Faraz Ahmed

711 silver badge5 bronze badges

Comments

Daniel Danielecki · Accepted Answer · 2020-11-12 17:59:39Z

0

Why overcomplicating that much if ng-recaptcha exists?

yarn add ng-recaptcha or npm i ng-recaptcha --save
In one of your modules (such as app.module.ts, shared.module.ts, etc.)

(like explained here)

import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';

@NgModule({
  imports: [RecaptchaModule],
  providers: [
    {
      provide: RECAPTCHA_SETTINGS,
      useValue: { siteKey: '<YOUR_KEY>' } as RecaptchaSettings,
    },
  ],
}) export class MyModule { }

Use it in your html as <re-captcha>

edited Nov 12, 2020 at 17:59

answered Nov 11, 2020 at 18:47

Daniel Danielecki

10.9k7 gold badges89 silver badges111 bronze badges

Collectives™ on Stack Overflow

How to add reCAPTCHA in angular 2 application?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related