Alpina
Search…
Captcha

Before you start

In order to use Captchas you must first have our JS snippet on your pages. You can learn more about the integration process by clicking below:
Also, make sure to setup your captcha first by creating it here. You can create as many captchas with different configurations as you want.

Integrating captcha

Once your captcha has been created, copy it's ID and paste it as the value for the captchaId property.
Also, make sure to replace #captcha_target - this is the node in which the captcha image will be rendered.
1
const captchaInstance = AlpinaJSCaptchas({
2
captchaId: 'YOUR_CAPTCHA_ID',
3
renderNode: '#captcha_target',
4
});
5
6
captchaInstance.render()
7
.then(() => {
8
// captcha has been rendered
9
10
window.onSubmit = () => {
11
const captchaInputValue = document.querySelector('#captcha_input').value;
12
13
// id could be passed to your API where you can make a call
14
// to our captcha verification endpoint to make sure the captcha
15
// has actually been solved
16
const { solved, id } = await captchaInstance.verify(captchaInputValue);
17
18
if (solved) {
19
// captcha is valid
20
// now you can submit the form to your API
21
22
// IMPORTANT: it's highly recommended to add verification
23
// in your API as well, to make sure that captcha has been solved
24
// You'll need to pass the `id` variable above to your API.
25
// take a look at our API Captcha endpoints to learn more.
26
} else {
27
// captcha has not been solved
28
// we will automatically generate and render a new one.
29
// This is where you can inform your user that they need to try again.
30
}
31
};
32
})
33
.catch(err => {
34
throw err;
35
})
36
;
Copied!
And the HTML to along with the JS code above is as follows:
1
<div id="captcha_target"></div>
2
<input id="captcha_input" type="text" placeholder="Enter the captcha here" />
3
<button onclick="onSubmit()">Submit</button>
Copied!
Last modified 1yr ago