Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 ngx-captcha Example to Add Google reCAPTCHA Widget in Website Using TypeScript

Posted on January 25, 2023

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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.

 

 

 

 

 

Recent Posts

  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Video.js Video Player Plugin Library in Javascript For Playing Videos in Browser
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme