How to implement reCaptcha in an angular application

Posted By : Puneet Kumar | 30-Oct-2018

How to implement reCAPTCHA in an angular application.

reCAPTCHA (Completely automated public Turing test to tell computers and humans apart), better known as reCAPTCHA, is a test to ensure responses through a human versus a computer program.

Followings are the steps given below:-

1. The easiest way is to install through npm:

Command:- npm i ng-recaptcha --save

2.Add google Recaptcha library in index.html file in <head> tag.

3.Import Recaptcha Module.

import { RecaptchaModule } from 'ng-recaptcha';
// if you need forms support:
// import { RecaptchaFormsModule } from 'ng-recaptcha/forms';
import { BrowserModule }  from '@angular/platform-browser';
import { MyApp } from './app.component.ts';


@NgModule({
  bootstrap: [MyApp],
  declarations: [MyApp],
  imports: [
    BrowserModule,
    RecaptchaModule,

    //RecaptchaFormsModule, // for forms support
  ],
})


export class MyAppModule { }

Once you completely import captcha, add <re-captcha> tag in html file and add callback function for recaptcha functionality.

(ii). In app.component.html file add re-captcha tag in the form tag.

You will also need to invoke the "onCaptchaResponse($event)" method manually.when you hit on recaptcha checkbox a callback function is hit api for getting response, if you getting true response you will able to logIn successfully otherwise on getting false recaptcha will popup open again.

(iii). In app.component.ts file import reCAPTCHA component and function.

import { ReCaptchaComponent } from 'angular2-recaptcha';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class LoginComponent {
    public isCaptchaValidated: boolean = false; //for self loading

    @ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;
}

Loading the reCAPTCHA API by yourself.

onCaptchaResponse(event){
         this.isCaptchaValidated = true;
       }
     }

For server sie reCAPTCHA API Integration.

onCaptchaResponse(event){
       if(event){
        this.coreService.onCaptchaResponse({secret: '6Lflc3UUAAAAAG9JUTL5Fsqp_zqPPwV6ntJOLWHb', response: event.response}).then(response => {
        if (response && response.success) {
           }
        }, errorData => {
       })
      }
    }

Add a function in service file

(iii). In app.service.ts

onCaptchaResponse(data){
        return this.Service.sendPostRequest({}, this.captchaUrl.replace("[secret]", data.secret).replace("[response]", data.response)).then(response => {
            return response;
        }).catch((err) => {
        });

Purpose :-

The purpose of CAPTCHA is to distinguish between a machine and a human being. As a machine or robot can be used for filling forms with random data but an image or audio to be entered cannot be done by a robot or machine and hence a human being only can do it. The step that makes you prove that you are a human is primarily a CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart). Initially, a CAPTCHA formed of image or audio for verification. But there would a recent change in CAPTCHA verification vector which just requires a user to click on a checkbox to verify himself/herself as a human being.

Conclusion :-

Captcha's are must to protect your website from spam messages but sometimes they can shoo the actual users, Google’s new reCaptcha makes it’s much easier for humans to pass, at the same time producing it more difficult for bots. Also, the reCaptcha widget looks cool as compared to the older version, plus the integration is very very easy.

Thanks