v2 сheckbox

v2 сheckbox

The Google reCAPTCHA v2 checkbox is a reCAPTCHA version that displays a checkbox to the user. It is used to verify that the user is a human and not a bot.

View on GitHub

Demo

Provider Setup

All reCAPTCHA functionality requires wrapping your application with the GoogleReCaptchaProvider. This provider manages the reCAPTCHA script loading and provides context to child components.

<script setup>
import { GoogleReCaptchaProvider } from '@google-recaptcha/vue';
</script>

<template>
  <GoogleReCaptchaProvider type="v2-checkbox" siteKey="your_site_key">
    <slot />
  </GoogleReCaptchaProvider>
</template>
<script setup>
import { useGoogleReCaptchaProvider } from '@google-recaptcha/vue';

useGoogleReCaptchaProvider({
  type: 'v2-checkbox',
  siteKey: 'your_site_key'
});
</script>
<script setup>
import { createApp } from 'vue';
import { googleReCaptcha } from '@google-recaptcha/vue';

const app = createApp(App);

app.use(googleReCaptcha, {
  type: 'v2-checkbox',
  siteKey: 'your_site_key'
});
</script>

Usage

When a user interacts with the Google ReCaptcha v2 checkbox, advanced algorithms analyze their behavior to distinguish between humans and bots. If the system suspects suspicious activity, additional challenges may be presented, such as image selections or puzzle-solving tasks.

Using Component

<script setup>
import { GoogleReCaptchaCheckbox } from '@google-recaptcha/vue';

const onChange = (token) => {
  console.log(token);
};
</script>

<template>
  <GoogleReCaptchaCheckbox @change="onChange" />
</template>

Enterprise Mode

Google reCAPTCHA Enterprise provides enhanced security features, advanced analytics, and better customization options for businesses. It offers improved bot detection, detailed risk analysis, and enterprise-grade support.

<script setup>
import { GoogleReCaptchaProvider } from '@google-recaptcha/vue';
</script>

<template>
  <GoogleReCaptchaProvider type="v2-checkbox" siteKey="your_enterprise_site_key" isEnterprise>
    <slot />
  </GoogleReCaptchaProvider>
</template>
<script setup>
import { useGoogleReCaptchaProvider } from '@google-recaptcha/vue';

useGoogleReCaptchaProvider({
  type: 'v2-checkbox',
  siteKey: 'your_enterprise_site_key',
  isEnterprise: true
});
</script>
<script setup>
import { createApp } from 'vue';
import { googleReCaptcha } from '@google-recaptcha/vue';

const app = createApp(App);

app.use(googleReCaptcha, {
  type: 'v2-checkbox',
  siteKey: 'your_enterprise_site_key',
  isEnterprise: true
});
</script>

After enabling enterprise mode, you can use the GoogleReCaptchaCheckbox component to set the action for the checkbox.

<script setup>
import { GoogleReCaptchaCheckbox } from '@google-recaptcha/vue';

const onChange = (token) => console.log(token);
</script>

<template>
  <GoogleReCaptchaCheckbox action="some action" @change="onChange" />
</template>

Last updated on

v3

The Google reCAPTCHA v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site.

v2 invisible

The Google reCAPTCHA v2 invisible is a reCAPTCHA version that runs in the background without requiring user interaction. It is used to verify that the user is a human and not a bot.