Crie um formulário de validação CAPTCHA usando HTML, CSS e JavaScript

Os CAPTCHAs são parte integrante da segurança do site. As pessoas completam milhões de testes CAPTCHA online todos os dias.

Se você não implementou a validação CAPTCHA em seu site, isso pode criar um grande problema para você, configurando você como alvo de spammers.

Aqui está tudo o que você precisa saber sobre CAPTCHAs e como você pode implementá-los facilmente com HTML, CSS e JavaScript.

O que é CAPTCHA?

CAPTCHA significa “teste de Turing público completamente automatizado para diferenciar computadores e humanos”. Este termo foi cunhado em 2003 por Luis von Ahn, Manuel Blum, Nicholas J. Hopper e John Langford. É um tipo de teste de desafio-resposta que os sites usam para determinar se o usuário é humano ou não.

MAKEUSEO VÍDEO DO DIA

Os CAPTCHAs adicionam segurança aos sites fornecendo desafios que são difíceis para os bots executarem, mas relativamente fáceis para os humanos. Por exemplo, identificar todas as imagens de um carro a partir de um conjunto de várias imagens é difícil para os bots, mas simples o suficiente para os olhos humanos.

A ideia do CAPTCHA tem origem no Teste de Turing. Um teste de Turing é um método para testar se uma máquina pode pensar como um humano ou não. Você pode pensar em um teste CAPTCHA como um “teste de Turing reverso”, pois desafia um humano a provar que não é um computador.

Por que seu site precisa de validação CAPTCHA

Os CAPTCHAs são usados para impedir que os bots enviem automaticamente formulários com spam e outros conteúdos prejudiciais. Até empresas como o Google o usam para impedir que seu sistema seja atacado por spam. Aqui estão algumas das razões pelas quais seu site pode se beneficiar da validação CAPTCHA:

Os CAPTCHAs ajudam a impedir que hackers e bots enviem spam aos sistemas de registro criando contas falsas. Se eles não forem impedidos, eles podem usar essas contas para fins nefastos.
Os CAPTCHAs podem proibir ataques de login de força bruta do seu site que os hackers usam para tentar fazer login usando milhares de senhas.
Os CAPTCHAs podem impedir que os bots enviem spam para a seção de revisão fornecendo comentários falsos.
Os CAPTCHAs ajudam a prevenir a inflação dos ingressos, pois algumas pessoas compram muitos ingressos para revender. Os CAPTCHAs podem até impedir registros falsos em eventos gratuitos.
Os CAPTCHAs podem restringir os cibercriminosos de enviar spam a blogs com comentários desonestos e links para sites nocivos.

Existem muitos outros motivos que suportam a integração da validação CAPTCHA em seu site. Você pode fazer isso com o código a seguir.

Se você quiser dar uma olhada em uma versão ao vivo deste projeto, você pode conferir esta demonstração.

Código HTML CAPTCHA

Neste projeto, você adicionará CAPTCHA a um formulário HTML. Use o seguinte código para adicionar CAPTCHA em HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">
Captcha Validator Using HTML, CSS and JavaScript
</h1>
<div id="captchaBackground">
<canvas id="captcha">captcha text</canvas>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Este código consiste principalmente em 7 elementos:

: Este elemento é usado para exibir o cabeçalho do formulário CAPTCHA.
: Este elemento é usado para exibir o texto CAPTCHA.
– Este elemento é usado para criar uma caixa de entrada para digitar o CAPTCHA.
: Este botão envia o formulário e verifica se o CAPTCHA e o texto digitado são iguais.
: Este botão é usado para atualizar o CAPTCHA.
: Este elemento é usado para exibir a saída de acordo com o texto inserido.
: Este é o elemento pai que contém todos os outros elementos.

Esta página HTML vincula-se a arquivos CSS e JavaScript por meio do link e roteiro elementos respectivamente. Você deve adicionar o link etiqueta dentro do cabeça e a roteiro marca no final do corpo.

Existem muitas tags e atributos HTML, e lembrar de todos eles pode ser cansativo. Você sempre pode consultar uma folha de dicas HTML para obter uma atualização rápida sobre tags e atributos HTML.

Você também pode integrar esse código com formulários existentes em seu site.

Código CSS CAPTCHA

Você pode usar CSS—Cascading Style Sheets—para estilizar elementos HTML. Use o seguinte código CSS para estilizar o formulário de validação CAPTCHA:

@import url('https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap&apos;);
body {
background-color: #232331;
font-family: &apos;Roboto&apos;, 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;
}

Adicione ou remova propriedades CSS deste código de acordo com sua preferência. Você também pode dar uma aparência elegante ao contêiner do formulário usando a propriedade CSS box-shadow.

Código JavaScript CAPTCHA

Você pode usar JavaScript para adicionar funcionalidade a uma página da web. Use o código a seguir para adicionar funcionalidade completa ao formulário de validação CAPTCHA:


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');

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 = [];
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);

userText.addEventListener('keyup', function(e) {
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";
}
}
});
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";
}
});
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 = "";
});

Agora você tem um formulário de validação CAPTCHA totalmente funcional. Se você quiser dar uma olhada no código completo, você pode clonar o repositório GitHub deste projeto CAPTCHA-Validator. Após clonar o repositório, abra o arquivo HTML e você verá a seguinte saída:

Quando você inserir o código CAPTCHA correto na caixa de entrada, ele exibirá a seguinte saída:

Quando você insere um código CAPTCHA incorreto na caixa de entrada, ele exibirá a seguinte saída:

Formulário do validador de CAPTCHA CAPTCHA incorreto

Proteja seu site com CAPTCHAs

No passado, muitas organizações e empresas sofreram grandes perdas, como violações de dados, ataques de spam, etc., como resultado de não terem formulários CAPTCHA em seus sites. É altamente recomendável adicionar CAPTCHA ao seu site, pois adiciona uma camada de segurança para impedir o site de criminosos cibernéticos.

Porquê usar o recurso de transmissão para transmitir seu PS5 para o Twitch

Uma vez que o Google está corrigindo o carregamento adaptável para dispositivos Pixel

The Mid-Range Phones That Everyone Needs

O Google também lançou um serviço gratuito chamado “reCAPTCHA” que ajuda a proteger sites contra spam e abuso. CAPTCHA e reCAPTCHA parecem semelhantes, mas não são exatamente a mesma coisa. Às vezes, os CAPTCHAs parecem frustrantes e difíceis de entender para muitos usuários. Embora, há uma razão importante por que eles são feitos para serem difíceis.