Welcome folks today in this blog post we will be using the ngx-captcha
library to add Google reCAPTCHA
widget in website using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command
ng new sampleapp
cd sampleapp
And after that you need to install the below library using the npm
command as shown below
npm i ngx-captcha
And after that you will see the below directory
structure of the angular app as shown below
And now you need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgxCaptchaModule } from 'ngx-captcha'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, NgxCaptchaModule, ReactiveFormsModule], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
As you can see we are importing the ngx-captcha
library and then adding the captcha
module inside the imports
array as shown above.
Now you need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 |
<form [formGroup]="aFormGroup"> <ngx-recaptcha2 #captchaElem siteKey="##replaceyoursitekey##" (success)="handleSuccess($event)" [size]="size" [hl]="lang" [theme]="theme" [type]="type" formControlName="recaptcha"> </ngx-recaptcha2> </form> |
As you can see we have the captcha
widget that we are displaying inside the simple html5 form
and here you need to replace your site key
that you will get inside the google recaptcha
dashboard as shown below
And now you need to go to app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import { Component, OnInit,ElementRef, ViewChild} from '@angular/core'; import { FormGroup, FormBuilder, Validators} from '@angular/forms'; import { ReCaptcha2Component } from 'ngx-captcha'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) // to use captch in angular you have to install ngx-captcha packahe // documentation https://www.npmjs.com/package/ngx-captcha export class AppComponent implements OnInit { protected aFormGroup: FormGroup; @ViewChild('captchaElem') captchaElem: ReCaptcha2Component; @ViewChild('langInput') langInput: ElementRef; public captchaIsLoaded = false; public captchaSuccess = false; public captchaIsExpired = false; public captchaResponse?: string; public theme: 'light' | 'dark' = 'light'; public size: 'compact' | 'normal' = 'normal'; public lang = 'en'; public type: 'image' | 'audio'; constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.aFormGroup = this.formBuilder.group({ recaptcha: ['', Validators.required] }); } // reset(): void { // this.captchaElem.resetCaptcha(); // } handleSuccess(data) { console.log(data); } } |
As you can see we are importing the ngx-captcha
library and then we can have image
and audio
captcha’s as well. And also we are also attaching the recaptcha
validators inside the ngOnInit()
method.