IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Langage PHP Discussion :

Validation du code d'un captcha


Sujet :

Langage PHP

  1. #1
    Membre éprouvé
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 630
    Points : 1 029
    Points
    1 029
    Par défaut Validation du code d'un captcha
    Bonjour à toutes et à tous,

    J'ai crée un système de captcha dans un formulaire d'inscription, en couplant la validation de ce formulaire avec du JSON et de l'Ajax.
    Par contre le code que je saisi dans le champ du captcha est identique à celui de l'image mais la valeur du champ bien que prise en compte car je récupère la valeur dans mon $_POST n'est pas prise en compte avec le code présent sur l'image.

    #image.php (la création de l'image captcha)
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
    <?php
    	session_start(); // on démarre une session pour récupérer les variables de session	
    	// C'est le fichier dynamique image.php et non button.png qui est appelé pour afficher l'image,
    	// on envoie donc un en-tête HTTP au navigateur via header() pour qu'il considère
    	// que image.php est une image de type PNG.	
    	header("Content-type: image/png"); 
    	//header('Cache-control: no-cache');
    	$length = 6; // on veut un code ayant 6 caractères
    	$chars = strtoupper(substr(str_shuffle('23456789abcdefghjklmnpqrstuvwxyz'), 0, $length)); // les caractères prêtant à confusion ont été enlevés
    	$code = ''; // pour stocker le code que l'on va obtenir
     
    	// On veut obtenir un nombre ayant $length fois un caractère de $chars pris au hasard
    	for($i=0;$i<$length;$i++) {
    		// on concatène chaque caractères les uns à la suite des autres en utilisant le .
    		$code .= $chars{ mt_rand( 0, strlen($chars) - 1 ) };
    		//$code = md5($code);	// si on crypte le code les caractères prêtant à confusion seront présents
    		$code = substr($code, 0, $length); // on le récupère sur $length caractères		
    	} // fin boucle for()
    	//echo $code // pour le test
    	$_SESSION['code'] = $code; // pour récupérer le code dans la page index.php	
    	//$string = $_GET['text']; // pour récupérer la valeur passée au script via les paramètres URL
    	// Creation de l'image button.png située dans le répertoire img
    	$image = imagecreatefrompng('img/button.png');	
    	// On précise la couleur du texte de l'image
    	$texte_image = imagecolorallocate($image, 0, 48, 128);
    	// On utilise notre police personnalisée
    	$font = 'polices/ARLRDBD.ttf';
    	// On génère un nombre aléatoire pour une rotation entre -15 and 15 degrés
    	$rotate = rand(-5, 5);
    	// On dessine un texte avec une police TrueType
    	imagettftext($image, 16, $rotate, 11, 31, $texte_image, $font, $code);
    	 // .. et on envoie notre image PNG au navigateur.
    	imagepng($image);
    	// L'image ayant été envoyée, on libère toute la mémoire qui lui est associée via imagedestroy()
    	imagedestroy($image);		
    ?>


    Merci d'avance.
    Transact.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    Par contre le code que je saisi dans le champ du captcha est identique à celui de l'image mais la valeur du champ bien que prise en compte car je récupère la valeur dans mon $_POST n'est pas prise en compte avec le code présent sur l'image.
    C'est un jeu : "à vous de placer les signes de ponctuations" ?

  3. #3
    Membre éprouvé
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 630
    Points : 1 029
    Points
    1 029
    Par défaut
    Je me répète plus clairement.

    Le code que je saisi dans le champ du captcha est identique à celui de l'image du captcha.
    La valeur du champ captcha est récupérée par la variable $_POST, par contre il semblerai qu'aucune correspondance ne soit faite entre le code saisi et le code présent sur l'image du captcha.

    En espérant avoir été un poil plus clair.

  4. #4
    Invité
    Invité(e)
    Par défaut
    Si tu pouvais poster uniquement la partie du code concernant le captcha, ce serait mieux (plus clair).
    - Sans oublier la partie "JavaScript/Ajax" et formulaire.
    - en expliquant ce qui fait quoi et quand (enchainement des actions)

    As-tu mis des var_dump/alert pour vérifier la transmission des données et leurs valeurs ?

  5. #5
    Membre éprouvé
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 630
    Points : 1 029
    Points
    1 029
    Par défaut
    As-tu mis des var_dump/alert pour vérifier la transmission des données et leurs valeurs ?
    Firebug permet de voir que toutes les données ont été postées avec les bonnes valeurs (onglet POST) et onglet JSON permet de voir que du JSON est envoyé.

    #afficherZoneRegiser.js permet d'afficher la fenêtre d'inscription et les différents messages en fonctions des saisies de l'utilisateur (le captcha est présent dans ce code)
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    /** script traitant de l'affichage de la zone d'inscription */
    $(document).ready(function() {
    	$("#inscription").click(function() {
    		$("#inscriptionForm").fadeIn("fast");
    		//$("#annonceForm").hide(); // inutile car pas encore inscrit sur le site 
    		// pour la soumission du formulaire
    		$("#inscriptionForm").submit(function(e) {
    			// empêcher le navigateur de soumettre lui-même le formulaire
    			// (qui consiste à appeler la page action du formulaire)
     			e.preventDefault();
    			// pendant la soumission on affiche le loader d'attente Ajax
    			$("#loader").show();
    			// pour que l'utilisateur puisse rafraichir le captcha
    			$("#refreshimg").click(function() {
    				alert("bonjour");
    			});
     
    			// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
    			var url = $(this).attr('action');
    			var pseudo = $(this).find("input[name=pseudo]").val();
    			var password = $(this).find("input[name=password]").val();
    			var verifPassword = $(this).find("input[name=verifPassword]").val();
    			var anneeNaiss = $(this).find("input[name=anneeNaiss]").val();
    			var email = $(this).find("input[name=email]").val();
    			var telephone = $(this).find("input[name=telephone]").val();
    			var masquerTel = $(this).find('input:radio[name=masquerTel]:checked').val();	
    			var region = $(this).find("select[name=region]").val();	
    			var captcha = $(this).find("input[name=captcha]").val();			 
     
    			// lors de l'appel Ajax la référence #inscriptionForm sera perdue il faut donc la réaffecter			
    			var form = $(this);	
    			// pour récupérer la valeur des champs nous utilisons la paire {clé:valeur}
    			// préciser à jQuery que l'on veut le type de sortie JSON en dernier paramètre de $.post()
    			// Et tu devrais entourer le nom des variables quand tu les passes 
    			$.post(url, 
    				{'pseudo':pseudo, 'password':password, 'verifPassword':verifPassword, 'anneeNaiss':anneeNaiss, 
    					'email':email, 'telephone':telephone, 'masquerTel':masquerTel, 'region':region, 'captcha':captcha},
    				function(data) {
    					// une fois les données soumises on cache le loader
    					$("#loader").hide();
    					// si tout est ok dans le formulaire //
    					if(data.erreur=="ok") {
    						console.log(data.erreur); // pour le test
    						$('#inscriptionSent').show("fast").text(data.retour);
    						$('#inscriptionSent').fadeOut(6000);
    						$("#inscriptionForm").fadeOut(6000);
    					} // fin if(data.erreur=="ok")
    					/** le cas du pseudo **/
    					if(data.erreurPseudo) {
    						console.log(data.erreurPseudo); // pour le test
    						$('#formErreur').show("fast").text(data.erreur);
    						$('#inscriptionSent').show("fast").text(data.erreurPseudo);												
    						$('#inscriptionSent').fadeOut(3000);
    						$('#formErreur').fadeOut(3000);
    						form.find("input[name=pseudo]").val('').focus();																						 					
    					} // fin if(data.erreurPseudo)		
    					/** le cas du mot de passe **/
    					if(data.erreurPassword) {
    						console.log(data.erreurPassword); // pour le test						
    						$('#formErreur').show("fast").text(data.erreur);
    						$('#inscriptionSent').show("fast").text(data.erreurPassword);
    						$('#inscriptionSent').fadeOut(3000);
    						$('#formErreur').fadeOut(3000);
    						form.find("input[name=password]").val('').focus();	
    						form.find("input[name=verifPassword]").val('');
    					} // fin if(data.erreurPassword)
    					/** le cas de l'année de naissance **/
    					if(data.erreurAnneeNaiss) {						
    						console.log(data.erreurAnneeNaiss); // pour le test						
    						$('#formErreur').show("fast").text(data.erreur);
    						$('#inscriptionSent').show("fast").text(data.erreurAnneeNaiss);
    						$('#inscriptionSent').fadeOut(3000);
    						$('#formErreur').fadeOut(3000);
    						form.find("input[name=anneeNaiss]").val('').focus();
    					} // fin if(data.erreurPassword)
    					/** le cas de l'adresse email **/
    					if(data.erreurEmail) {	
    						console.log(data.erreurEmail); // pour le test						
    						$('#formErreur').show("fast").text(data.erreur);
    						$('#inscriptionSent').show("fast").text(data.erreurEmail);
    						$('#inscriptionSent').fadeOut(3000);
    						$('#formErreur').fadeOut(3000);
    						form.find("input[name=email]").val('').focus();
    					} // fin if(data.erreurEmail)
    					/** le cas du téléphone **/
    					if(data.erreurTel) {	
    						console.log(data.erreurTel); // pour le test						
    						$('#formErreur').show("fast").text(data.erreur);
    						$('#inscriptionSent').show("fast").text(data.erreurTel);
    						$('#inscriptionSent').fadeOut(3000);
    						$('#formErreur').fadeOut(3000);
    						form.find("input[name=telephone]").val('').focus();	
    					} // fin if(data.erreurTel)
    					/** le cas du captcha **/
    					if(data.erreurCaptcha) {	
    						console.log(data.erreurCaptcha); // pour le test						
    						$('#formErreur').show("fast").text(data.erreur);
    						$('#inscriptionSent').show("fast").text(data.erreurCaptcha);
    						$('#inscriptionSent').fadeOut(3000);
    						$('#formErreur').fadeOut(3000);
    						form.find("input[name=captcha]").val('').focus();	
    					} // fin if(data.erreurCaptcha)				
    			}, "json"); // fin $.post()								
    		}); // fin $("#inscriptionForm").submit()					
     		// on vide les champs du formulaire SAUF le bouton radio et celui de soumission
    		$(':input','#inscriptionForm').not(':submit, :radio').val('');				
    	}); // fin $("#inscription").click()
    }); // fin $(document)

    #inc_inscription.php le formulaire d'inscription qui est un include dans le fichier index.php, image.php?text est présent comme valeur de src dans une balise img
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    <div class="boite">
    	<div id="inscriptionFormContainer" >
    		<form name="inscription" id="inscriptionForm" action="includes/inc_ajoutMembre.php" method="post">
    			<fieldset>	
    				<span id="formErreur"></span><br/>		
    				<label for="login">Pseudo </label><em>*</em>
    				<input id="login" name="pseudo" size="35" class="required" /><br/>
    				<label for="password">Mot de passe</label><em>*</em>
    				<input id="pass" name="password" size="35" class="required" minlength="8" type="password"/><br/>
    				<label for="verif_password">Confirmez le mot de passe</label><em>*</em>
    				<input id="verif_password" name="verifPassword" size="35" class="equalTo" minlength="8" type="password"/><br />
    				<label for="anneeNaiss">Ann&eacute;e de naissance </label><em>*</em>
    				<input id="anneeNaiss" name="anneeNaiss" placeholder="e.g : 1984" size="35" class="required" maxlength="4" /><br />
    				<label for="email">Email </label><em>*</em>
    				<input id="email" type="email" name="email" size="35" class="email" class="required" placeholder="Email" /><br />
    				<label for="telephone">T&eacute;l&eacute;phone</label><em>*</em>
    				<input id="telephone" type="telephone" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" 
    					name="telephone" size="35" class="required" /><br />
    				<label for="masquerTel">Masquer num&eacute;ro dans l'annonce</label>
    				<input type="radio" name="masquerTel" value="oui" id="oui"/><span>Oui</span>
    				<input type="radio" name="masquerTel" value="non" id="non" checked="checked" /><span>Non</span><p>
    				<label for="region">R&eacute;gion</label><em>*</em>								
     
    				<select id="region" name="region" size="1" class="required" style="width:180px">	
    				<option value="Aquitaine" selected="selected" >Aquitaine </option>								
    				<option value="Alsace">Alsace </option>
    				<!--<option value="Aquitaine">Aquitaine </option>-->
    				<option value="Auvergne">Auvergne</option>
    				<option value="Basse-Normandie">Basse-Normandie</option>
    				<option value="Bourgogne">Bourgogne</option>
    				<option value="Bretagne">Bretagne</option>
    				<option value="Centre">Centre</option>
    				<option value="Champagne-Ardenne">Champagne-Ardenne</option>
    				<option value="Corse">Corse</option>
    				<option value="Franche-Comte">Franche-Comt&eacute;</option>
    				<option value="Haute-Normandie">Haute-Normandie</option>
    				<option value="Ile-de-France">Ile-de-France</option>
    				<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
    				<option value="Limousin">Limousin</option>
    				<option value="Lorraine">Lorraine</option>
    				<option value="Midi-Pyrenees">Midi-Pyr&eacute;n&eacute;es</option>
    				<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
    				<option value="Pays_de_la_Loire">Pays de la Loire</option>
    				<option value="Picardie">Picardie</option>
    				<option value="Poitou-Charentes">Poitou-Charentes</option>
    				<option value="Provence-Alpes-Cote_Azur">Provence-Alpes-C&ocirc;te d'Azur</option>
    				<option value="Rhone-Alpes">Rh&ocirc;ne-Alpes</option>
    				</select><br />
    				<label for="captcha">Veuillez saisir le code demand&eacute;</label><em>*</em>				
    				<input id="captcha" name="captcha" class="required" maxlength="6" /><br />				
    				<img src="image.php?text" style="height:36px;width:140px;padding-left:1.3em;padding-top:2px;clear:both;" alt="Captcha image">			
    				<p><span id="loader" style="display:none;"><img src="img/loader.gif" alt="loader" /></span></p>
    				<span id="inscriptionSent"></span><br />			
    				<input type="submit" name="soumettre" value="Envoyer"/><br />			
    				<label for="obligatoire">* Champs obligatoires.</label> 
    			</fieldset>				
    		</form><!-- inscriptionForm -->		
    	</div><!-- inscriptionFormContainer -->
    </div><!-- boite -->

  6. #6
    Membre éprouvé
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 630
    Points : 1 029
    Points
    1 029
    Par défaut
    Oups! ...
    En faisant un var_dump($_POST) dans index.php je ne récupère rien du tout!

  7. #7
    Membre éprouvé
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 630
    Points : 1 029
    Points
    1 029
    Par défaut
    [Résolu]
    En fait dans le script Javascript/Ajax il fallait ajouter
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var captcha = $(this).find("input[name=captcha]").val();
    Les étapes suivantes on été effectuées :
    - Modifier le callback Ajax pour récupérer la réponse du serveur lors de l'envoi de la requête HTTP
    - Modifier le code PHP EN ajoutant une nouvelle entrée dans le tableau JSON

    Merci encore.
    Transact.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [W3C] Validation du code avec W3C
    Par Ladgalen dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 14/10/2008, 14h12
  2. Réponses: 2
    Dernier message: 07/10/2008, 13h45
  3. Validation du code js
    Par nicerico dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 29/06/2007, 13h51
  4. Validation de code postal au moment de la saisie
    Par cerede2000 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 23/05/2007, 12h43
  5. [Utilisation] Validation du code à la BSD avant intégration
    Par HNT dans le forum Subversion
    Réponses: 8
    Dernier message: 15/11/2006, 09h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo