token

Gets the reCAPTCHA token.

Description

When a site visitor successfully completes a CAPTCHA challenge, a token is generated. The token is used for backend authorization.

Prior to completing the CAPTCHA challenge and following timeout, the token returns undefined.

Type:

stringRead Only

Was this helpful?

Get the token of the verified reCAPTCHA element

Copy Code

1let myToken = $w("#myCaptcha").token;
2// "1ABCDeFG23hijKlmn4...OPQ5r6stuvWXy"

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