Kevin Powell - Community•2y ago

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> 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() when all JS has loaded, right? **EDIT: The problem is that 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.

1 Reply

JWode•2y ago

Fingers crossed their synchronous implementation seems to be working, but honestly, these "docs" are bs

Gaming

Programming

Can somebody help me understand these docs please?