Tutoriel Captcha maison

Suivre ce topic
Ce topic est suivi par : Personne...
Nobodief

Nobodief Le 31 mars 2016 à 23:40 (Édité le 25 janvier 2019 à 17:50)

Bonsoir, aujourd'hui je souhaite vous faire part d'un petit script captcha maison, alors bien-sur ce n'est pas le captcha de google, mais pour un petite site cela sera je pense suffisant.Commençons par notre base de données, nous allons en créer une pour pouvoir en rajouter par la suite via une interface administrative qui sera plus pratique que d'écrire dans le code à chaque fois.

Nous allons créer une table avec pour nom captcha et lui attribuer 3 colonnes (ID en clef primaire et Auto-increment), (captcha_img en varchar 255 pour l'image) et (captcha_response en varchar 255 pour la réponse).

Nous sommes parties, avant toutes choses nous allons créer une classe qui servira à faire appel à notre captcha n'importe où sur notre site avec deux fonction, une pour sélectionner l'id du captcha qui nous servira pour la suite à identifier le captcha visible par l'utilisateur et une function pour afficher notre captcha, pour cela nous créerons une page (class.php)
class Captcha {   
   static function select($id, $element) {
   global $bdd;
       $SelectCaptcha = $bdd->prepare('SELECT * FROM captcha WHERE id = ?');
        $SelectCaptcha->execute(array($value));
        $SelectCaptcha = $SelectCaptcha->fetch();
       $SelectCaptcha = $SelectCaptcha[$element];
       return $SelectCaptcha;
   }

    static function GetCaptcha() {
    global $bdd;
      $mycaptcha = $bdd->query('SELECT * FROM captcha ORDER BY RAND() LIMIT 1'); // sélection de la table avec affichage aléatoire et limitation de 1.
       while($captcha = $mycaptcha->fetch()) {  
           echo '<img src="'.$captcha['captcha_img'].'"></img>
            <input name="captchaID" type="hidden" value="'$captcha['id'].'"></input> // id du captcha    
            <input name="my_captcha" type="text"  placeholder="Recopier le code de l\'image"></input>'; 
        }      
   }
   
}  
N'oubliez pas de créer des images à afficher pour vos utilisateurs, évitez les block avec les balises html/css, utiliser des images avec votre code identique à la valeur captcha_response.

Nous allons utiliser le code php d'inscription de PrimFx pour intégrer notre captcha, c'est parti ! :

<?php
$bdd = new PDO('mysql:host=127.0.0.1;dbname=espace_membre', 'root', '');
require_once('class.php'); // On appel le fichier class.php 

if(isset($_POST['forminscription'])) {
   $pseudo = htmlspecialchars($_POST['pseudo']);
   $mail = htmlspecialchars($_POST['mail']);
   $mail2 = htmlspecialchars($_POST['mail2']);
   $mdp = sha1($_POST['mdp']);
   $mdp2 = sha1($_POST['mdp2']);
   $myCaptchaID = intval($_POST['captchaID']); // récupération de l'ID actuel du captcha dans notre input invisible.
   $MyCaptcha = htmlspecialchars($_POST['my_captcha']); // récupération de la réponse de l'utilisateur.
   
   if(!empty($_POST['pseudo']) AND !empty($_POST['mail']) AND !empty($_POST['mail2']) AND !empty($_POST['mdp']) AND !empty($_POST['mdp2'])) {
      $pseudolength = strlen($pseudo);
     $CaptchaSelect = Captcha::select($myCaptchaID, 'response'); // récupération de la réponse de notre captcha actuel.
      if($pseudolength <= 255) {
         if($mail == $mail2) {
            if(filter_var($mail, FILTER_VALIDATE_EMAIL)) {
               $reqmail = $bdd->prepare("SELECT * FROM membres WHERE mail = ?");
               $reqmail->execute(array($mail));
               $mailexist = $reqmail->rowCount();
               if($mailexist == 0) {
                  if($mdp == $mdp2) {
               if($MyCaptcha == $CaptchaSelect) { // On compare la réponse de notre captcha avec celle de l'utilisateur.
                     $insertmbr = $bdd->prepare("INSERT INTO membres(pseudo, mail, motdepasse) VALUES(?, ?, ?)");
                     $insertmbr->execute(array($pseudo, $mail, $mdp));
                     $erreur = "Votre compte a bien été créé ! <a href=\"connexion.php\">Me connecter</a>";
                    
               } else {
                  $erreur = "Captcha invalide"; // Si la réponse est fausse ont retourne l'erreur.
               }
               
              } else {
                     $erreur = "Vos mots de passes ne correspondent pas !";
                  }
              
               } else {
                  $erreur = "Adresse mail déjà utilisée !";
               }
            } else {
               $erreur = "Votre adresse mail n'est pas valide !";
            }
         } else {
            $erreur = "Vos adresses mail ne correspondent pas !";
         }
      } else {
         $erreur = "Votre pseudo ne doit pas dépasser 255 caractères !";
      }
   } else {
      $erreur = "Tous les champs doivent être complétés !";
   }
}
?>
La partie HTML :

<?php require_once ('class.php'); ?> // On appelle le fichier class.php pour afficher le captcha.<html>
   <head>
      <title>TUTO PHP</title>
      <meta charset="utf-8">
   </head>
   <body>
      <div align="center">
         <h2>Inscription</h2>
         <br /><br />
         <form method="POST" action="">
            <table>
               <tr>
                  <td align="right">
                     <label for="pseudo">Pseudo :</label>
                  </td>
                  <td>
                     <input type="text" placeholder="Votre pseudo" id="pseudo" name="pseudo" value="<?php if(isset($pseudo)) { echo $pseudo; } ?>" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mail">Mail :</label>
                  </td>
                  <td>
                     <input type="email" placeholder="Votre mail" id="mail" name="mail" value="<?php if(isset($mail)) { echo $mail; } ?>" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mail2">Confirmation du mail :</label>
                  </td>
                  <td>
                     <input type="email" placeholder="Confirmez votre mail" id="mail2" name="mail2" value="<?php if(isset($mail2)) { echo $mail2; } ?>" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mdp">Mot de passe :</label>
                  </td>
                  <td>
                     <input type="password" placeholder="Votre mot de passe" id="mdp" name="mdp" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mdp2">Confirmation du mot de passe :</label>
                  </td>
                  <td>
                     <input type="password" placeholder="Confirmez votre mdp" id="mdp2" name="mdp2" />
                  </td>
               </tr>
               <tr>
                  <td align="right">
                     <label for="mdp2">Recopier le code :</label>
                  </td>
                  <td>
                     <?php Captcha::GetCaptcha(); ?> // On affiche le captcha.
                  </td>
               </tr>            
               <tr>
                  <td></td>
                  <td align="center">
                     <br />
                     <input type="submit" name="forminscription" value="Je m'inscris" />
                  </td>
               </tr>
            </table>
         </form>
         <?php
         if(isset($erreur)) {
            echo '<font color="red">'.$erreur."</font>";
         }
         ?>
      </div>
   </body>
</html>
Voilà normalement tout est bon pour votre captcha, si des bugs sont présents n'hésitez pas à l'indiquer en réponse, cordialement Santar.
TheFlameflo

TheFlameflo Le 1 avril 2016 à 02:31

Salut !
Premièrement, merci pour le petit tuto, c'est super, moi qui cherchait un bon système captcha !
Je trouve ça super malgré le fait qu'on ne puisse pas créer un petit script qui fait l'image tout seul ! :(
Merci pour tout ! 😀
Nobodief

Nobodief Le 1 avril 2016 à 06:06 (Édité le 1 avril 2016 à 07:23)

Merci, pour ton petit système de génération d'image automatique, créer une nouvelle page (captcha_img.php) :
<?php
header ("Content-type: image/png"); // Tout le contenu de captcha_img.php sera traité en image.
$CaptchaImg = imagecreate(200,50); // Création de l'image.
$CaptchaColor = imagecolorallocate($CaptchaImg, 39, 39, 0); // Couleur du fond de l'image (toujours en première position en RGB).
$CaptchaTextColor = imagecolorallocate($CaptchaImg, 89, 89, 89); // Couleur du texte.
imagestring($CaptchaImg, 15, 67, 15, htmlspecialchars($_GET['response']), $CaptchaTextColor); // Intégration du texte sur l'image (Taille de la police, position horizontal, position vertical, texte et couleur, nous utilisons une méthode get pour afficher notre code à saisir).
imagepng($CaptchaImg); // Tout est bon, création de l'image en png.
?>
Puis modifie le GetCaptcha dans class.php :

static function GetCaptcha() {    
global $bdd;
$mycaptcha = $bdd->query('SELECT * FROM captcha ORDER BY RAND() LIMIT 1'); // sélection de la table avec affichage aléatoire et limitation de 1.
   while($captcha = $mycaptcha->fetch()) {  
      echo '<img src="captcha_img.php?response='.$captcha['captcha_response'].'"></img>
            <input name="captchaID" type="hidden" value="'$captcha['id'].'"></input> // id du captcha    
            <input name="my_captcha" type="text"  placeholder="Recopier le code de l\'image"></input>'; 
  }
}
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte