Google reCAPTCHA

​

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.

​

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
]