How To Implement reCaptcha In Angular.

In this article we are going to learn how to implement reCaptcha v2 in angular.


Step1: Create new Application

ng new recapcha-angular


Step2: Install node-modules



Step3: install ReCaptcha

yarn add ng-recaptcha


Step4: In app.modules.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RecaptchaModule } from 'ng-recaptcha';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


Step5: in app.component.ts

import { Component ,ElementRef,ViewChild,Inject,VERSION} from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RecaptchaComponent,RecaptchaErrorParameters } from 'ng-recaptcha';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

export class AppComponent {
  version = VERSION.full;
  lang = 'en';
  FormGroup: FormGroup|any;
  @ViewChild('captchaElem') captchaElem: RecaptchaComponent | any;
  @ViewChild('langInput') langInput: ElementRef|any;
  recComp: RecaptchaComponent|any;

  constructor(private formBuilder: FormBuilder){}

    ngOnInit() {
      this.FormGroup ={
        recaptcha: ['', Validators.required]

    public getToken(captchaResponse: string): void {
      console.log(`Resolved captcha with response:' captchaResponse);
    public onError(errorDetails: RecaptchaErrorParameters): void {
      console.log(`Recaptcha error encountered; details:`, errorDetails);


Step6: in app.component.html



Step7: Generate Your secret key on this link


Step8: Now Run Your project and check Your Output


your project output look like this.


Step9: Now you need to verify that google token is valid or not by below API.

In, secret- write your secret key,

Response - write your token


Step10:Your Output Look like this

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories