DEV Community

loading...
Cover image for Angular : How to add reCAPTCHA feature in your angular app just in 5 minutes?

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

RajeshKumarYadav.com
I am Rajesh, a Technology Specialist by profession and a Technical Blogger by passion. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.
Originally published at developersdiscussion.com Updated on ・1 min read

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.

Discussion (0)