CaptchaCaptcha is a form validation component based on Recaptcha.

Captcha - 图1

Documentation

Import

  2. import {CaptchaModule} from 'primeng/captcha';
  3.  

Getting Started

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

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

In addition include the captcha widget resource to your page.

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

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

  2. <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=loadCaptcha" async defer></script>
  3.  
  2. <p-captcha siteKey="YOUR_SITE_KEY" (onResponse)="showResponse($event)" initCallback="loadCaptcha"></p-captcha>
  3.  

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.

  2. showResponse(response) {
  3.     //call to a backend to verify against recaptcha with private key
  4. }
  5.  

Properties

NameTypeDefaultDescription
sitekeystringnullPublic sitekey.
themestringlightThe color scheme of the widget.
typestringimageThe type of CAPTCHA to serve.
sizestringnormalThe size of the widget.
tabindexnumber0The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
languagestringenLanguage of the widget.
initCallbackstringinitRecaptchaName of global callback to initialize recaptcha.

Events

NameParametersDescription
onResponseevent.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

NameParametersDescription
reset-Resets the reCAPTCHA widget.
getResponse-Gets the response for the reCAPTCHA widget.

Official Documentation

Here

Dependencies

Google Recaptcha V2

Source

View on GitHub

  2. <p-toast [style]="{marginTop: '80px'}"></p-toast>
  4. <p-captcha siteKey="6Lf2XQkTAAAAANcvOwYqPxWL4iZDksFqHpS39GDA" (onResponse)="showResponse($event)"></p-captcha>
  5.  
  2. export class CaptchaDemo {
  4.     constructor(private messageService: MessageService) {}
  6.     showResponse(event) {
  7.         this.messageService.add({severity:'info', summary:'Succees', detail: 'User Responded', sticky: true});
  8.     }
  9. }
  10.