Skip to main content

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 add RECAPTCHA_VERSION to your .env file and set its value to checkbox (I’m not a robot checkbox) or invisible (Invisible reCAPTCHA v2 badge). Passing score for v3 is set to 0.5 by default. To update score add RECAPTCHA_V3_SCORE to your .env file and set its value to desired score.

How to use it?

Go to reCAPTCHA dashboard https://www.google.com/recaptcha/admin/create Copy and paste generated keys to .env file.
You can find working example in LoginForm.vue component.

Import and define recaptcha

import Recaptcha from "@/Components/Form/Recaptcha.vue";

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

const form = useForm({
  // You form data here...
  // Add this
  recaptcha: "",
});

Render component

<form @submit.prevent="submit">
  <Recaptcha ref="recaptcha" />

  // Also add component to render the error message if validation fails
  <ErrorMessage :message="form.errors.recaptcha" />
</form>

Get token

const submit = async () => {
  // Custom trigger form processing
  form.processing = true;

  if (recaptcha.value) {
    // Get valid token
    form.recaptcha = await recaptcha.value.execute();
  }

  // Submit the form
  form.post(route("route-name"));
};

Validate token with Google

Add this tou your form request or validator.
use App\Rules\Recaptcha;

[
    'recaptcha' => [new Recaptcha],
    // other rules go here
]
Or set the rule like this to exclude the field from the request data returned by the validate and validated methods:
[
    'recaptcha' => [new Recaptcha, 'exclude'],
    // other rules go here
]
I