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

rajeshkumaryadavdotcom

Rajesh Kumar Yadav

Posted on June 3, 2021

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.

💖 💪 🙅 🚩
rajeshkumaryadavdotcom
Rajesh Kumar Yadav

Posted on June 3, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related