Introduction
Use the reCAPTCHA element to verify that site visitors are human before allowing them to perform restricted operations such as data submission, login, or accessing private content.
Typical CAPTCHA Validation Lifecycle
Important: To ensure complete protection, you must include backend authorization as a mandatory step of the CAPTCHA validation lifecycle.
The following outlines a typical CAPTCHA validation lifecycle:
- A button or another clickable element that triggers a submit, login, or another restricted operation is disabled, pending CAPTCHA verification.
- A site visitor completes the CAPTCHA challenge. One of the following occurs:
- Verification: The CAPTCHA is verified. A
token
is generated. TheonVerified()
event indicates a successful CAPTCHA challenge completion. Use theonVerified()
event handler to enable the disabled clickable element. - Error: The reCAPTCHA element loses connection with the CAPTCHA provider. You can use the
onError()
event handler to instruct the visitor to try again later. Return to Step 1.
- Verification: The CAPTCHA is verified. A
- The clickable element is enabled. One of the following occurs:
- Click: The site visitor clicks the clickable element, triggering a backend function that calls
authorize()
with the generatedtoken
. - Timeout: The site visitor did not click the submit button within 120 seconds of token generation, causing the token to expire. When timeout occurs, the reCAPTCHA element automatically resets and displays a message asking the site visitor to redo the challenge. Use the
onTimeout()
event handler to disable the clickable trigger. Return to Step 1.
- Click: The site visitor clicks the clickable element, triggering a backend function that calls
authorize()
checks whether the token is valid. One of the following occurs:
Learn more about working with your reCAPTCHA element.
Note: The reCAPTCHA element does not offer protection for data submission performed via a dataset. To protect data submission with CAPTCHA, use code to perform the data operation (for example,
insert()
orsave()
).
Was this helpful?