reCAPTCHA-v3
A simple and easy to use reCAPTCHA (v3 only) library for the browser. (You may be also interested in wrapper libraries)
Install
With NPM:
$ npm install recaptcha-v3
With Yarn:
$ yarn add recaptcha-v3
Prerequisites
To use this package you only need a valid site key for your domain, which you can easily get here.
Usage
With promises:
import { load } from 'recaptcha-v3'
load('<site key>').then((recaptcha) => {
recaptcha.execute('<action>').then((token) => {
console.log(token) // Will print the token
})
})
With async/await:
import { load } from 'recaptcha-v3'
async function asyncFunction() {
const recaptcha = await load('<site key>')
const token = await recaptcha.execute('<action>')
console.log(token) // Will also print the token
}
Loader options
The loader takes care of loading the reCAPTCHA script from Google. Therefore the loader offers optional options for additional configuration:
Name | Description | Type | Default value |
---|---|---|---|
useRecaptchaNet | Due to limitations in certain countries it's required to use recaptcha.net instead of google.com . |
boolean | false |
useEnterprise | Uses the enterprise version of the recaptcha api and handles the differences in the response. | boolean | false |
autoHideBadge | Will automatically hide the reCAPTCHA badge. Warning: The usage is only allowed if you follow the offical guide for hiding the badge from Google (see here) | boolean | false |
renderParameters | Will add the given parameters to the reCAPTCHA script. The given object will be converted into a query string and will then be added to the URL. | Object | {} |
explicitRenderParameters | Will set the parameters to the explicit rendering. See here | Object | {} |
Load options usage
To use the options just pass an additional object to the load(...)
method.
For example:
import { load } from 'recaptcha-v3'
load('<site key>', {
useRecaptchaNet: true,
autoHideBadge: true
}).then((recaptcha) => {
})
Explicit render parameters
The ReCaptcha widget will be explicity loaded, which means you can add parameters to the rendering process.
Name | Description | Type |
---|---|---|
container | The container if you want to render the inline widget | string or Element |
badge | The positioning for the widget | 'bottomright' or 'bottomleft' or 'inline' |
size | The size of the widget | 'invisible' |
tabindex | The tab index of the widget | number |
Wrapper libraries
Wrapper libraries are available for:
- Vue.js plugin (vue-recaptcha-v3 / npm)