Créer un formulaire de validation CAPTCHA en utilisant HTML, CSS et JavaScript

De nos jours, les CAPTCHA font partie intégrante de la sécurité des sites Web. Des millions de tests CAPTCHA sont effectués en ligne chaque jour.

Si vous n'avez pas implémenté la validation CAPTCHA sur votre site Web, cela pourrait créer un gros problème pour vous, vous définissant comme une cible pour les spammeurs.

Voici tout ce que vous devez savoir sur les CAPTCHA et comment les implémenter facilement sur votre site Web à l'aide de HTML, CSS et JavaScript.

Qu'est-ce que le CAPTCHA ?

CAPTCHA signifie « Test de Turing public complètement automatisé pour distinguer les ordinateurs et les humains ». Ce terme a été inventé en 2003 par Luis von Ahn, Manuel Blum, Nicholas J. Hopper et John Langford. C'est un type de test de défi-réponse qui est utilisé pour déterminer si l'utilisateur est humain ou non.

Les CAPTCHA ajoutent de la sécurité aux sites Web en proposant des défis difficiles à relever pour les robots, mais relativement faciles pour les humains. Par exemple, identifier toutes les images d'une voiture à partir d'un ensemble d'images multiples est difficile pour les robots mais assez simple pour les yeux humains.

L'idée de CAPTCHA vient du test de Turing. Un test de Turing est une méthode pour tester si une machine peut penser comme un humain ou non. Fait intéressant, un test CAPTCHA peut être appelé un «test de Turing inversé» puisque dans ce cas, l'ordinateur crée le test qui défie les humains.

Pourquoi votre site Web a-t-il besoin d'une validation CAPTCHA ?

Les CAPTCHA sont principalement utilisés pour empêcher les robots de soumettre automatiquement des formulaires contenant du spam et d'autres contenus nuisibles. Même des entreprises comme Google l'utilisent pour empêcher leur système d'être attaqué par des spams. Voici quelques-unes des raisons pour lesquelles votre site Web peut bénéficier de la validation CAPTCHA :

Les CAPTCHA aident à empêcher les pirates et les bots de spammer les systèmes d'enregistrement en créant de faux comptes. S'ils ne sont pas empêchés, ils peuvent utiliser ces comptes à des fins malveillantes.
Les CAPTCHA peuvent interdire les attaques de connexion par force brute à partir de votre site Web que les pirates informatiques utilisent pour essayer de se connecter en utilisant des milliers de mots de passe.
Les CAPTCHA peuvent empêcher les robots de spammer la section de révision en fournissant de faux commentaires.
Les CAPTCHA aident à prévenir l'inflation des billets, car certaines personnes achètent un grand nombre de billets pour les revendre. CAPTCHA peut même empêcher les fausses inscriptions à des événements gratuits.
Les CAPTCHA peuvent empêcher les cyber-escrocs de spammer les blogs avec des commentaires louches et des liens vers des sites Web nuisibles.

Il existe de nombreuses autres raisons qui soutiennent l'intégration de la validation CAPTCHA dans votre site Web. Vous pouvez le faire avec le code suivant.

comment installer windows 10 gratuitement

Code CAPTCHA HTML

HTML, ou HyperText Markup Language, décrit la structure d'une page Web. Utilisez le code HTML suivant pour structurer votre formulaire de validation CAPTCHA :

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

Ce code se compose principalement de 7 éléments :

: Cet élément permet d'afficher l'en-tête du formulaire CAPTCHA.
: Cet élément permet d'afficher le texte CAPTCHA.
- Cet élément permet de créer une zone de saisie pour saisir le CAPTCHA.
: Ce bouton soumet le formulaire et vérifie si le CAPTCHA et le texte tapé sont identiques ou non.
: Ce bouton permet de rafraîchir le CAPTCHA.
: Cet élément permet d'afficher la sortie en fonction du texte saisi.
: Il s'agit de l'élément parent qui contient tous les autres éléments.

Les fichiers CSS et JavaScript sont liés à cette page HTML via le et éléments respectivement. Vous devez ajouter le relier étiquette à l'intérieur du diriger balise et scénario étiquette à la fin du corps .

Vous pouvez également intégrer ce code aux formulaires existants de votre site Web.

En rapport: L'aide-mémoire HTML Essentials : balises, attributs, etc.

Code CSS CAPTCHA

CSS, ou feuilles de style en cascade, est utilisé pour styliser les éléments HTML. Utilisez le code CSS suivant pour styliser les éléments HTML ci-dessus :

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  
body {  
 background-color: #232331;  
 font-family: 'Roboto', sans-serif;  
}  
#captchaBackground {  
 height: 220px;  
 width: 250px;  
 background-color: #2d3748;  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 flex-direction: column;  
}  
#captchaHeading {  
 color: white;  
}  
#captcha {  
 height: 80%;  
 width: 80%;  
 font-size: 30px;  
 letter-spacing: 3px;  
 margin: auto;  
 display: block;  
 top: 0;  
 bottom: 0;  
 left: 0;  
 right: 0;  
}  
.center {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
}  
#submitButton {  
 margin-top: 2em;  
 margin-bottom: 2em;  
 background-color: #08e5ff;  
 border: 0px;  
 font-weight: bold;  
}  
#refreshButton {  
 background-color: #08e5ff;  
 border: 0px;  
 font-weight: bold;  
}  
#textBox {  
 height: 25px;  
}  
.incorrectCaptcha {  
 color: #FF0000;  
}  
.correctCaptcha {  
 color: #7FFF00;  
}

