How To Implement Google Recaptcha v3 in Angular

What is reCaptcha ?

Introducing reCAPTCHA v3

Implementation in Angular

Step-1: Register Google reCaptcha

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

Step-4: Import ReCaptchaModule

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 
[size]="'invisible'"
[hide]="false"
(captchaResponse)="onCaptchaResponse($event)">
</recaptcha>

Step-6: Get the response token & perform action

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

  • If success true we can assume that the user is not a robot, and process whole request
  • If not, return error.

References:

--

--

--

JS | Angular | React | PWA

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Inventing Games. Game Loop in JavaScript.

React 17.0 — The news is that there is no news

TypeScript: JavaScript’s More Responsible Cousin

Build and Host Your NextJS Static Blog for Free

Ruby on Rails - Front-end tools (part deux)

ACA Blog Post 406

Javascript Do you know the Symbol type?

CORS in NextJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anjali Tanpure

Anjali Tanpure

JS | Angular | React | PWA

More from Medium

Integration of Bootstrap UI Framework in the Angular Application

Is Angular Easy To Learn?

Angular vs. Vue: Suitable Front End Framework in 2022

How to open a new browser tab with Angular