​
Setup

With you can select v2 checkbox, v2 invisible and v3 reCAPTCHA.

Go to your .env file and update the keys for versions you want to use.

# v2 checkbox
RECAPTCHA_CHECKBOX_SITE_KEY=
RECAPTCHA_CHECKBOX_SECRET_KEY=
# v2 invisible
RECAPTCHA_INVISIBLE_SITE_KEY=
RECAPTCHA_INVISIBLE_SECRET_KEY=
# v3
RECAPTCHA_V3_SITE_KEY=
RECAPTCHA_V3_SECRET_KEY=

This is disabled by default, so to enable it set RECAPTCHA_ENABLED to true in your .env.

Default version is set to v3 (reCAPTCHA v3). To update default version set RECAPTCHA_VERSION to checkbox (I’m not a robot checkbox) or invisible (Invisible reCAPTCHA v2 badge) in your .env.

Passing score for v3 is set to 0.5 by default. To update score set RECAPTCHA_V3_SCORE to desired value in your .env.

​
How to use it?

Go to reCAPTCHA dashboard https://www.google.com/recaptcha/admin/create

Copy and paste generated keys to .env file.

  1. Import the component in pages where you will use it
import Recaptcha from "@/Components/Form/Recaptcha.vue";

const recaptcha = ref<{
  execute: () => Promise<string>;
} | null>(null);

const form = useForm({
  email: "",
  password: "",
  remember: true,
  // Add this to your form
  recaptcha: "",
});
  1. Include it in your template
  1. For v3, do this to get valid token
const submit = async () => {
  // Custom trigger form processing
  form.processing = true;

  if (recaptcha.value) {
    form.recaptcha = await recaptcha.value.execute();
  }

  // Trigger the form
  form.post(route("some-post-route"));
};
  1. In your form request or validator, validate the recaptcha token
use App\Rules\Recaptcha;

[
    'recaptcha' => [new Recaptcha],
    // other rules go here
]

Or set the rule like this (recommended) to exclude the field from validate and validated methods:

[
    'recaptcha' => ['exclude', new Recaptcha],
    // other rules go here
]
CookiesTranslations