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.

reCAPTCHA is a free service that protects a site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots 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:

Here we have to add a label of your choice, have to select reCAPTCHA v3, specify a domain. If you wanna try locally, add localhost domain. Accept terms & conditions and click on ‘Submit’ button.

We will get a secret key and site key. The site key is what we need to implement google recaptcha v3 in the frontend. And a secret key (keep it secret). This will be used for g-recaptcha’s frontend response verification on our backend.

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.

Syntax:

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;
}

Example: I have added this in login module of my project. Added basic recaptcha options, you can modify them as above.

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()

b. If you are implementing some button click, example login form’s submit button then you can call the service’s execute() method to get token.

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 success true we can assume that the user is not a robot, and process whole request
• If not, return error.

In this way we can implement v3 of reCaptcha in Angular app.
Thanks for reading :)

References:

• https://developers.google.com/recaptcha/docs/v3
• https://www.npmjs.com/package/angular-recaptcha3