Angular Captcha is a form validation component based on Recaptcha.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
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
}
Theming
Captcha supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Captcha showcase for demos and documentation.