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): void
handler: function VerifiedHandler(): Promise<void> | void

onVerified Parameters

NAME

TYPE

DESCRIPTION

handler

VerifiedHandler

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:

void

VerifiedHandler Parameters

This function does not take any parameters.

Returns

Return Type:

Promise<void>

void

Was this helpful?

Copy Code

1$w("#myCaptcha").onVerified(() => {
2  $w("#signupButton").enable();
3  let myToken = $w("#myCaptcha").token;
4} );

Full CAPTCHA lifecycle scenario

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.

Copy Code

1/************************************
2 * backend code - submitHandler.jsw *
3 ************************************/
4
5import wixCaptcha from 'wix-captcha-backend';
6import wixData from 'wix-data';
7
8// Authorize token and insert data
9export 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}
20
21/********************
22 * client-side code *
23 ********************/
24
25import {processSubmission} from 'backend/submitHandler';
26
27$w.onReady(function () {
28  // When user clicks submit button
29  $w("#submitDataButton").onClick(() => {
30    let submitRequestData = {
31      token: $w("#myCaptcha").token,
32      data: $w("#myInput").value,
33    }
34    processSubmission(submitRequestData) // Call backend function
35      .then( (response) => {
36        // Display a different message depending on response from backend function
37        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  });
53
54  // Error handler
55  $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  })
62
63  // Verification handler
64  $w("#myCaptcha").onVerified(() => {
65    $w("#submitDataButton").enable();
66    $w("#messageText").hide();
67  })
68
69  // Timeout handler
70  $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