This package provides an easy integration of EU Captcha from Myra Security.
npm install @myrasec/eu-captchaThis package provides an easy integration of EU Captcha from Myra Security.
The package can be use with and without react.
Proceed as follows:
(1) Install the package.
```
npm i @myrasec/eu-captcha
(2) Add the code below in your code:
`
import { EuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha";
// Here use the public site key which can be found in the backend of the customer.
const captchaSitekey = "YOUR-SITEKEY-HERE";
`
(3) Render the widget with the syntax below.
``
You can test the integration using any fake site key.
If a site key does not exist, the captcha runs with default parameters and all traffic will be passed.
You can also set additional properties: theme, width
To switch between light/dark theme:
``
To define the width of the widget (default is 330). Please specify a number.
``
To use the package without react, you can use the libary as described below.
Proceed as follows:
(1) Install the package.
``
npm i @myrasec/eu-captcha
(1) Load the JS components asynchronously as descibe below.
`
import { loadEuCaptcha, isEuCaptchaDone } from "@myrasec/eu-captcha";
loadEuCaptcha();
`
(2) Add the <div> tag to a form of your website manually where the EU CAPTCHA should appear.
``
Make sure that EU Captcha is done before submitting a form to a server.
`
import { isEuCaptchaDone } from "@myrasec/eu-captcha";
function onSubmit(e) {
e.preventDefault();
if (!isEuCaptchaDone()) {
// computation has not been completed
return;
}
}
`
Additionally, in case you want to be informed actively to changes, such as the status of a button, a message can be displayed in the main window with msg.data.type set to 'euCaptchaDone'.
`
function listenForCaptchaDone(msg: MessageEvent) {
if (msg.data.type === 'euCaptchaDone') {
// Changes the status of the form, etc.
}
}
window.addEventListener("message", listenForCaptchaDone, false);
``