Java World Knowledge Sharing Portal: Gooogle recaptcha with Angular

This blog will explain to you how use the google recaptcha in angular project

First we need to create a site key and secrete key for that visit to below site

https://www.google.com/recaptcha/admin/create

Fill the data as per site url. As I am using local host i used 127.0.0.1 as localhost is not supported as name in the url by google for captcha.

Once the site key and secret key is created, store them properly as we are going to use that in our angular project.

Let's now create a simple Angular project using below command

ng new angular-google-captacha

Lets install ng-recaptcha that we can use in our created project

C:\vscode-angular-workspace\angular-google-captcha>npm i ng-recaptcha –save

and now change below files as follows:-

1- app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
import { RecaptchaModule } from 'ng-recaptcha';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RecaptchaModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2- app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  template: `<re-captcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></re-captcha>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-google-captcha';
  resolved(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }
}