Comprendre le Web

Placer un captcha

Un captcha est un test requis pour accéder à certaines fonctionnalités d'un site web, qui consiste à réussir un test qui ne peut être réussi par un robot. Tel que répondre en fonction d'une image contenant des caractéristiques facilement identifiables.

L'utilisation d'un captcha est fréquente sur une page de contact afin de protéger les boîtes de courriel des humains.

Google reCAPTCHA n'est pas le seul dispositif.

Google reCAPTCHA

Requiert l'activation du JS. Ainsi, placé sur une page de contact, l'utilisateur ne pourra envoyer un message que si JS est activé sur son navigateur.

Obtenir sur le site Google reCAPTCHA la paire de clés - publique et privée - correspondant à la version du captcha choisie et au nom de domaine du site web sur lequel le captcha sera utilisé.

Chaque version du reCAPTCHA dispose d'une paire de clés

Version 2

La page affichant le captcha, codée en HTML ou PHP, affichera aussi un "bouton" appelant une page de traitement de la réponse. Classiquement, cette page contient un formulaire (où l'URL de la page de traitement est la valeur de l'attribut action de la balise form.

Étape 1. Dans le head, on placera la ligne : 

    ...
    <script src="https://www.google.com/recaptcha/api.js" async="async" defer="defer"></script>

  </head>

Avec les attributs async et defer, le script sera appelé de manière asynchrone, c'est-à-dire que le recaptcha ne s'affichera qu'après le chargement complet de la page.

reCaptcha V2 checkbox

Étape 2. Pour afficher le reCaptcha V2 checkbox, il faut ajouter cette balise dans le formulaire : 

  <div class="g-recaptcha" data-sitekey="ma clé publique"></div>

Code HTML complet : (ici, dans le fichier : captcha.htm) 

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="url_page_PHP" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>
reCaptcha V2 invisible

Pour un reCaptcha V2 invisible, il faut ajouter ces attributs sur la balise qui déclenche le challenge : 

  <button class="g-recaptcha" data-sitekey="ma clé publique" data-callback='onReCaptchaValid'>
    Envoyer
  </button>

Et, ajouter du code JS.

Il est toujours préférable de mettre le code JS hors d'un fichier HTML.

À la fin du body, on placera la ligne : 

    ...
    <script src="nom du fichier contenant ma fonction.js"></script>
  </body>

Code HTML complet : (ici, dans le fichier : captcha.htm) 

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST" id="form1">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
    <script>captcha.js</script>
  </body>
</html>

Code JS complet : (ici, dans le fichier : captcha.js) 

var onloadCallback = function() {
  grecaptcha.render('id_captcha', {
    'sitekey' : 'ma clé publique'
  });
};

function onSubmit(token) {
  //valid();
  document.getElementById("form1").submit();
}

Souvent le nom du fichier HTML et JS sont identiques (hormis l'extension)

Page traitant la demande

Dans tous les cas (v2 checkbox, v2 invisible ou v3), la page traitant la demande doit recevoir une réponse semblable à : 

03AGdBq25hGdVyKNlurK9d6kY1jvUPhlJyKmYWnGdQcEOI2CjlT9-gvjeIKsjHg99wVoz0-DKFKGKWEu
Mdkzi4JaDKjAyoILZI2ARwL7XquZ7gUjqszLImPxfbS9wUhyHBh1DgLE48Tr-4Nd2pKxFF9cA9hHgCMF
itGKWIXkfkwFUQxYYbxZG7OTRXZrXBQ3VI4e_kfGq30iZLYQ0h9kAp9AEauzk_U7W8xZfbdCg4JaRILa
vE-at_u0b7SdfXYgn1Wt-Ltw58cgXiA6FDP1LLz_pjOXghNYNJ9AS2I0vDi9NPZ_wCDPcTHte_4cTvEY
7Ux8EPDL2Xdqu2VM5ja_6VPqP77kJ4ioB5uYedlCaCWAOyfFcapCw5KFZk4R07js_e2mlon4MiRbf4oH
2Q9m9hVlKm-YGEbeDBqFOGnzdMUOYr9yqlzOByuDpwJgpPKC8gWFbeowIZSZ4O

Cette réponse est la valeur de la variable : $_POST["g-recaptcha-response"]

Code PHP : 

<?php
$response = $_POST["g-recaptcha-response"]; /* obligatoire ! ... */
$secret = ""; /* votre clé privée */
$remoteip = $_SERVER["REMOTE_ADDR"]; /* facultatif */
$url = "https://www.google.com/recaptcha/api/siteverify";

$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, array(
    'secret' => $secret,
    'response' => $response,
    'remoteip' => $remoteip
    ));
$curlData = curl_exec($curl);
curl_close($curl);

$recaptcha = json_decode($curlData, true);

if ($recaptcha["success"]) {

  /* le reste de votre code PHP */

}else{
  echo "Échec"
}

?>

Liens