Angular : How to add reCAPTCHA feature in your angular app just in 5 minutes?
Rajesh Kumar Yadav
Posted on June 3, 2021
Step 1 - Install dependency
npm i ng-recaptcha --save
Step -2 Open app.module.ts and add below import-
import { RecaptchaModule } from 'ng-recaptcha';
Also add this to imports -
imports: [RecaptchaModule,],
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>
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
}
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.
💖 💪 🙅 🚩
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.