Usage Examples

The following examples demonstrate how to use the ALAN Captcha widget in different scenarios, including automatic and semi-automatic handling, as well as integration with popular frameworks like React.

Vanilla HTML/JS & Automatic handling

Note that crossorigin="anonymous" is only required for the Live Editor to work, you can remove it if you want to use the widget in your own application.

Loading Live HTML Code Block...

In this example, you can see how to use the ALAN Captcha widget with automatic handling. No JS interaction is required to start solving the puzzles. The widget automatically initializes and starts solving challenges when the user interacts with the form.

Finally, you can obtain the solutions by checking the hidden input field named alan-solution that is automatically added to the form.

Vanilla HTML/JS & Semi-automatic handling

Note that crossorigin="anonymous" is only required for the Live Editor to work, you can remove it if you want to use the widget in your own application.

Loading Live HTML Code Block...

Here you can see semi-automatic handling of the ALAN Captcha widget. Note the data-autotrigger="false" attribute, which prevents the widget from automatically starting to solve challenges.

In this example, we start to retrieve and solve a challenge as soon as the user starts typing in the input field. We also add an event listener to the widget to get notified when a challenge is solved.

The call to widgetReference.isReadyToProcessNewChallenge() tells us if the widget is ready to process a new challenge. This is the case if there is no current challenge, meaning no solving in progress and no already solved challenge is present.

Finally, we reset the widget when the form is submitted. After that, the widget is ready to process a new challenge again.

React

Note that the import statement is commented out for the Live Editor to work. In you will need that import.

Live Editor

// import * as AlanCaptcha from '@alancaptcha/widget';

function CaptchaExampleReact(props) {

    const captchaRef = useRef(null);
    const [captchaSolution, setCaptchaSolution] = useState();

    useEffect(() => {
        async function loadAlanCaptcha() {
            if (!captchaRef.current) return;
            await AlanCaptcha.widgetUI(captchaRef.current);
        }

        loadAlanCaptcha();
    });

    const handleSubmit = (event) => {
        event.preventDefault();

        const widget = AlanCaptcha.widget(captchaRef.current);
        if (widget.isChallengeSolved()) {
            setCaptchaSolution(widget.getLastSolvedChallenge().solutionPayLoad);
        }
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="input" placeholder="Input" />
                <div
                    ref={captchaRef}
                    data-sitekey="4ebc34845b6865403621a9ec2ecc84755b920b78"
                    data-submitbutton="submit-button-react"
                    data-lang="en"
                ></div>
                <button type="submit" id="submit-button-react">Submit</button>
            </form>

            {captchaSolution && (
                <div style={{marginTop: '1rem'}}>
                    <h3>Captcha Solution:</h3>
                    <pre>{JSON.stringify(captchaSolution, null, 2)}</pre>
                </div>
            )}
        </div>
  );
}

Result

Loading...

This example demonstrates how to use the ALAN Captcha widget in a React application. For such cases automatic instantiation of the widget is not possible, so we use the AlanCaptcha.widgetUI(...) method to initialize the widget.

Svelte

<script lang="ts">
    import {onMount} from 'svelte';
    import * as AlanCaptcha from '@alancaptcha/widget'

    let alanCaptcha: HTMLDivElement;

    function submit() {
        const widget = AlanCaptcha.widget(alanCaptcha);

        if (widget.isChallengeSolved()) {
            const solution = widget.getLastSolvedChallenge();

            // send solution to your server
            console.log(solution.solutionPayLoad.jwt);
            console.log(solution.solutionPayLoad.solutions);
        }
    }

    onMount(async () => {
        await AlanCaptcha.widgetUI(alanCaptcha);
    });
</script>

<form>
    <div bind:this={alanCaptcha} data-submitbutton="submit-btn-svelte" data-sitekey="YOUR-SITE-KEY"></div>
    <button class="submit-btn-svelte" on:click={submit}>Submit</button>
</form>

This example shows how to use the ALAN Captcha widget in a Svelte application. This is similar to the React example, where we use the AlanCaptcha.widgetUI(...) method to initialize the widget.