Share
Les contributions de CAPTCHA sont peut-être les expériences les plus frustrantes sur le Web. Ils sont suffisamment pénibles pour la majorité des utilisateurs, sans parler des malvoyants ou de quiconque s'appuyant sur des technologies d'assistance telles que les lecteurs d'écran pour accéder au Web. Malheureusement, les CAPTCHA sont absolument essentiels dans la lutte contre le spam..
Un mal nécessaire (merci les spammeurs)Ironiquement, même si les CAPTCHA «texte déformé» traditionnels sont difficiles à lire pour les utilisateurs humains, la technologie moderne de l'intelligence artificielle a moins de problèmes à les résoudre. Google utilise même une technologie similaire pour lire les numéros de rue et les panneaux de signalisation afin de confirmer l'emplacement de Google Street View.!
Les robots Google peuvent lire ces informations avec précisionIl est donc logique que les développeurs de Google aient mis au point la meilleure solution CAPTCHA jusqu’à la fin de 2014. Le programme No CAPTCHA reCAPTCHA n’exige rien de plus que de taper du doigt, cliquer avec la souris ou se concentrer sur la saisie avec le clavier la barre d'espace.
Dans la plupart des cas, c'est aussi simple que cela, mais si l'analyse des risques de Google ne permet toujours pas de déterminer si vous êtes humain, une seconde invite apparaîtra..
Vous pouvez déjà le voir en action partout sur le Web, comme sur la page de soumission de @materialup par exemple..
Allons droit au but et mettons nous en place sans CAPTCHA.
Tout d'abord, nous avons besoin d'une clé API. Adressez-vous donc à https://www.google.com/recaptcha/admin. Pour accéder à cette page, vous devez être connecté à un compte Google. Il vous sera demandé d’enregistrer votre site Web. Donnez-lui un nom approprié, puis indiquez les domaines (par exemple, tutsplus.com) où ce reCAPTCHA sera utilisé. Les sous-domaines (tels que webdesign.tutsplus.com et code.tutsplus.com) sont automatiquement pris en compte.
Ceci fait, vous recevrez une clé de site et sa clé secrète de partenaire:
Sous les touches, vous verrez des extraits pour inclure reCAPTCHA sur votre site Web. Tout d'abord, il y a le JavaScript:
Vous pouvez également définir la langue que vous utilisez parmi les 40 langues prises en charge en ajoutant un paramètre à la chaîne. Ici nous ajoutons es qui nous donnera une langue espagnole reCAPTCHA:
Placez cette balise de script au bas de votre page (ou juste sous le formulaire où le reCAPTCHA apparaîtra, en fonction de la priorité que vous donnez au chargement de votre actif)..
La prochaine étape est l’espace réservé que vous devrez ajouter à votre balise de formulaire où vous souhaitez que reCAPTCHA apparaisse:
Remarque: la clé de site de données attribut tiendra la valeur de votre clé, pas cet exemple factice.
Vous pouvez ajouter d’autres attributs pour personnaliser l’apparence et les fonctionnalités de votre reCAPTCHA à ce stade. Par exemple, ajouter data-theme = "dark" pour ça div vous donnera une version sombre, qui pourrait mieux convenir à votre interface utilisateur:
Pour plus de détails sur la configuration de votre reCAPTCHA, consultez developers.google.com..
Maintenant que nous avons les ingrédients initiaux, il est temps de les mettre dans un environnement de travail.
Mettons notre balise de script et notre espace réservé dans un formulaire simple:
Comment intégrer Google "No CAPTCHA reCAPTCHA" sur votre site Web
Ici, nous avons utilisé une structure de page barebones avec un formulaire contenant un prénom entrée, un email entrée et un bouton d'envoi. Il n'y a pas de style ici parce que ce n'est pas vraiment nécessaire pour ce tutoriel.
Vous devriez avoir quelque chose qui ressemble à ceciPour démontrer que le test reCAPTCHA a été réussi, nous devons effectuer des vérifications côté serveur. Dans ce cas, nous le ferons avec PHP. Enregistrez donc ce fichier dans un nouveau projet sous le nom suivant: index.php.
Vous remarquerez que la méthode du formulaire est poster, ainsi, lorsque nous soumettons les données de formulaire, elles seront renvoyées à cette page dans un tableau de variables. Nous pouvons afficher ces variables en boucle, ajoutez donc ce qui suit à votre page quelque part:
$ valeur) echo ''. $ key. ': ". $ valeur."
'; ?>
Cela prend chaque paire clé / valeur présente dans notre $ _POST tableau et les sort avec un peu de formatage. Maintenant, lorsque vous soumettez le formulaire, vous devriez voir quelque chose comme ce qui suit:
Vous verrez la valeur retournée pour prénom et email, mais aussi une valeur pour g-recaptcha-response. Si vous échouez au test CAPTCHA, cette valeur sera vide, mais si vous cochez la case «Je ne suis pas un robot», vous verrez une énorme chaîne de caractères..
C’est cette valeur que nous devons envoyer à Google pour la vérifier. Faisons-le ensuite..
Heureusement, l'équipe de développeurs de Google a travaillé dur pour nous ici, alors dirigez-vous vers le projet ReCAPTCHA sur Github et récupérez une copie de la bibliothèque recaptchalib.php. Placez-le à la racine de votre projet, puis référencez-le en haut de votre index.php fichier:
Cette bibliothèque contient une collection de fonctions qui envoient le g-recaptcha-response (avec notre clé secrète) à Google via une requête HTTP. Ils collectent ensuite la réponse et vérifient si le CAPTCHA a réussi ou non. Pour utiliser cela, nous devons d’abord configurer quelques variables, avant la balise PHP finale:
// votre clé secrète $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // réponse vide $ response = null; // vérifier la clé secrète $ reCaptcha = new ReCaptcha ($ secret);
ReCaptcha () vérifie si notre clé secrète est présente. Sinon, cela tue le processus et nous conseille d'aller en chercher un. Nous traitons ensuite nos détails à travers les éléments suivants:
// si la réponse de vérification est soumise si ($ _POST ["g-recaptcha-response"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-response"]) ;
En supposant que tout va bien avec notre formulaire soumis, le $ réponse variable rendra compte de «succès» et nous pouvons continuer à traiter les données du formulaire. Voici à quoi cela pourrait ressembler: supprimez le bit où nous avons bouclé sur les données du formulaire, puis ajoutez la vérification suivante au-dessus du formulaire:
Accentsconagua
succès) echo "Bonjour". $ _POST ["nom"]. "(". $ _POST ["email"]. "), Merci de nous avoir envoyé le formulaire!"; sinon ?>Enfin, ajoutez une balise PHP de fermeture après le formulaire:
Ceci affiche le formulaire, sauf s’il a été soumis avec succès, auquel cas il affiche un petit avis de remerciement..
Il s’agissait d’une implémentation PHP brute et prête du No CAPTCHA reCAPTCHA. Il est ouvert à l’amélioration, mais nous espérons qu’il vous donnera une idée de base. Le mérite de la bibliothèque revient à l'équipe de développeurs de Google et je voudrais également remercier rapidement Matt Aussaguel de me l'avoir signalé..
