This article will walk you through creating a form element that uses the react-google-recaptcha component to implement a captcha to distinguish humans from bots.
Follow the instructions in the Web Applications SDK page to set up your development environment.
A working knowledge of TypeScript is recommended before extending Workflow for web-based hosts.
Implementing a captcha custom form element for web applications using a third party library consists of the following steps:
- Obtaining a Google reCAPTCHA v2 Site Key
- Adding third party library dependencies to your project.
- Creating the custom form element.
- Implementing the custom form element using the third party library.
The react-google-recaptcha component uses reCAPTCHA technology from Google.
- Open Google reCAPTCHA in a web browser.
- Sign in with your Google account.
- Register a new Site.
- Select the
- Select the
"I'm not a robot" tickboxoption.
- Add the domain(s) where your web application is hosted.
- This generates a
Site Key. Copy this value, it will be required later.
npm install react-google-recaptchain the terminal to install the third party react-google-recaptcha component.
npm install @types/react-google-recaptchain the terminal to install type information for the third party component. This is optional, but it provides an improved developer experience.
To create a new form element:
- Open the Workflow activity SDK in Visual Studio Code.
npm run generatein the terminal.
- When prompted, select
- Enter the name of the form element you would like to create and press
Enter. For example,
- Open the newly created
Modify the skeleton form element implementation in
src/activities/Captcha.tsx to match the following example.
sitekey on the
<ReCAPTCHA> element to use your own site key.
sitekey included in this tutorial is for demonstration purposes only. It is watermarked and will not produce valid captcha results. You must use your own site key.
Follow the instructions to build and deploy the activity pack.
Once your activity pack is hosted and registered, your
Register Captcha Form Element custom activity should appear in the activity toolbox in Geocortex Workflow Designer alongside the built-in activities.
To use your custom form element in a workflow:
- Add your
Register Captcha Form Elementcustom activity to your workflow so that it runs before any
Display Formactivities that will use the custom form element.
- Select the
Display Formactivity that you want to include your form element in.
- Add a
Customform element to the form.
- Set the
Custom Typeproperty of the
Customform element to
- Test your workflow.