DEV Community

Cover image for Angular : How to add reCAPTCHA feature in your angular app just in 5 minutes?
Rajesh Kumar Yadav
Rajesh Kumar Yadav Subscriber

Posted on • Edited on • Originally published at developersdiscussion.com

4

Angular : How to add reCAPTCHA feature in your angular app just in 5 minutes?

Step 1 - Install dependency

npm i ng-recaptcha --save
Enter fullscreen mode Exit fullscreen mode

Step -2 Open app.module.ts and add below import-

import { RecaptchaModule } from 'ng-recaptcha';
Enter fullscreen mode Exit fullscreen mode

Also add this to imports -

imports: [RecaptchaModule,],
Enter fullscreen mode Exit fullscreen mode

Step 3 - Open that component where you want to add human verification reCAPTCHA and then add below code -

yourcomponentname.component.html

 <re-captcha (resolved)="resolved($event)" siteKey="6LcOuyYTAAAAAHTjFuqhA52fmfJ_j5iFk5PsfXaU" ></re-captcha>
Enter fullscreen mode Exit fullscreen mode

yourcomponentname.component.ts

public resolved(captchaResponse: string) { 
console.log(`Resolved captcha with response: ${captchaResponse}`); // Write your logic here about once human verified what action you want to perform 
}
Enter fullscreen mode Exit fullscreen mode

Step 5 - This siteKey will work on localhost, you must have to generate your own siteKey, for this please visit google.com/recaptcha and add your domain and generate key, it's very simple and then replace the new key to markup of step3.

All done.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!