0.0.14 • Published 3 months ago
v3-recaptcha v0.0.14
V3 Recaptcha for Vue3
About
This package is used to incorporate Googles V3 Recaptcha into a vue project easily. It handles:
- Injecting script into head to load googles recaptcha.
- Generating a token to be verified on your server.
- Pass actions to recaptcha token generator
- Handle recaptcha loading dynamically if required.
Installation
npm install v3-recaptcha
Usage
Import the package in the component you want to use recaptcha.
import { useV3Recaptcha } from "v3-recaptcha";
Pull the required functions:
const { recaptchaIsLoaded, hasRecaptcha, loadRecaptcha, getToken } = useV3Recaptcha("YOUR SITE KEY HERE");
"YOUR SITE KEY HERE"
should be replaced with your site key from google. If you are adding this into a package and allowing users choose if they want to include recaptcha, this can be replaced with null
and recaptcha wont load, getToken will then return undefined
instead of a token string.
Load recaptcha is typically best to add this on the onMounted
hook:
onMounted(() => {
loadRecaptcha();
});
Get a token:
const token = await getToken(`process_form`);
Functions and Variables
Variables | Type | Description |
---|---|---|
recaptchaIsLoaded | ref | Returns whether the recaptcha script has loaded. |
hasRecaptcha | computed | Returns whether the site key has been loaded |
loadRecaptcha | function | Loads the recaptcha script, will be skipped if site key is null OR is already loaded |
getToken | async function | Returns either a string if site key is set, or undefined if site key is null |