1 reply

Can somebody help me understand these docs please?

So I think I've discovered that my problems with a 3rd party captcha service - Turnstile - are down to a race condition, and so I'm trying to explicitly render the challenge element once I know the page has loaded.

Initially the docs (https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#explicitly-render-the-turnstile-widget) tell me to insert the async js script tag:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>

It then says I will:

have access to a global function with multiple callback options you can customize. For the following function to work properly, the page must contain an HTML element with ID example-container. The challenge can be invoked explicitly with the following JavaScript snippet:

window.onloadTurnstileCallback = function () {
    turnstile.render('#example-container', {
        sitekey: '<YOUR_SITE_KEY>',
        callback: function(token) {
            console.log(`Challenge Success ${token}`);
        },
    });
};

window.onloadTurnstileCallback = function () {
    turnstile.render('#example-container', {
        sitekey: '<YOUR_SITE_KEY>',
        callback: function(token) {
            console.log(`Challenge Success ${token}`);
        },
    });
};

So this is effectively creating a function that will call

turnstile.render()

turnstile.render()

when all JS has loaded, right?

**EDIT: The problem is that

onloadTurnstileCallback

onloadTurnstileCallback

doesn't seem to be called every time

Client-side rendering · Cloudflare Turnstile docs

You can initialize and customize the Turnstile widget on your web page via implicit or explicit rendering.

KP-C

Kevin Powell - Community•4y ago•

1 reply

JWode

Can somebody help me understand these docs please?

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>

It then says I will:

have access to a global function with multiple callback options you can customize. For the following function to work properly, the page must contain an HTML element with ID example-container. The challenge can be invoked explicitly with the following JavaScript snippet:

window.onloadTurnstileCallback = function () {
    turnstile.render('#example-container', {
        sitekey: '<YOUR_SITE_KEY>',
        callback: function(token) {
            console.log(`Challenge Success ${token}`);
        },
    });
};

window.onloadTurnstileCallback = function () {
    turnstile.render('#example-container', {
        sitekey: '<YOUR_SITE_KEY>',
        callback: function(token) {
            console.log(`Challenge Success ${token}`);
        },
    });
};

So this is effectively creating a function that will call

turnstile.render()

turnstile.render()

when all JS has loaded, right?

**EDIT: The problem is that

onloadTurnstileCallback

onloadTurnstileCallback

doesn't seem to be called every time

Client-side rendering · Cloudflare Turnstile docs

You can initialize and customize the Turnstile widget on your web page via implicit or explicit rendering.

Can somebody help me understand these docs please?

Can somebody help me understand these docs please?

Similar Threads

Similar Threads

Similar Threads