How To Implement Google Recaptcha v3 in Angular

While using any web application, when user creates a new account, post a comment on some website or buy something, came across different type of captcha like this:

What is reCaptcha ?

CAPTCHA stands for the Completely Automated Public Turing test to tell Computers and Humans Apart.

Introducing reCAPTCHA v3

The 3rd version of Google’s reCAPTCHA was recently released. It does not have a user interface, also it is completely invisible. It helps us detect abusive traffic on our website. Instead of showing a CAPTCHA challenge, reCAPTCHA v3 returns a score so we can choose the most appropriate action for our website.

Implementation in Angular

Step-1: Register Google reCaptcha

Visit this link https://www.google.com/recaptcha/admin/create and register a new site like this:

register v3 key
register v3 key

Step-2: Load the JavaScript API with your sitekey.

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

Ste — 3: Install angular-recaptcha3 via npm

In your project add angular-recaptcha3 via command npm i angular-recaptcha3 — save

Step-4: Import ReCaptchaModule

Add ReCaptchaModule either in the app module or any specific module where you want to use this feature (register/login). In the forRoot() method mention the RECAPTCHA_OPTION. To know more about different options visit this link.

import { ReCaptchaModule } from 'angular-recaptcha3';

@NgModule({
imports: [
ReCaptchaModule.forRoot(RECAPTCHA_OPTION)
]
})
const RECAPTCHA_OPTION = {
language?: string;
invisible?: IRecaptchaOption;
normal?: IRecaptchaOption;
}

interface IRecaptchaOption {
sitekey: string;
theme?: string;
type?: string;
tabindex?: number;
badge?: string;
}
import { ReCaptchaModule } from 'angular-recaptcha3';

@NgModule({
imports: [
ReCaptchaModule.forRoot({
invisible: {
sitekey: 'your key',
},
normal: {
sitekey: 'your key',
},
language: 'en'
}),
]
})

Step-5: Insert the recaptcha in the template to initialize it

Recaptcha has different parameters, you can add according to your need: hide, sitekey, size, theme, type, tabindex, badge, language.

<recaptcha 
[size]="'invisible'"
[hide]="false"
(captchaResponse)="onCaptchaResponse($event)">
</recaptcha>

Step-6: Get the response token & perform action

a. Now either you can implement method onCaptchaResponse() mentioned above to get the response token or you can call recaptchaService.execute()

import { ReCaptchaService } from 'angular-recaptcha3';constructor(private recaptchaService: ReCaptchaService) { }login() {
this.recaptchaService.execute({action: ‘login’}).then(token => {
// Backend verification method
this.sendTokenToBackend(token);
});
}

Step-7: Now recaptcha is activated !

Step-8: Verify recaptcha token on backend side

In backend code, we need to call this API to verify the response.
URL: https://www.google.com/recaptcha/api/siteverify
METHOD: POST

  • If not, return error.

References:

Sr. Software Engineer @Synerzip Softech India Pvt Ltd