reCAPTCHA

We created a simple signup form with input elements, a reCAPTCHA element, and a signup button. 

The signup button is disabled until the site visitor completes the CAPTCHA challenge and the reCAPTCHA is verified. Clicking the signup button triggers backend authorization. If authorization is successful, the input data is inserted into the collection. A text element displays the current number of applicants.

Database Collection

We added the following collection to our site:

• BetaApplications: Stores the details of site visitors who sign up for the app.

Page Elements

Then we added the following page elements:

• numberOfUsers text: Displays the number of people who signed up.

• Input elements: Form elements for site visitors to enter their details. 

• reCAPTCHA element: Site visitors must complete the CAPTCHA challenge before submitting the form.

• Signup button: Visitors click to submit the form.

• Submission status text: Displays success and error messages. 

• BetaApplication dataset: Connects the number of applicants in the BetaApplications collection with the numberOfUsers text.

Code

Then we added code to the Home page:

1. Import: We imported the processSubmissionRequest function from the backend for authorizing the CAPTCHA token and performing the data insertion.

2. onReady event handlers: We added code to handle 3 potential CAPTCHA events:

• onTimeout: If backend authorization does not occur within 120 seconds of token generation, the token expires. The reCAPTCHA automatically resets and displays a message asking the site visitor to redo the challenge. If the token times out, we disable the signup button.

• onError: If an error occurs while the site visitor completes the CAPTCHA challenge, the reCAPTCHA automatically resets, and we display an error message and disable the signup button.

• onVerified: Following successful completion of the CAPTCHA challenge, we enable the signup button. Note that when the reCAPTCHA is verified, a CAPTCHA token used later for authorization is automatically generated.

1. Signup button event handler: We connected an onClick event handler via the Properties panel to the signup button. When a site visitor clicks the button the following happens:

2. Hide previous text message.

3. Prepare the submission request from the generated CAPTCHA token and the input data.

4. Call the backend authorization function with the submission request. 

5. If authorization succeeds and the data is inserted into the collection, disable the signup button and reset the reCAPTCHA for the next submit, display a success message, refresh the BetaApplication counter dataset, and display the new number of applicants.

6. If authorization fails, reset the reCAPTCHA and display an error message requesting that the site visitor redo the challenge.

7. Dataset onReady event handler: When the dataset has loaded (when the page loads or after a refresh), get the total number of applicants from the BetaApplications collection and display it in the numberOfUsers text.

Note: We used temperate literals to display dynamic content in our text messages.

We also added code to our captchaModule backend web module:

1. Import: Import the modules needed to work with the Wix Data and Wix Captcha Backend libraries. 

2. processSubmissionRequest() function: This function is called when a site visitor clicks the signup button. Authorize the generated CAPTCHA token, and if authorization is successful, insert the data from the submission request into the BetaApplications collection.
   For error handling, add different error messages for each catch() to indicate whether authorization or the data insert failed.