Catégories
Astuces et Design

Comment ajouter reCAPTCHA v3 au formulaire PHP et soumettre à l'aide d'Ajax

Dans ce tutoriel, nous allons ajouter Google reCAPTCHA v3 à un formulaire PHP et le soumettre sans quitter la page, en utilisant Ajax. Si vous avez eu un formulaire de contact ou tout autre formulaire de ce type sur votre site Web, vous savez à quel point il est ennuyeux de recevoir des spams de bots. Google reCAPTCHA vous protège du spam et d'autres abus automatisés. Pour suivre ce didacticiel, vous devez avoir des connaissances de base en HTML, jQuery et PHP.

Des millions de polices, de thèmes et de graphiques: à partir de SEULEMENT 16,50 $ par mois

Polices Web
Thèmes WordPress

Thèmes WordPress

1 200+ thèmes

Éléments graphiques

Éléments graphiques

Plus de 32 000 graphiques

TÉLÉCHARGER MAINTENANT

Envato Elements


Pourquoi Google reCAPTCHA v3?

Nous avons tous eu l'expérience frustrante d'essayer de soumettre rapidement des informations via un formulaire pour être finalement confronté à un défi Captcha. Nous avons dû taper des caractères aléatoires et nous nous sommes demandés: "Est-ce deux V ou un W?", "Dois-je ajouter cet espace ou non?".

Google Recaptcha

Et puis nous avons dû sélectionner toutes les images qui ont des zébrures ou des ponts pour prouver que nous sommes des humains. Heureusement, de nos jours, de nombreux sites Web ont ajouté Google reCAPTCHA v2 qui affiche simplement une case à cocher – "Je ne suis pas un robot".

Google reCAPTCHA v2

Cependant, en 2018, Google a publié la prochaine version – reCAPTCHA v3 qui ne nécessite aucune interaction de l'utilisateur. Il fonctionne en arrière-plan en observant le comportement de l'utilisateur. Cette version nous fournit (aux développeurs) un score qui indique à quel point une interaction est suspecte. Nous pourrions utiliser ce score et empêcher le spam. Découvrez comment cela fonctionne sur le blog officiel des webmasters de Google.

Voyons maintenant comment ajouter ceci à un formulaire simple.

Enregistrer les clés reCAPTCHA v3

Vous devez d'abord enregistrer votre site Web et obtenir les clés ici – https://www.google.com/recaptcha/admin/create. Ajoutez une étiquette, sélectionnez reCAPTCHA v3, saisissez vos noms de domaine et soumettez.

Google reCAPTCHA v3

Cela générera une «clé de site» et une «clé secrète». Copiez les deux et gardez-les en sécurité. Nous en aurons bientôt besoin.

Formulaire HTML

Prenons un simple formulaire de contact avec les champs Nom complet, E-mail et Message

Formulaire de contact sans Google reCAPTCHA

Le HTML

Par souci de simplicité de ce tutoriel, seul le code HTML est affiché ci-dessous. Pour les CSS utilisés dans la capture d'écran ci-dessus, téléchargez le code source complet à la fin de ce tutoriel.

Full Name *

Email *

Message *

Soumission de formulaire Ajax

Travaillons sur la soumission du formulaire en utilisant Ajax avant d'ajouter le reCAPTCHA, pour lequel nous avons besoin de la bibliothèque jQuery. Chargez-le à l'aide d'un CDN. Collez cette ligne avant la fermeture body balise dans votre code HTML.

Nous devons faire la demande Ajax lors de la soumission du formulaire.


Avec ce code, si vous cliquez sur «Soumettre», vous obtiendrez une erreur 404 car contact.php n’existe pas encore. Faisons-le ensuite.

Envato Elements

TÉLÉCHARGER MAINTENANT

PHP

Créer contact.php. Côté serveur, nous devons valider les données reçues et envoyer une réponse JSON. Nous intégrerons reCAPTCHA dans un certain temps.

  $error_output,
   'success'   =>  $success_output
);

// Output needs to be in JSON format
echo json_encode($output);

?>

Parfait! Nous avons le flux complet de soumission de formulaire en utilisant Ajax. Il est maintenant temps d'intégrer reCAPTCHA v3 et vous verrez à quel point c'est vraiment simple, si vous suivez attentivement.

Intégration côté client

La première étape consiste à charger l'API JavaScript avec votre clé de site. Collez-le sous votre lien jQuery CDN.

IMPORTANT: remplacez YOUR_SITE_KEY_HERE par la clé de site que vous avez copiée précédemment.

