.
CAPTCHAs são parte integrante da segurança do site. As pessoas realizam 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ê, tornando-o um alvo para spammers.
Aqui está tudo o que você precisa saber sobre CAPTCHAs e como implementá-los facilmente com HTML, CSS e JavaScript.
O que é CAPTCHA?
CAPTCHA significa “Teste de Turing Público Completamente Automatizado para diferenciar computadores de humanos”. Luis von Ahn, Manuel Blum, Nicholas J. Hopper e John Langford cunharam esse termo em 2003. É um tipo de teste de desafio-resposta que os sites usam para determinar se o usuário é humano ou não.
Os CAPTCHAs adicionam segurança aos sites, fornecendo desafios que são difíceis de serem executados pelos bots, mas relativamente fáceis para os humanos. Por exemplo, identificar todas as imagens de um carro a partir de um conjunto de múltiplas imagens é difícil para os bots, mas bastante simples 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 ser humano a provar que não é um computador.
Por que seu site precisa de validação CAPTCHA
CAPTCHAs são importantes por vários motivos. Você pode usá-los para impedir que bots enviem spam e conteúdo prejudicial em formulários. Eles também podem ajudar a impedir algumas formas de ataques de hackers.
Até empresas como o Google usam CAPTCHA para proteger seus sistemas contra ataques de spam.
Código HTML CAPTCHA
O código usado neste projeto está disponível em um repositório GitHub e é gratuito para uso sob a licença do MIT. Se você quiser dar uma olhada em uma versão ao vivo deste projeto, você pode conferir esta demonstração.
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 sete elementos:
-
: Este elemento exibe o cabeçalho do formulário CAPTCHA. - : Este elemento exibe o texto CAPTCHA.
- – Este elemento cria uma caixa de entrada para inserir o CAPTCHA.
- : Este botão envia o formulário e verifica se o CAPTCHA e o texto digitado são iguais.
- : Este botão atualiza o CAPTCHA.
- : Este elemento exibe a saída após validar o texto inserido com CAPTCHA.
-
: este é o elemento pai que contém todos os outros elementos.
Este modelo HTML CAPTCHA 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 etiqueta 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 uma atualização rápida sobre tags e atributos HTML.
Você também pode integrar este código aos 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&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;
}
.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 de formulário usando a propriedade CSS box-shadow.
Validação CAPTCHA usando JavaScript
Você precisa usar JavaScript para adicionar funcionalidade a uma página da web. Comece buscando referências aos elementos com os quais você precisará trabalhar, incluindo a tela e a caixa de entrada. Use o document.getElementById() função para fazer isso:
let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";let userText = document.getElementById('textBox');
let submitButton = document.getElementById('submitButton');
let output = document.getElementById('output');
let refreshButton = document.getElementById('refreshButton');
Aqui, você está usando document.getElementById() para selecionar um elemento do documento por seu ID.
Para gerar o texto CAPTCHA, você precisará escolher alguns caracteres aleatórios e existem várias abordagens que você pode adotar. Uma das mais simples é armazenar um conjunto de caracteres potenciais em um array para você escolher:
var captchaStr = "";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'];
Escreva uma função para gerar um novo CAPTCHA. Você pode chamar essa função imediatamente para criar um CAPTCHA quando a página for carregada. Você também pode chamá-lo para regenerar o CAPTCHA se o usuário pressionar o botão Atualizar botão.
Comece construindo um novo array de caracteres aleatórios em alfaNúmeros. Faça um loop um número fixo de vezes – 7, neste caso – e adicione um novo caractere aleatório de alphaNums em cada iteração. Você pode então escrever o array final, como uma string, no canvas usando preencherTexto:
function generate_captcha() {
let emptyArr = []; for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaStr = emptyArr.join('');
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);
output.innerHTML = "";
}
generate_captcha();
Observe que esta função limpa a tela e redefine qualquer saída, sendo que ambos são importantes para atualizar o texto CAPTCHA.
Conclua a funcionalidade principal comparando a entrada do usuário com o texto CAPTCHA original. Você pode definir uma função para fazer isso:
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
E chame essa função em resposta à tecla Enter ou ao pressionar o botão Enviar botão:
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});submitButton.addEventListener('click', check_captcha);
Finalmente, lide com a funcionalidade de atualização. Basta conectar o evento submit do botão à função generate_captcha() para fazer isso:
refreshButton.addEventListener('click', generate_captcha);
Resultado do Projeto Validador CAPTCHA
Agora você tem um formulário de validação CAPTCHA totalmente funcional. Você também pode clonar o repositório GitHub deste projeto do Validador CAPTCHA. Após clonar o repositório, execute o projeto e você verá a seguinte saída:
Quando você insere o código CAPTCHA correto na caixa de entrada, a seguinte saída será exibida:
Quando você insere um código CAPTCHA incorreto na caixa de entrada, a seguinte saída será exibida:
Proteja seu site com CAPTCHAs
No passado, muitas organizações e empresas sofreram pesadas 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 ele adiciona uma camada de segurança para evitar ataques de criminosos cibernéticos ao site.
O Google também lançou um serviço gratuito chamado “reCAPTCHA” que ajuda a proteger sites contra spam e abusos. 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 haja uma razão importante pela qual eles são difíceis.
.