Ajoutez ou supprimez des propriétés CSS de ce code selon vos préférences. Vous pouvez également donner un aspect élégant au conteneur de formulaire en utilisant le Propriété CSS box-shadow .

Code CAPTCHA JavaScript

JavaScript est utilisé pour ajouter des fonctionnalités à une page Web autrement statique. Utilisez le code suivant pour ajouter des fonctionnalités complètes au formulaire de validation CAPTCHA :

// document.querySelector() is used to select an element from the document using its ID  
let captchaText = document.querySelector('#captcha');  
var ctx = captchaText.getContext('2d');  
ctx.font = '30px Roboto';  
ctx.fillStyle = '#08e5ff';  
  
let userText = document.querySelector('#textBox');  
let submitButton = document.querySelector('#submitButton');  
let output = document.querySelector('#output');  
let refreshButton = document.querySelector('#refreshButton');  
  
// alphaNums contains the characters with which you want to create the CAPTCHA  
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];  
let emptyArr = [];  
// This loop generates a random string of 7 characters using alphaNums  
// Further this string is displayed as a CAPTCHA  
for (let i = 1; i <= 7; i++) {  
 emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);  
}  
var c = emptyArr.join('');  
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);  
  
// This event listener is stimulated whenever the user press the 'Enter' button  
// 'Correct!' or 'Incorrect, please try again' message is  
// displayed after validating the input text with CAPTCHA  
userText.addEventListener('keyup', function(e) {  
 // Key Code Value of 'Enter' Button is 13  
 if (e.keyCode === 13) {  
 if (userText.value === c) {  
 output.classList.add('correctCaptcha');  
 output.innerHTML = 'Correct!';  
 } else {  
 output.classList.add('incorrectCaptcha');  
 output.innerHTML = 'Incorrect, please try again';  
 }  
 }  
});  
// This event listener is stimulated whenever the user clicks the 'Submit' button  
// 'Correct!' or 'Incorrect, please try again' message is  
// displayed after validating the input text with CAPTCHA  
submitButton.addEventListener('click', function() {  
 if (userText.value === c) {  
 output.classList.add('correctCaptcha');  
 output.innerHTML = 'Correct!';  
 } else {  
 output.classList.add('incorrectCaptcha');  
 output.innerHTML = 'Incorrect, please try again';  
 }  
});  
// This event listener is stimulated whenever the user press the 'Refresh' button  
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button  
refreshButton.addEventListener('click', function() {  
 userText.value = '';  
 let refreshArr = [];  
 for (let j = 1; j <= 7; j++) {  
 refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);  
 }  
 ctx.clearRect(0, 0, captchaText.width, captchaText.height);  
 c = refreshArr.join('');  
 ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);  
 output.innerHTML = '';  
});

Vous avez maintenant un formulaire de validation CAPTCHA entièrement fonctionnel ! Si vous voulez voir le code complet, vous pouvez cloner le Dépôt GitHub de ce projet CAPTCHA-Validator . Après avoir cloné le référentiel, exécutez le fichier HTML et vous obtiendrez le résultat suivant :

que signifie l'emoji smiley

Lorsque vous entrez le code CAPTCHA correct dans la zone de saisie, la sortie suivante s'affiche :

Lorsque vous entrez un code CAPTCHA incorrect dans la zone de saisie, la sortie suivante s'affiche :

Sécurisez votre site Web avec les CAPTCHA

Dans le passé, de nombreuses organisations et entreprises ont subi de lourdes pertes telles que des violations de données, des attaques de spam, etc. en raison de l'absence de formulaires CAPTCHA sur leurs sites Web. Il est fortement recommandé d'ajouter CAPTCHA à votre site Web, car il ajoute une couche de sécurité pour empêcher le site Web des cybercriminels.

Google a également lancé un service gratuit appelé « reCAPTCHA » qui aide à protéger les sites Web contre le spam et les abus. CAPTCHA et reCAPTCHA semblent similaires, mais ce n'est pas tout à fait la même chose. Parfois, les CAPTCHA sont frustrants et difficiles à comprendre pour de nombreux utilisateurs. Bien qu'il y ait une raison importante pour laquelle ils sont rendus difficiles.

Partager Partager Tweeter E-mail Comment fonctionnent les CAPTCHA et pourquoi sont-ils si difficiles ?

Les CAPTCHA et reCAPTCHA empêchent le spam. Comment travaillent-ils? Et pourquoi trouvez-vous les CAPTCHA si difficiles à résoudre ?

Lire la suite Rubriques connexes

La programmation
HTML
JavaScript
CSS

A propos de l'auteur Yuvraj Chandra(60 articles publiés)

Yuvraj est un étudiant de premier cycle en informatique à l'Université de Delhi, en Inde. Il est passionné par le développement Web Full Stack. Quand il n'écrit pas, il explore la profondeur de différentes technologies.

Plus de Yuvraj Chandra

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner