This article explains how to use Google's reCAPTCHA tool to protect data submission from spammers and hackers. We'll show you how to use reCAPTCHA with Velo to protect data sent from a custom input form to a database collection.
You can adapt this tutorial to protect other restricted operations with reCAPTCHA, such as logging in to a private area of your site or displaying private content.
Notes
Before adding a reCAPTCHA element to your site, it's important to understand the typical CAPTCHA validation lifecycle:
Important To ensure complete protection, you must include backend authorization as a mandatory step of the CAPTCHA validation lifecycle.
In our site we added the following:
Then we added code to do the following:
We added the following elements to our Home page:
We added a web module called submitHandler.web.js to our backend code. We also added a database collection called MailingList to store the names and email addresses of site visitors who sign up.
We made sure the submit button was initially disabled by clearing the Enabled checkbox in the Properties & Events panel. We also made sure the text element for success and error messages was initially hidden by selecting Hidden in the Properties & Events panel.
On our Home page, we start by importing the backend function we use to authorize the CAPTCHA token and perform the data insertion. See Step 7 to learn more about the backend function.
1
Note To see all the code for this example in a single block, scroll down to the end of the tutorial.
Site visitors enter their contact details in the input elements and complete the CAPTCHA challenge. In the onReady
function on our Home page, we added an event handler that runs when the CAPTCHA challenge is successfully completed and the CAPTCHA is verified.
1
Line 2: Hide any previous success or error messages.
Line 3: Enable the previously disabled submit button so the site visitor can complete the submission.
Note When the CAPTCHA is verified, a CAPTCHA token (used for authorization) is automatically generated.
In the onReady
function on our Home page, we added an event handler that runs when a site visitor clicks the submit button.
1
Lines 3-7: Prepare the submit request data. The request data includes the CAPTCHA token generated when the captcha was verified, and the data entered in the input elements.
Line 11: Call the processSubmission
backend function with the prepared submit request data. The processSubmission
function tries to authorize the token. If backend authorization is successful, the data is inserted into the MailingList collection.
Lines 12-16: If authorization and data insertion are successful, display a success message and restart the CAPTCHA lifecycle for future submissions by resetting the reCAPTCHA element and disabling the submit button.
Lines 18-22: If authorization or data insertion fail in the backend, restart the CAPTCHA lifecycle by resetting the reCAPTCHA, disabling the submit button, and displaying an error message instructing the site visitor to try again.
If the reCAPTCHA element loses connection with the provider when the site visitor attempts to complete the CAPTCHA challenge, the reCAPTCHA element automatically resets and the onError
event handler displays a temporary message asking the site visitor to try again later.
1
Line 2: Set the message text to an error message that instructs the site visitor to try again later.
Line 3: Show the message.
Line 5: Hide the message after 10 seconds.
If the submit does not occur within 120 seconds of completing the CAPTCHA challenge, the generated token expires. When the token expires, the reCAPTCHA element automatically resets and displays a message asking the site visitor to redo the challenge. We just need to disable the submit button in the onTimeout
event handler.
1
The processSubmission
backend function checks whether the CAPTCHA token is valid. If authorization is successful (token is valid), the input data is inserted into the MailingList collection. If authorization fails, an exception is thrown that is handled on the client side (see Line 18 of Step 4).
1
Lines 1-3: Import the Permissions
enum and webMethod
function from wix-web-module
. Then import the modules we need to work with CAPTCHA in the backend and with data.
Line 5: The processSubmission
function takes the web method and its permissions, and a submitRequestData
parameter, including the generated CAPTCHA token and the input data to insert into the collection.
Line 6: Call the authorize()
function with the CAPTCHA token. authorize()
checks the validity of the token and if the token is valid, returns a Promise that resolves to a success message.
Lines 7-8: If authorization succeeds, insert the data into the MailingList collection.
Here is the complete code for this example:
1
1