Adding reCaptcha V3 Spam Protection

This guide will help you add spam protection to your forms with Google reCAPTCHA V3.

Requirements

To follow this tutorial, you should be familiar with creating pages and forms, especially user sign in forms. You should also know how to add an integration to your site using the Partner Portal.

Steps

Adding reCAPTCHA protection is a four-step process:

Step 1: Add Google reCAPTCHA V3 keys

Go to our Partner Portal, and add reCAPTCHA keys in the Integrations section. Keys can be generated on https://www.google.com/recaptcha.

Step 2: Create sign-in page with spam protection


Start with a simple sign-in page with spam protection enabled by default.
Create a sign-in page and sign-in form configuration.
Form configuration needs to have the attribute spam_protection with configuration to enable protection, available options can be found in Form tutorial
Also use the {% spam_protection %} tag to generate required JS (you can include required JS code on your own).

views/pages/sign-in-recaptcha-v3.liquid


---
slug: sign-in-recaptcha-v3
---
<h2>Sign in</h2>

{% include_form 'sign_in_with_recaptcha_v3' %}


forms/sign_in_with_recaptcha-v3.liquid


---
name: sign_in_with_recaptcha_v3
resource: Session
spam_protection:
  recaptcha_v3:
    action: signup
    minimum_score: 0.7
fields:
  email:
  password:
---
{% form %}
  {% spam_protection "recaptcha_v3", action: "signup" %}
  <input name="{{ form.fields.email.name }}" value="{{ form.fields.email.value}}" type="email">
  <input name="{{ form.fields.password.name }}" type="password">

  <div class="form-group">
    {{ form.errors.base }}
  </div>

  <button>Sign In</button>
{% endform %}

Live example and source code

To play with live example create developer account at https://examples.platform-os.com and go to the sign-in-recaptcha page.

Source code can be found on GitHub.

Additional resources

Questions?

We are always happy to help with any questions you may have.