Aller au contenu

Exemple de client frontend HTML

Le code ci-dessous est un exemple minimal démontrant comment inclure le bundle Prosopo Procaptcha dans une page HTML sans vérifications côté serveur. Une version plus complète de l’exemple de bundle client peut être trouvée ici. Vous pouvez l’exécuter en conjonction avec la démo client-example-server pour voir l’expérience complète de bout en bout.

Démarrage rapide

Titre de la section Démarrage rapide

Enregistrez ce fichier sur votre machine locale et ouvrez-le dans un navigateur pour voir le bundle Prosopo Procaptcha en action. N’oubliez pas de remplacer l’espace réservé <YOUR SITE KEY HERE> par votre propre clé de site. Vous pouvez l’obtenir en vous connectant au portail 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>