Angular PrimeNG Captcha Component
Last Updated :
14 Nov, 2022
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we are going to learn Angular PrimeNG Captcha Component.
The Captcha component verifies the forms and checks if the bot is submitting a form or a user.
Angular PrimeNG Captcha Component Properties:
- sitekey(string): It is the public site key.
- theme(string): It is the color scheme of the widget. The default value is light.
- type(string): It is the type of CAPTCHA to serve. The default value is an image.
- size(string): It is the size of the widget. The default value is normal.
- tabindex(number): It is the tab index of the widget and challenge. The default value is 0.
- language(string): It is used to set the language of the widget. The default value is en.
- initCallback(string): It is the name of the global callback to initialize Recaptcha.
Events:
- onResponse: It is a callback when a user submits the captcha.
- onExpire: It is a callback when the captcha expires.
Methods:
- reset: It resets the captcha.
- getResponse: It gets the response for the reCAPTCHA widget.
Syntax:
<p-captcha
siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
(onResponse)="showResponse($event)"
initCallback="onloadCallback"
></p-captcha>
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new geeks_angular
Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure:
Example 1: In the following example, we have a simple captcha.
HTML
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Captcha Component</h3>
<div class="card">
<p-toast></p-toast>
<p-captcha siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
(onResponse)="showResponse($event)"
initCallback="onloadCallback">
</p-captcha>
</div>
|
Javascript
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService],
})
export class AppComponent {
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) { }
ngOnInit() {
this.primengConfig.ripple = true;
}
showResponse(event) {
this.messageService.add({
severity: 'info',
summary: 'Succees',
detail: 'User Responded',
sticky: true,
});
}
}
|
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
import { CaptchaModule } from 'primeng/captcha';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastModule,
ButtonModule,
RippleModule,
FormsModule,
CaptchaModule,
ImageModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<base href="/" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css"
href="/node_modules/primeicons/primeicons.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
<script>
const onloadCallback = function () {
console.log('reCAPTCHA has loaded!');
grecaptcha.reset();
};
</script>
<script async src=
</script>
</body>
</html>
|
Output:
Example 2: In the following example, we have a captcha of a dark theme and of compact size.
HTML
<h1 style="color: green; text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Captcha Component</h3>
<div class="card">
<p-toast></p-toast>
<p-captcha siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
(onResponse)="showResponse($event)"
initCallback="onloadCallback">
</p-captcha>
<br />
<p-captcha siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
(onResponse)="showResponse($event)"
initCallback="onloadCallback" theme="dark">
</p-captcha>
<br />
<p-captcha siteKey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
(onResponse)="showResponse($event)"
initCallback="onloadCallback" size="compact">
</p-captcha>
</div>
|
Javascript
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService],
})
export class AppComponent {
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) { }
ngOnInit() {
this.primengConfig.ripple = true;
}
showResponse(event) {
this.messageService.add({
severity: 'info',
summary: 'Succees',
detail: 'User Responded',
sticky: true,
});
}
}
|
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';
import { CaptchaModule } from 'primeng/captcha';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastModule,
ButtonModule,
RippleModule,
FormsModule,
CaptchaModule,
ImageModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<base href="/" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css"
href="/node_modules/primeicons/primeicons.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
<script>
const onloadCallback = function () {
console.log('reCAPTCHA has loaded!');
grecaptcha.reset();
};
</script>
<script async src=
</script>
</body>
</html>
|
Output:
Reference: http://primefaces.org/primeng/captcha
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...