Aller au contenu principal

2. Ajouter le widget

✅ Un exemple complet et idéal de l'interface utilisateur fonctionnel se trouve au bas de cette page.

En outre, vous pouvez trouver des exemples Angular, React et Vue ici.

Vérifier les adresses e-mail indépendamment

Si vous souhaitez seulement vérifier des adresses e-mail sans CAPTCHA, vous n'avez pas besoin du widget. Pour plus d'informations, consultez "Vérification des adresses e-mail".

Ajoutez le widget Zencaptcha à votre page Web​

Pour intégrer le widget zencaptcha dans une page spécifique de votre site web, telle que la page de connexion, la page d'enregistrement, la page de contact, la page de newsletter, etc., vous devez ajouter deux petits morceaux de code côté client pour rendre le widget captcha.

  1. Copiez le premier extrait de code et collez l'extrait de code dans la section <head> de votre code HTML pour la page où vous voulez afficher le widget. (Il peut également être placé immédiatement après le conteneur zenc-captcha - que vous ajouterez au point 2).
Dans votre html:
<script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit() async defer></script>
  1. Copiez le deuxième extrait de code et collez-le dans votre code HTML à l'endroit où vous souhaitez que le widget apparaisse. Vous pouvez intégrer le conteneur .zenc-captcha dans un formulaire HTML ou à l'intérieur de
    pour bénéficier de fonctions comme data-start="auto" ou data-start="focus". Si un captcha est résolu avec succès, un token (la solution) caché est automatiquement ajouté à votre formulaire, que vous devez ensuite envoyer à votre serveur pour vérification. Vous pouvez le récupérer côté serveur avec le paramètre POST zenc-captcha-solution.
Dans votre html:
<div class="zenc-captcha" data-sitekey="AJOUTEZ-VOTRE-SITEKEY-ICI"></div>
N'oubliez pas ceci

Remplacez AJOUTEZ-VOTRE-SITEKEY-ICI de l'extrait ci-dessus par votre propre sitekey.

Exemple complet de l'interface utilisateur​

Voici un exemple complet de la manière dont Zencaptcha peut être utilisé pour protéger un formulaire d'inscription contre les abus et le spam. Lors de l'envoi du formulaire, le jeton zenc-captcha-solution est ajouté aux autres données POST après la résolution complète du captcha.

<html>
  <head>
    <title>Zencaptcha Demo 1</title>
    <script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit()" async defer></script>
  </head>
  <body>
    <form action="" method="POST">
      <input type="text" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Mot de passe" />
      <div class="zenc-captcha" data-sitekey="AJOUTEZ-VOTRE-SITEKEY-ICI"></div>
      <br />
      <input type="submit" value="Soumettre" />
    </form>
  </body>
</html>

Solution Callback​

Meilleures pratiques

Empêchez les utilisateurs de soumettre le formulaire en désactivant le bouton de soumission jusqu'à ce que le CAPTCHA ait été complété avec succès. Vous pouvez ajouter data-callback="myCallback" au conteneur zenc-captcha. Elle sera appelée immédiatement et automatiquement lorsque le captcha sera complété.

`<div class="zenc-captcha" data-sitekey="AJOUTEZ-VOTRE-SITEKEY-ICI" data-callback="zenCallback"></div>`

et obtenir la solution (jeton) en Javascript comme ceci :

Javascript
function zenCallback(solution) {
    //ici, vous devez activer le bouton de soumission
    console.log("Captcha solution is" + solution);
    //vous pouvez maintenant envoyer la "solution" (le jeton) avec les autres données de l'utilisateur à votre backend
}

Obtenir la réponse du Captcha​

Voir le point "Démarrer, réinitialiser et détruire le widget" ci-dessous. Vous pouvez récupérer le token (la solution du CAPTCHA) avec l'exemple callback zenCallback ci-dessus ou simplement le récupérer si vous l'avez besoin, comme ça :

Javascript
zencap.getResponse();
Autres valeurs CAPTCHA possibles

