Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: jeanguyT, Jerem971
Auteur Sujet: Intégration reCAPTCHA

jeanguyT

Messages: 4

Bonjour,
J'ai suivi avec beaucoup d'intérêt votre tuto "INTÉGRER GOOGLE RECAPTCHA À SES FORMULAIRES" que je trouve bien explicite. J'ai créé il y a près de 10 ans un site (avec Dreamweaver) pour une de mes amies qui rencontre qqs problèmes de spam sur son compte mail. J'ai tenté d'intégrer Google reCAPTCHA dans le formulaire existant mais un problème de mise en forme persiste : http://sylvianeleblond.fr/contact/index.php.
Le bouton envoyer est masqué et les liens "Confidentialité - Conditions" se positionnent à droite en dehors du cadre. Pourriez-vous m'aider pour trouver une solution.
Cordialement
Publicité

jeanguyT

Messages: 4

J'ai supprimé le css iframe dans la page concernée. C'est OK
Cordialement

Jerem971

Messages: 695

Hello @jeanguyT,

Tout d'abord, tout développeur à son navigateur à jour pour prendre en charge les dernières versions, vérifie donc que tes navigateurs soient à jour. Je suis aller sur la page en question, tu as des variables indéfinies et quelques autres messages d'erreurs/avertissements. Je te laisse donc regarder depuis ton navigateur appuie sur F12 pour avoir accès aux outils de développement, sur un onglet "Console" tu verras les fameux messages d'erreurs/avertissements.
Le site en question ne possède pas de certificat SSL, or Google recommande pour le chiffrement des données envoyées entre client/serveur et le référencement. Tu peux en obtenir un gratuitement, ici.
Le site en question n'est pas adapté pour les smartphones, or c'est l'appareil qui est le plus utilisé aujourd'hui. Il faudra que tu améliores le site à ce niveau là en utilisant les media queries (tutoriel ici et ).
Si tu n'as pas réussi avec le tutoriel de Boris, tu peux essayer celui de Jonathan, si ça peut t'aider.

jeanguyT

Messages: 4

Bonjour,
Merci pour votre prompte réponse et vos précieux conseils. Concernant le reCaptcha je souhaitais mettre en place la version v2 qui ne fait pas appel à la sélection d'images. Mais je me suis rendu compte que cela se produisait de temps en temps lors de mes tests.
Comme je vous l'ai indiqué ce site a été conçu il y a près de 10 ans. Les sites web adaptatifs n'étaient pas encore développés. Après l'intégration et la mise au point du reCaptcha mon objectif sera de mettre en place une barre de menu unique pour toutes les pages du site, qui est actuellement intégré dans chaque page (ce qui pose le problème des mises à jour lors de l'intégration de nouvelles pages). Pour l'adaptation "responsive" cela me semble un peu compliqué mais je l'étudierais par la suite.
Bien cordialement

Jerem971

Messages: 695

Re:

Concernant le reCaptcha je souhaitais mettre en place la version v2 qui ne fait pas appel à la sélection d'images
Mais pourquoi ? C'est encore plus pénible pour les robots vu qu'ils arrivent pas à identifier l'image... Qu'est-ce qui te gêne dans la sélection d'image ?

Comme je vous l'ai indiqué ce site a été conçu il y a près de 10 ans. Les sites web adaptatifs n'étaient pas encore développés.
Oui c'est vrai, je t'ai juste indiquer ce que j'avais vu pour ensuite te proposer des solutions pour corriger mais ça viendra avec le temps de ton expérience.

