We support #BlackLivesMatters !
If you support us then follow us by clicking here and following us!

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

Get support on Angular & Typescript related technology.
Post Reply
admin
Site Admin
Posts: 44

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

Post by admin » Thu May 21, 2020 11:46 pm

Image

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.

Post Reply