Captcha Captcha is a form validation component based on Recaptcha.

Import


import {CaptchaModule} from 'primeng/captcha';

Getting Started

Captcha is used with a siteKey and a callback to verify the response.


<p-captcha siteKey="YOUR_SITE_KEY" (onResponse)="showResponse($event)"></p-captcha>

In addition include the captcha widget resource to your page.


<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=initRecaptcha" async defer></script>

Global callback name is initRecaptcha by default and it can be changed using initCallback property .


<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=loadCaptcha" async defer></script>



<p-captcha siteKey="YOUR_SITE_KEY" (onResponse)="showResponse($event)" initCallback="loadCaptcha"></p-captcha>

Verification

In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. Read more at official documentation.


showResponse(response) {
    //call to a backend to verify against recaptcha with private key
}

Properties

Name Type Default Description
sitekey string null Public sitekey.
theme string light The color scheme of the widget.
type string image The type of CAPTCHA to serve.
size string normal The size of the widget.
tabindex number 0 The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
language string en Language of the widget.
initCallback string initRecaptcha Name of global callback to initialize recaptcha.

Events

Name Parameters Description
onResponse event.response: The user response token. The callback function to be executed when the user submits a successful CAPTCHA response.
onExpire - The callback function to be executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.

Methods

Name Parameters Description
reset - Resets the reCAPTCHA widget.
getResponse - Gets the response for the reCAPTCHA widget.

Official Documentation

Here

Dependencies

Google Recaptcha V2

 View on GitHub 

<p-growl [value]="msgs" sticky="sticky"></p-growl>

<p-captcha siteKey="6Lf2XQkTAAAAANcvOwYqPxWL4iZDksFqHpS39GDA" (onResponse)="showResponse($event)"></p-captcha>



export class CaptchaDemo {
    
    msgs: Message[] = [];
    
    showResponse(event) {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Succees', detail: 'User Responded'});
    }
}