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).
app/views/pages/sign-in-recaptcha-v3.liquid
<h2>Sign in</h2>
{% include_form 'sign_in_with_recaptcha_v3' %}
app/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 %}