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

[admin]

Live Demo - https://rajeshkumaryadav.com/#/auth

Step 1 - Install dependancy

Code: Select all

npm i ng-recaptcha --save

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

Code: Select all

import { RecaptchaModule } from 'ng-recaptcha';

Also add this to imports -

Code: Select all

imports: [
    RecaptchaModule,
  ],

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

Code: Select all

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

yourcomponentname.component.ts

Code: Select all

 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.