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

  1. Go to Google's ReCaptcha site
  2. Select the Challenge (v2) option
    1. Select I'm not a robot Checkbox
    2. Under Domains, add your application's site URL(s).
      1. https:/ should not be included
      2. Include both the Sandbox environment and Production URL to use it/test in both.
      3. Betty Block UW-tenant URLs should look something like:
        1. jmh-testing-app-a0999-dev.betty.app
        2. jmh-testing-app-a0999.betty.app
    3. 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.

Install ReCAPTCHA Component, ReCAPTCHA Function and Raise Error

  1. Find the ReCAPTCHA Component and ReCAPTCHA Function from the Block Store within Betty Blocks by searching on "Recaptc".
    recaptcha components found in block store
  2. Install both into your application.
  3. Add the Raise Error Function from the Block Store within Betty Blocks by searching on "raise err".
    finding and installing raise error in the block store

Add ReCAPTCHA component to web form and values therein 

  1. Go into the action of your form and create a Text input variable and name it appropriately, such as "recaptcha_token".
    select form from the page and then action associated with the form

    add an input variable to the action
  2. Find the reCAPTCHA component in your list of components and drag it into the appropriate place in your form.
    find recaptcha component and move the component into your form
  3. Select the reCAPTCHA within your form,
    1. From within the Options tab, add the site key from Google ReCAPTCHA.
    2. Add the "recaptcha_token" just created into the Action Input Variable.
      site key and action input variable added to the recaptcha component options on the page

Create a Configuration Variable

  1. From Tools > configurations > select the New Configuration button
  2. Name the new configuration “recaptcha secret” 
  3. Copy/Paste in the secret key from Google ReCAPTCHA into the Value field. Select the lock icon to encrypt.
     configuration added with the recaptcha secret key

Modify the action of the form containing the reCAPTCHA component

  1. Go into the action of your form
  2. Drag the Verify Recaptcha token into the action to just above the “Create Record” box within the action.
    add the verify recaptcha token within the action
  3. Select the Verify Recaptcha token to add Options.
    1. Add the secret from the configuration variable
    2. Add the token variable
      token variable selected in within the actions options
    3. Add a success variable
      variables added to Options of the verify recaptcha token action
  4.  Drag a Condition just under the “Verify Recaptcha token” box within the action.
    condition added to the recaptcha action
    1. Add a rule to the condition as described below
      1. Add filter to check if recaptcha is true
        condition filter added for recaptcha success to be true
      2. Select Save.
  5. Drag the Create Record box to the left side of condition under the true condition as pictured below.
  6. Drag the Raise Error into the action, to the right side of the condition under else as pictured below.
    1. Add an appropriate error message for Raise Error.
      moved create record under success condition and error under else condition


Keywords:
form validator, robot exclusion checker 
Doc ID:
136741
Owned by:
Jeanne H. in Low Code Solutions
Created:
2024-04-11
Updated:
2024-07-15
Sites:
DoIT Enterprise Business Systems - Low Code Solutions