Il y a 6 valeurs CAPTCHA possibles si la solution n'existe pas encore, si elle a expiré, si elle est en cours de chargement ou s'il y a eu une autre erreur : NOTSTARTED, INCONSISTENT, ERROR, LOADING, NOTFINISHED, EXPIRED. Vous pouvez utiliser cela pour n'envoyer la solution à votre backend que si la solution ne correspond à aucune de ces valeurs. (Voir Zencaptcha Demo 2 en bas de cette page)

Démarrer, réinitialiser et détruire le widget​

Si vous voulez démarrer le widget de manière programmatique ou le réinitialiser, vous ne devez pas oublier à ajouter onload="zencaptchaInit()" au script.

Modifiez votre html:
<script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit()" async defer></script>

Dans votre javascript: Vous pouvez démarrer le widget avec zencap.start(); et le réinitialiser avec zencap.reset();. Vous pouvez obtenir la solution avec zencap.getResponse();. Vous pouvez détruire le widget avec zencap.destroy();. La destruction du widget supprime le widget et tous les éléments du DOM et met fin à tous les processus Zencaptcha en cours.

Exemple idéal de front-end​

Voici un exemple idéal complet d'utilisation de Zencaptcha dans le front-end, en ce sens que la solution est récupérée par le CAPTCHA et que la solution et les autres données ne sont envoyées au back-end que lorsque le CAPTCHA a terminé son processus de vérification. En outre, le widget est réinitialisé s'il a été vérifié côté serveur mais qu'une erreur s'est produite. L'utilisateur doit alors cliquer à nouveau sur le widget pour prouver qu'il ne s'agit pas d'un robot.

<!DOCTYPE html>
  <head>
    <title>Zencaptcha Demo 2</title>
    <script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit()" async defer></script>
  </head>
<body>
  <h1>Connexion</h1>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" required><br><br>
    <label for="password">Mot de passe:</label>
    <input type="password" id="password" required><br><br>
    <div class="zenc-captcha" data-sitekey="SITEKEY" data-callback="zenCallback"></div>
    <input type="button" value="Envoyer" onclick="sendData()">
  </form>
</body>
</html>
<script>
    function zenCallback(solution) {
        //Facultatif : vous pouvez rendre le bouton "Envoyer" cliquable maintenant - Sinon, vous pouvez bien sûr rendre le bouton cliquable dès le début et afficher un avertissement à l'utilisateur si aucune solution n'est trouvée, comme ci-dessous dans la fonction sendData().
        //Vous pouvez également recevoir la solution (token) comme suit : let token = solution ;
    }

    function sendData() {
      var email = document.getElementById("email").value;
      var password = document.getElementById("password").value;

      var zencaptchatoken = zencap.getResponse(); //Abrufen der CAPTCHA-Lösung
      if(zencaptchatoken=="NOTSTARTED" || zencaptchatoken=="NOTFINISHED" || zencaptchatoken=="EXPIRED" || zencaptchatoken=="INCONSISTENT" || zencaptchatoken=="ERROR" || zencaptchatoken=="LOADING"){
          //ne pas continuer, car le token issu de la vérification n'est pas encore prêt ou l'utilisateur n'a pas encore terminé la vérification - Vous pouvez afficher un avertissement ici.
          alert("Verification not completed");
          return;
      }

      var data = {
        email: email,
        password: password,
        token: zencaptchatoken //Envoyez la solution Zencaptcha (token) à votre backend
      };
      
      // Envoyez les données avec le token à votre serveur backend, où vous devez faire un appel API à /siteverify (notre serveur) pour vérifier la validité du token.
      fetch('http://your-backend-url.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      .then(function(response) {
        if (response.ok) {
          alert("Connexion réussie");
        } else {
          alert("Échec de la connexion");
          zencap.reset(); //le widget est réinitialisé, l'utilisateur doit donc refaire la vérification
        }
      })
      .catch(function(error) {
        console.log(error);
      });
    }
  </script>