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.
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-invisible" siteKey="your_site_key">
<slot />
</GoogleReCaptchaProvider>
</template><script setup>
import { useGoogleReCaptchaProvider } from '@google-recaptcha/vue';
useGoogleReCaptchaProvider({
type: 'v2-invisible',
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-invisible',
siteKey: 'your_site_key'
});
</script>Usage
Google ReCaptcha v2 invisible does not require users to solve any puzzles or enter any codes. Instead, it runs in the background and analyzes user behavior on the web page to determine if they are genuine users or potential bots.
Using Composable
<script setup>
import { useGoogleReCaptcha } from '@google-recaptcha/vue';
const googleReCaptcha = useGoogleReCaptcha();
const onVerify = async () => {
if (!googleReCaptcha.executeV2Invisible) {
console.log('Execute recaptcha not available');
return;
}
const token = await googleReCaptcha.executeV2Invisible();
};
</script>
<template>
<button @click="onVerify">verify</button>
</template>Last updated on