Si vous regardez les documents reCAPTCHA v3, nous devons appeler grecaptcha.execute sur chaque action que nous souhaitons protéger. Dans notre cas, c'est la soumission du formulaire. Cet appel génère un jeton, qui doit être envoyé avec nos données de formulaire pour être vérifié côté serveur. La meilleure façon de le faire est d'inclure un champ de saisie masqué dans notre formulaire comme celui-ci et d'affecter dynamiquement la valeur du jeton à ce champ:

Appelez cette fonction ci-dessous juste en dehors de la demande Ajax et remplissez le champ de saisie masqué avec une valeur de jeton. Cela inclura automatiquement la valeur du jeton avec d'autres données de formulaire lors de la demande Ajax.

grecaptcha.ready(function () {
   grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;
      // Make the Ajax call here
   });
});

IMPORTANT: remplacez YOUR_SITE_KEY_HERE par la clé de site que vous avez copiée précédemment.

La valeur "action" est spécifique à cette action de soumission du formulaire de contact. Différentes actions vous aident à analyser les données sur tout votre site Web lorsque vous ajoutez reCAPTCHA à plusieurs endroits.

REMARQUE: Les jetons reCAPTCHA expirent toutes les deux minutes. C'est pourquoi, nous devons générer ce jeton uniquement après que l'utilisateur a cliqué sur le bouton Envoyer et juste avant de faire la demande Ajax.

Ceci termine l'intégration côté client.

Intégration côté serveur

Une fois que nous avons validé les données (nom, e-mail et message) côté serveur, nous devons récupérer le score de Google pour vérifier s'il s'agit d'une interaction humaine ou non. À l'intérieur de if(isvalid()){ } bloc, ajoutez le code ci-dessous pour faire la demande d'API pour obtenir le score.

// Build POST request to get the reCAPTCHA v3 score from Google
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE'; // Insert your secret key here
$recaptcha_response = $_POST('recaptcha_response');

// Make the POST request
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);

IMPORTANT: remplacez YOUR_SECRET_KEY_HERE par la clé secrète que vous avez copiée précédemment. La clé secrète est réservée au côté serveur.

La réponse reçue est un objet JSON.

{
"success": true | false, // si cette demande était un jeton reCAPTCHA valide pour votre site
"score": nombre // le score de cette demande (0.0 – 1.0)
"action": chaîne // le nom de l'action pour cette demande (important à vérifier)
"challenge_ts": timestamp, // timestamp of the challenge load (format ISO yyyy-MM-dd’T’HH: mm: ssZZ)
"hostname": chaîne, // le nom d'hôte du site où le reCAPTCHA a été résolu
"codes d'erreur": (…) // facultatif
}

Décodons l'objet JSON $recaptcha et vérifiez success, score et action. Le score varie de 0,0 à 1,0. Par défaut, vous pouvez utiliser un seuil de 0,5.

$recaptcha = json_decode($recaptcha);
// Take action based on the score returned
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
   // This is a human. Insert the message into database OR send a mail
   $success_output = "Your message sent successfully";
} else {
   // Score less than 0.5 indicates suspicious activity. Return an error
   $error_output = "Something went wrong. Please try again later";
}

Vous êtes fin prêt! Cliquez sur ce bouton Soumettre, et si vous avez tout intégré correctement, vous devriez voir une réponse qui Votre message a bien été envoyé.

message de réussite

Astuce bonus:

Une fois que vous avez ajouté l'API javascript, vous avez peut-être remarqué un badge reCAPTCHA ennuyeux dans le coin inférieur droit de votre page qui ressemble à ceci.

Badge Google reCAPTCHA

Cela pourrait ne pas convenir à la conception de votre site Web. Devine quoi? Cette FAQ indique ici que vous êtes autorisé à masquer ce badge à condition d'inclure le texte suivant dans le flux utilisateur

This site is protected by reCAPTCHA and the Google
   Privacy Policy and
   Terms of Service apply.

Alors ajoutez ceci dans un p sous votre bouton «Soumettre».

message reCAPTCHA

Maintenant, pour masquer le badge, ajoutez-le simplement dans votre CSS.

.grecaptcha-badge {
   visibility: hidden;
}

Toutes nos félicitations! Vous avez correctement configuré Google reCAPTCHA v3 dans votre formulaire. Désormais, vous ne recevrez des messages que des humains – sans qu'ils aient à faire face à un défi Captcha ET sans quitter la page.

Téléchargez le code source complet ici.

TÉLÉCHARGER LE CODE SOURCE

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *