onVerified( )
Adds an event handler that runs when the CAPTCHA challenge is successfully completed.
Description
Once the CAPTCHA challenge has been successfully completed by the user, the onVerified
callback is triggered and a CAPTCHA token is generated.
If the clickable element for triggering the submit or another restricted operation was disabled, enable it.
Syntax
function onVerified(handler: VerifiedHandler): voidhandler: function VerifiedHandler(): Promise<void> | void
onVerified Parameters
NAME
TYPE
DESCRIPTION
The name of the function or the function expression to run when the CAPTCHA is verified.
Returns
This function does not return anything.
Return Type:
VerifiedHandler Parameters
This function does not take any parameters.
Returns
Return Type:
|
voidWas this helpful?
1$w("#myCaptcha").onVerified(() => {2 $w("#signupButton").enable();3 let myToken = $w("#myCaptcha").token;4} );
This example demonstrates how to use reCAPTCHA to protect a data insertion. We use a text input for the data, a reCAPTCHA element, and a submit button. The submit button is disabled until the CAPTCHA is verified and a token is generated. Clicking the submit button triggers backend authorization of the token. If authorization is successful, the data is inserted into the collection.
1/************************************2 * backend code - submitHandler.jsw *3 ************************************/45import wixCaptcha from 'wix-captcha-backend';6import wixData from 'wix-data';78// Authorize token and insert data9export function processSubmission(submitRequestData) {10 return wixCaptcha.authorize(submitRequestData.token)11 .then( () => {12 return wixData.insert("MyCollection", submitRequestData.data)13 .then( () => ({"type": "success"}))14 .catch( (error) => ({"type": "insertion error",15 "message": "Error: collection insertion failed: " + error}));16 })17 .catch( (error) => ({"type": "authorization error",18 "message": "Error: reCAPTCHA authorization failed: " + error}));19}2021/********************22 * client-side code *23 ********************/2425import {processSubmission} from 'backend/submitHandler';2627$w.onReady(function () {28 // When user clicks submit button29 $w("#submitDataButton").onClick(() => {30 let submitRequestData = {31 token: $w("#myCaptcha").token,32 data: $w("#myInput").value,33 }34 processSubmission(submitRequestData) // Call backend function35 .then( (response) => {36 // Display a different message depending on response from backend function37 switch(response.type){38 case "success":39 $w("#messageText").text = "Data successfully submitted";40 break;41 case "authorization error":42 $w("#messageText").text = "CAPTCHA authorization failed. Redo the CAPTCHA challenge.";43 break;44 case "insertion error":45 $w("#messageText").text = "Database error. Redo the CAPTCHA challenge.";46 break;47 }48 $w("#myCaptcha").reset();49 $w("#submitDataButton").disable();50 $w("#messageText").show();51 });52 });5354 // Error handler55 $w("#myCaptcha").onError(() => {56 $w("#messageText").text = "The reCAPTCHA element lost connection with the CAPTCHA provider. Try again later.";57 $w("#messageText").show()58 .then(() => {59 $w("#messageText").hide("fade", {"delay": 10000});60 } );61 })6263 // Verification handler64 $w("#myCaptcha").onVerified(() => {65 $w("#submitDataButton").enable();66 $w("#messageText").hide();67 })6869 // Timeout handler70 $w("#myCaptcha").onTimeout(() => {71 $w("#submitDataButton").disable();72 $w("#messageText").text = "The CAPTCHA has timed out. Please redo the CAPTCHA challenge.";73 $w("#messageText").show();74 });75});76