Après l'intégration et la mise au point du reCaptcha mon objectif sera de mettre en place une barre de menu unique pour toutes les pages du
site, qui est actuellement intégré dans chaque page (ce qui pose le
problème des mises à jour lors de l'intégration de nouvelles pages).
Pour l'adaptation "responsive" cela me semble un peu compliqué mais je
l'étudierais par la suite.
Pour ça, au début de mes projets, je me suis basé sur cet exemple tout fait, une icone hamburger qui apparait quand la largeur atteint 768 pixels. Et pour comprendre un peu plus pour la modification de cet exemple, je me suis aidé du tutoriel de Jonathan. Depuis je réalise de super sites responsive avec un super menu responsive 🙌

Est-ce que le tutoriel de Jonathan concernant reCAPTCHA t'aide ?

jeanguyT

Messages: 4

Bonjour,
Après adaptation de mon formulaire, une erreur subsiste dont je ne trouve pas de solution. Dans mon formulaire de saisie  Index.php le champ ref (référence) activé, provoque une erreur  après submit  : il m'indique "saisie ref demandée !" alors qu'une sélection dans la liste a bien été effectuée. Code contact.php.
Merci par avance de votre conseil.
Cordialement

Jerem971

Messages: 695

Re:

@jeanguyT, je veux bien t'aidé mais si tu réponds pas à mes questions, je ne pourrai pas plus t'aider... 🙅
Donc je suis allé sur la page "Contact", j'ai vu que reCAPTCHA fonctionnait correctement, je voudrais savoir si c'est grâce au tutoriel de Jonathan... ? Et qu'est-ce qui te gêne dans la sélection d'image de reCAPTCHA ?
En allant sur la page "Contact", j'ai vu aussi que tu fais une vérification de champs visuellement mais tu peux aller plus loin (si tu veux) grâce au tutoriel Jonathan.
J'ai regarder rapidement le code de la page "Contact" à l'aide de l'inspecteur d'éléments... J'ai vu que les inputs utiliser pour tes champs, comment dire, par exemple l'input correspondant à l'email était de type texte alors qu'il aurait du être de type email... (Lis la documentation concernant les inputs). Tu verras que si tu lui attribut le type email, le navigateur, par défaut, fera déjà une vérification de ce qui est saisi, ce qui est déjà un plus comme vérification de champs...

jeanguyT

Messages: 4

Bonjour,
Bien entendu j'ai consulté tous les liens et suivi les conseils de Jonathan pour améliorer mon code pour le reCAPTCHA. J'ai activé la certification du site avec Let’s Encrypt sur cpanel du site de mon hébergeur o2swicht. Toutes les modifications que vous m'avez soumis ont été appliquées.concernant le formilaire index.php et contact.php j'ai l'erreur sur la variable 'ref' qui correspond à une sélection d'une référence dans un texte au format csv. code index.php :
<div class="field">
   <select id="ref" name="ref" style="font-family : Open Sans; font-size:1em;width:500px;height:25px;" >
      <?php
      if (($handle = fopen("ref.csv", "r")) !== false) {
      while (($data = fgetcsv($handle, 1000, ";")) !== false) {
      echo '<option value="' . $data[0] . '">' . htmlspecialchars($data[0]) . '</option>';
      }
      fclose($handle);
      }
      ?>
   </select>
</div>

code contact.php :
<?php
if($_POST)
{
require('constant.php');
    
    $user_nom      = filter_var($_POST["nom"], FILTER_SANITIZE_STRING);
    $user_email     = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $ref     = filter_var($_POST["ref"], FILTER_SANITIZE_STRING);
    $message   = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
    
    if(empty($user_nom)) {
      $empty[] = "<b>Nom</b>";      
   }
   if(empty($user_email)) {
      $empty[] = "<b>Email</b>";
   }
   if(empty($ref)) {
      $empty[] = "<b>Référence</b>";
   }   
   if(empty($message)) {
      $empty[] = "<b>Message</b>";
   }
   
   if(!empty($empty)) {
      $output = json_encode(array('type'=>'error', 'text' => implode(", ",$empty) . ' Renseigner les champs !'));
        die($output);
   }
   
   if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
       $output = json_encode(array('type'=>'error', 'text' => '<b>'.$user_email.'</b> Adresse mail incorrecte !.'));
      die($output);
   }
   //reCAPTCHA validation
   if (isset($_POST['g-recaptcha-response'])) {
      require('component/recaptcha/src/autoload.php');      
      
      $recaptcha = new \ReCaptcha\ReCaptcha(SECRET_KEY, new \ReCaptcha\RequestMethod\SocketPost());
      $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
        if (!$resp->isSuccess()) {
            $output = json_encode(array('type'=>'error', 'text' => '<b>Captcha</b> Activer la validation !'));
            die($output);            
        }   
   }
   
   $toEmail = "jeanguy.tayeb@gmail.com";
   $mailHeaders = "De: " . $user_nom . "<" . $user_email . ">\r\n";
   $mailBody = "Nom : " . $user_nom . "\n";
   $mailBody .= "Email : " . $user_email . "\n";
   $mailBody .= "Référence : " . $ref . "\n";
   $mailBody .= "Message : " . $message . "\n";
   if (mail($toEmail, "Contact Mail", $mailBody, $mailHeaders)) {
       $output = json_encode(array('type'=>'message', 'text' =>  'Merci pour votre message.'));
       die($output);
   } else {
       $output = json_encode(array('type'=>'error', 'text' => 'Envoi impossible'.SENDER_EMAIL));
       die($output);
   }
}
?>

Je ne maîtrise pas du tout  PHP. 
Voila ce qui m'empêche d'aller plus loin dans l'amélioration du site ( menu unique, responsive avec les infos sur le site de Jonathan).
Merci
Bien cordialement
PS : j'ai débuté en informatique à l'époque des systèmes IBM 360 !!!!!


Vous devez vous connecter ou créer un compte pour poster une réponse