Intégration reCAPTCHA
jeanguyT Le 10 janvier 2019 à 15:53 (Édité le 25 janvier 2019 à 17:54)
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
jeanguyT Le 10 janvier 2019 à 16:18
Cordialement
Profil introuvable Le 11 janvier 2019 à 01:58
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 là).
Si tu n'as pas réussi avec le tutoriel de Boris, tu peux essayer celui de Jonathan, si ça peut t'aider.
jeanguyT Le 11 janvier 2019 à 14:39
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
Profil introuvable Le 12 janvier 2019 à 01:21
Concernant le reCaptcha je souhaitais mettre en place la version v2 qui ne fait pas appel à la sélection d'imagesMais 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 duPour ç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 🙌
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.
Est-ce que le tutoriel de Jonathan concernant reCAPTCHA t'aide ?
jeanguyT Le 15 janvier 2019 à 17:52
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
Profil introuvable Le 16 janvier 2019 à 01:01 (Édité le 16 janvier 2019 à 01:05)
@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 Le 16 janvier 2019 à 18:09 (Édité le 16 janvier 2019 à 18:11)
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 !!!!!
Profil introuvable Le 17 janvier 2019 à 03:34
Content d'apprendre que le tuto de Jonathan ai pu t'aider, c'est ce qu'il faut faire, consulter d'autres contenus ayant le même sujet pour voir les erreurs plus rapidement 😉 Pour ce qui est du certificat, c'est déjà un plus que tu l'es mis puisque le site est déjà en ligne. Je suis en train d'analyser ton code pour trouver le pourquoi du comment ça ne fonctionne pas et bizarrement, j'ai remarqué que tu as mit l'attribut de l'input email de type email ce qui est correcte mais je ne comprend pas pourquoi le navigateur ne réagit pas quand je saisi n'importe quoi dans le champ, donc je regarde également de ce côté là pour comprendre ce qui cloche...
De ton côté, tu peux essayer de trouver les logs de ton serveur, histoire de voir si il y a un message d'erreur car le PHP est un langage côté serveur, tu ne verras rien dans les outils de développement du navigateur... Je pense que tu utilises soit FileZilla ou WinSCP pour la gestion des fichiers...
Je te tiens au courant si je trouve quelque chose, ou peut-être quelqu'un trouvera avant moi 😉
PS : j'ai débuté en informatique à l'époque des systèmes IBM 360 !!!!!Je n'étais même pas née à cette époque et j'aurais aimé voir ces anciens systèmes... mais si tu souhaites connaître mon âge, c'est celle de Google en fait 😉
jeanguyT Le 18 janvier 2019 à 19:03
J'avais bien entendu consulté de nombreux sites pour mettre au point ceux que j'ai développés bénévolement depuis 15 ans (voir mon site "benevolus". J'utilise Filezilla pour la gestion des mises à jour.
J'ai tenté de créer un menu commun pour le site en utilisant le code <?php include('menu/menu.php'); ?> dans la page principale (index.html) et créé un menu.php contenant le code du menu inclus dans cette page. J'ai installé wamp64 pour tester en local mais je n'ai pas réussi à faire fonctionner cette modification.
Pour le script php que je t'ai adressé, je n'ai pas encore de solution. Je compte sur vous pour m'apporter une solution.
Cordialement
Profil introuvable Le 20 janvier 2019 à 20:39 (Édité le 20 janvier 2019 à 20:40)
Bon pour le script PHP j'ai quand même une piste : le fait que cela soit un "select" fait que la vérification ne se fait pas correctement... Mais en ce qui concerne la logique du code, tu es sur la bonne voie, puisque ça suit à peu près les documentations (voir ici, ici et là).
Pour la vérification des champs du formulaire, il faut retirer l'attribut "novalidate" car c'est ce qui empêche la vérifications des champs par le navigateur grâce aux attributs que tu lui a donner, tu peux choisir les champs requis en ajoutant "required="required"", le navigateur empêchera l'envoie des données tant que le champ n'est pas rempli. De plus "novalidate" n'est pas pris en charge sur certains navigateurs... Je ne l'ai jamais utiliser...
jeanguyT Le 22 janvier 2019 à 15:00
En effet " le fait que cela soit un "select" fait que la vérification ne se fait pas correctement..." mais quelle modification apportée pour régler cette anomalie.
Cordialement
Profil introuvable Le 30 janvier 2019 à 01:53
Pour le moment je n'ai toujours pas vu l'erreur, pourtant la logique du code semble est correct 😕
