LCS - ReCAPTCHA setup in Betty Blocks
Per the minimum security requirements, ReCAPTCHA should be used for on any public form submission to reduce or eliminate robot-filled forms. This kb steps through how to add ReCAPTCHA to such form in Betty Blocks.
- Register New Site with Google ReCAPTCHA
- Install ReCAPTCHA Component, ReCAPTCHA Function and Raise Error
- Add ReCAPTCHA component to web form and values therein
- Create a Configuration Variable
- Modify the action of the form containing the reCAPTCHA component
Register New Site with Google ReCAPTCHA
- Go to Google's ReCaptcha site
- Select the Challenge (v2)
- Select I'm not a robot Checkbox
- Under Domains, add your application's site URL(s).
- https:/ should not be included
- Include both the Sandbox environment and Production URL to use it/test in both.
- Betty Block UW-tenant URLs should look something like:
- jmh-testing-app-a0999-dev.betty.app
- jmh-testing-app-a0999.betty.app
- After submitting, Google will provide a site key and secret key used for all URLs listed above. These keys will be used later in this document.
option
Install ReCAPTCHA Component, ReCAPTCHA Function and Raise Error
- Find the ReCAPTCHA Component and ReCAPTCHA Function from the Block Store within Betty Blocks by searching on "Recaptc".
- Install both into your application.
- Add the Raise Error Function from the Block Store within Betty Blocks by searching on "raise err".
Add ReCAPTCHA component to web form and values therein
- Go into the action of your form and create a Text input variable and name it appropriately, such as "recaptcha_token".
- Find the reCAPTCHA component in your list of components and drag it into the appropriate place in your form.
- Select the reCAPTCHA within your form,
- From within the Options tab, add the site key from Google ReCAPTCHA.
- Add the "recaptcha_token" just created into the Action Input Variable.
Create a Configuration Variable
- From Tools > configurations > select the New Configuration button
- Name the new configuration “recaptcha secret”
- Copy/Paste in the secret key from Google ReCAPTCHA into the Value field. Select the lock icon to encrypt.
Modify the action of the form containing the reCAPTCHA component
- Go into the action of your form
- Drag the Verify Recaptcha token into the action to just above the “Create Record” box within the action.
- Select the Verify Recaptcha token to add Options.
- Add the secret from the configuration variable
- Add the token variable
- Add a success variable
- Add the secret from the configuration variable
- Drag a Condition just under the “Verify Recaptcha token” box within the action.
- Add a rule to the condition as described below
- Add filter to check if recaptcha is true
- Select Save.
- Add filter to check if recaptcha is true
- Add a rule to the condition as described below
- Drag the Create Record box to the left side of condition under the true condition as pictured below.
- Drag the Raise Error into the action, to the right side of the condition under else as pictured below.
- Add an appropriate error message for Raise Error.
- Add an appropriate error message for Raise Error.