Salta ai contenuti

Esempio di client frontend HTML

Il codice qui sotto è un esempio minimale che dimostra come includere il bundle Prosopo Procaptcha in una pagina HTML senza controlli lato server. Una versione più completa dell’esempio client bundle può essere trovata qui. Può eseguirlo in combinazione con la demo client-example-server per vedere l’esperienza end-to-end completa.

Avvio rapido

Salvi questo file sulla sua macchina locale e lo apra in un browser per vedere il bundle Prosopo Procaptcha in azione. Ricordi di sostituire il segnaposto <YOUR SITE KEY HERE> con la sua site key. Può ottenerla effettuando l’accesso al portale Prosopo.

<!doctype html>
<html lang="en">
    <head>
        <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
        <title>Procaptcha demo: Simple page</title>
        <script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
    </head>
    <body>
        <div class="mui-container">
            <form action="?" class="mui-form">
                <legend>Login</legend>
                <div class="mui-textfield mui-textfield--float-label">
                    <label>Email Address</label>
                    <input type="email" required />
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <label>Password</label>
                    <input type="password" required />
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <div id="procaptcha-container"></div>
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <!-- Dev sitekey -->
                    <div
                        class="procaptcha"
                        data-theme="light"
                        data-sitekey="<YOUR SITE KEY HERE>"
                    ></div>
                </div>
                <input type="submit" class="mui-btn mui-btn--raised" />
            </form>
        </div>
        <script type="module">
            // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
            import { render } from './assets/procaptcha.bundle.js'

            // Define a callback function to be called when the CAPTCHA is verified
            function onCaptchaVerified(output) {
                console.log('Captcha verified, output: ' + JSON.stringify(output))
            }

            // Get the Element using elementId
            const captchaContainer = document.getElementById('procaptcha-container')
            // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
            render(captchaContainer, {
                siteKey: '<YOUR SITE KEY HERE>',
                theme: 'dark',
                callback: onCaptchaVerified,
            })
        </script>
    </body>
</html>