Implementing Google reCAPTCHA v3 In Angular 14

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReCaptchaService } from './re-captcha.service';
import { HttpClientModule } from '@angular/common/http';
import { RecaptchaV3Module, RECAPTCHA_V3_SITE_KEY } from 'ng-recaptcha';
import { environment } from 'src/environments/environment';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        RecaptchaV3Module
    ],
    providers: [{
        provide: RECAPTCHA_V3_SITE_KEY,
        useValue: environment.recaptcha.siteKey,
    }, ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Create a Model class

Now create a model class UserRegistrationModel.ts with below fields

export interface UserRegistrationModel {
    UserName: string;
    UserEmailId: string;
    password: string;
    confirmPassword: string;
}

Now open the app.component.html file and place the below code

 <title>Google reCPATCHA Implementation</title>
 <title>Google reCPATCHA Implementation</title>
 <!-- main app container -->
 <div class="card m-3">
   <h5 class="card-header">User Registration</h5>
   <div class="card-body">
     <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
       <div class="form-row">
         <div class="form-group col-5">
           <label>User Name</label>
           <input type="text" formControlName="UserName" class="form-control" />
         </div>
         <div class="form-group col-5">
           <label>User Email Address</label>
           <input type="text" formControlName="UserEmailId" class="form-control" />
         </div>
       </div>
       <div class="form-row">
         <div class="form-group col">
           <label>Password</label>
           <input type="password" formControlName="password" class="form-control" />
         </div>
         <div class="form-group col">
           <label>Confirm Password</label>
           <input type="password" formControlName="confirmPassword" class="form-control" />
         </div>
       </div>
       <div class="text-center">
         <button class="btn btn-primary mr-1">Register</button>
       </div>
       <div *ngIf="tokenVisible"> reCAPTCHA Token <br />
         <p style="color: red">{{reCAPTCHAToken}}</p>
       </div>
     </form>
   </div>
 </div>

Open the app.component.ts file and put the below code

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ReCaptchaV3Service } from 'ng-recaptcha';
import { UserRegistrationModel} from '../app/Model/UserRegistrationModel'
import { ReCaptchaService } from './re-captcha.service';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'Angular14App';
    registerForm!: FormGroup;
    submitted = false;
    reCAPTCHAToken: string = "";
    tokenVisible: boolean = false;
    registrationInfo!: UserRegistrationModel;
    constructor(private formBuilder: FormBuilder, private recaptchaV3Service: ReCaptchaV3Service) {}
    ngOnInit() {
        this.registerForm = new FormGroup({
            UserName: new FormControl(),
            UserEmailId: new FormControl(),
            password: new FormControl(),
            confirmPassword: new FormControl(),
        })
    }
    onSubmit() {
        this.recaptchaV3Service.execute('importantAction').subscribe((token: string) => {
            this.tokenVisible = true;
            this.reCAPTCHAToken = `Token [${token}] generated`;
        });
    }
}

Now run your application, and navigate to http://localhost:4200/, you will see the below page

You will see on the right google reCAPTCHA icon, and it is activated on site

Now give some input to textbox and click on register, and your token is generated. If we get the token means, the button is not clicked by the bot and it is a valid user.