How To Implement Google reCAPTCHA V3 In Angular 8 Project

What is Google reCAPTCHA?

Google's reCAPTCHA is just a CAPTCHA system that protects your websites or applications from bots and spam. Google's reCAPTCHA can distinguish between an action made by humans and automated action. It's very easy to implement Google reCAPTCHA that's why it is widely used in application and websites which needs some kind of authentication to get protected from bots and spams. 

There is two version of Google reCAPTCHA :

• Google reCAPTCHA V2.
• Google reCAPTCHA V3.

We will implement Google reCAPTCHA V3 cause it's the latest, far more secured than  Google reCAPTCHA V2.

How Google reCAPTCHA V3 Works?

Google's reCAPTCHA v3 works behind the scenes to determine if the user is a bot or human. It analyzes your behaviour in the background while your scrolling, filling a form or doing something in the website, reCAPTCHA generates a score on user's behaviour and determines if the user is a human or bot.

To Implement Google reCAPTCHA V3 Easily we'll use ng-recaptcha.

ng-recapcha is an npm module which provides a component for implementing Google reCAPTCHA. It provides both Google reCAPTCHA V2 and V3. For this blog, we are implementing Google reCAPTCHA V3 so let's get started.

Prerequisite : 

• NodeJs Installed.
• Angular Installed.
• An Angular Project. ( If you don't have then create using this command on your terminal " ng new projectName ".
• An Google reCAPTCHA V3 enabled Site-key. ( You can get it from " https://www.google.com/recaptcha/admin/create " )

ng-recapcha installation and setup :

• Open your angular project and install ng-recapcha npm module using the following command.

• After successfully installation of ng-recapcha we need to initialize the ng-recapcha settings in the "app.module.ts". We need to import the "RecaptchaV3Module" from "ng-recaptcha" into the imports array. 
• We also need to provide the reCAPTCHA V3 service setting in the providers array, don't forget to add the site-key which you got from Google reCaptcha admin panel or while creating the Google reCAPTCHA V3 in place of  "<YOUR_SITE_KEY>".
• After following these steps your "app.module.ts" file should look something like this. 

import { BrowserModule } from "@angular/platform-browser";
import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from "ng-recaptcha";

import { MyApp } from "./app.component.ts";

@NgModule({
  bootstrap: [MyApp],
  declarations: [MyApp],
  imports: [BrowserModule, RecaptchaV3Module],
  providers: [{ provide: RECAPTCHA_V3_SITE_KEY, useValue: "<YOUR_SITE_KEY>" }],
})
export class MyAppModule {}

• Now move to your desired component or create a new component ( use " ng g c componentName " command for new component creation ) for using the reCaptcha V3 service from ng-recapcha.
• Now inject the "ReCaptchaV3Service" service from "ng-recapcha" into your constructor.

import { ReCaptchaV3Service } from 'ng-recaptcha';

@Component({
  selector: 'recaptcha-demo',
})
export class RecaptchaV3DemoComponent {
  constructor(
    private recaptchaV3Service: ReCaptchaV3Service,
  ) {}
}

• Now create a function you can use any name in my case I'm using "executeImportantAction()" inside this function, we need to subscribe to the "execute()" method of  "recaptchaV3Service" service.
• When we subscribe to "execute()" in the response, we get "token".
• Then we need to call the "executeImportantAction()" function so I'm using a button to call for the demonstration.
• Till now if you're following the steps then your component should look something like this.

import { ReCaptchaV3Service } from 'ng-recaptcha';

@Component({
  selector: 'recaptcha-demo',
  template: `
    <button (click)="executeImportantAction()">Important action</button>
  `,
})
export class RecaptchaV3DemoComponent {
  constructor(
    private recaptchaV3Service: ReCaptchaV3Service,
  ) {
  }

  public executeImportantAction(): void {
    this.recaptchaV3Service.execute('importantAction')
      .subscribe((token) => this.handleToken(token));
  }

  handleToken(token){
    // You can do whatever you want with this token 
    // Example can be used in login/signup
    // In my case i'm just loggin the token.
    console.log(token)
  }
}

• Now save everything and run your project by "ng serve -o" 
• You'll see "Protected by reCAPTCHA" in your angular project.

• As we are subscribing, so don't forget to unsubscribe the method.

So that's how we can implement the Google reCAPTCHA V3 in our Angular project.

Thanks.