A simple and easy to use reCAPTCHA Enterprise (v3 only) library for the browser.
With NPM:
$ npm install recaptcha-v3-enterprise
With Yarn:
$ yarn add recaptcha-v3-enterprise
To use this package you only need a valid site key for your domain, which you can easily get here.
With promises:
import { load } from 'recaptcha-v3-enterprise';
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-enterprise';
async function asyncFunction() {
const recaptcha = await load('<site key>');
const token = await recaptcha.execute('<action>');
console.log(token); // Will also print the token
}
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 |
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 | {} |
To use the options just pass an additional object to the load(...)
method.
For example:
import { load } from 'recaptcha-v3-enterprise';
load('<site key>', {
useRecaptchaNet: true,
autoHideBadge: true,
}).then((recaptcha) => {
// ...
});
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 |