Install ng-recaptcha module and import it into the app.module.ts
npm i ng-recaptcha --save
Login to you google account here and register for an Invisible reCAPTCHA and get the client side key and add it to the siteKey field below.
app.module.ts
import {NgModule} from '@angular/core'; import { RECAPTCHA_SETTINGS, RecaptchaSettings, RecaptchaLoaderService, RecaptchaModule, } from 'ng-recaptcha'; const globalSettings: RecaptchaSettings = {siteKey: 'sitekey here'}; @NgModule({ declarations: [], imports: [ RecaptchaModule.forRoot() ], providers: [ { provide: RECAPTCHA_SETTINGS, useValue: globalSettings, } ] }) export class AppModule { }
home.component.html
<form> <label for="email">Email:</label> <input [(ngModel)]="email" type="email" name="email" id="email" autocomplete="on" /> <re-captcha #captchaRef="reCaptcha" (resolved)="resolved($event)" size="invisible"></re-captcha> <button (click)="onLoginClick(captchaRef)">Submit</button> </form>
home.component.ts
... recaptchaStr = ''; onLoginSubmit(): void { } onLoginClick(captchaRef: any): void { if (this.recaptchaStr) { captchaRef.reset(); } captchaRef.execute(); } public resolved(captchaResponse: string): void { this.recaptchaStr = captchaResponse; if (this.recaptchaStr) { this.onLoginSubmit(); } } ...
Read this to implement the server side part of the code.