Criar um formulário de validação CAPTCHA usando HTML, CSS e JavaScript
Os CAPTCHAs são parte integrante da segurança dos sítios Web. Todos os dias, milhões de pessoas realizam testes CAPTCHA em linha.
Caso não tenha incorporado a implementação da verificação CAPTCHA no seu sítio, existe a possibilidade de o expor a vulnerabilidades significativas e de tornar o seu estabelecimento suscetível a ataques maliciosos perpetrados por entidades de spam.
Aqui está uma visão geral abrangente dos CAPTCHAs, incluindo informações sobre sua implementação usando HTML, CSS e JavaScript. Este conhecimento fornecer-lhe-á todos os detalhes necessários para incorporar a funcionalidade CAPTCHA nas suas aplicações Web.
O que é CAPTCHA?
CAPTCHA, que significa “Completely Automated Public Turing Test to Tell Computers and Humans Apart” (Teste de Turing Público Completamente Automatizado para Distinguir Computadores e Humanos), foi introduzido pela primeira vez por Luis von Ahn, Manuel Blum, Nicholas J. Hopper e John Langford como um meio de distinguir entre humanos e computadores em sites da Web através de um formato de desafio-resposta.
Os mecanismos CAPTCHA aumentam a segurança dos sítios Web ao apresentarem desafios que se revelam pesados para os web-bots automatizados, mas fáceis de gerir para os utilizadores humanos mais perspicazes. A título de exemplo, a distinção entre uma série de veículos representados está ao alcance dos humanos, mas coloca obstáculos demasiado grandes para os agentes robóticos.
O conceito de CAPTCHAs deriva do Teste de Turing, que foi concebido como um meio de determinar se uma inteligência artificial poderia exibir um comportamento inteligente indistinguível do de um humano. Essencialmente, um CAPTCHA funciona como um “Teste de Turing invertido”, exigindo que os utilizadores que se presume serem humanos demonstrem as suas capacidades cognitivas e se distingam de entidades automatizadas que tentam obter acesso não autorizado através de meios enganadores.
Porque é que o seu Web site precisa de validação CAPTCHA
O CAPTCHA desempenha um papel vital na proteção de Web sites contra actividades maliciosas, como spam, envio de conteúdo prejudicial através de formulários e determinados tipos de tentativas de pirataria informática, implementando uma camada adicional de segurança que distingue os utilizadores humanos dos bots automatizados.
Apesar de ser uma empresa tecnologicamente avançada, até a Google utiliza CAPTCHAs como forma de proteger os seus sistemas contra ataques indesejados de spam.
HTML CAPTCHA Code
O código-fonte utilizado neste esforço foi carregado num repositório do GitHub, que concede permissão para a sua utilização gratuita ao abrigo dos termos da licença MIT. Os interessados podem ver um exemplo operacional examinando a demonstração fornecida.
Neste projeto, vamos incorporar um mecanismo CAPTCHA num formulário HTML existente, utilizando o fragmento de código fornecido da seguinte forma:
<!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 é composto principalmente por sete elementos:
O código HTML acima mencionado representa um captcha, que é utilizado para verificar se um utilizador é de facto humano e não um bot automatizado. O componente contém uma etiqueta de título com um ID de “captchaHeading” que serve de título para o formulário de captcha.
O código HTML acima mencionado contém uma etiqueta , que é utilizada para apresentar uma imagem na página Web. Além disso, existem dois elementos com IDs “top” e “bottom”, bem como outro sem qualquer ID que serve de contentor para o texto CAPTCHA. Este último é apresentado utilizando um elemento canvas com a ID “captcha”.
O fragmento de código fornecido parece ser um fragmento HTML que inclui um campo de introdução de texto simples, denominado “Texto”, com uma ID associada de “textBox”. O objetivo deste campo de entrada não é claro sem contexto ou informações adicionais sobre a sua utilização pretendida na página Web ou aplicação de maior dimensão.
O elemento de entrada com um ID de “submitButton” é um botão de submissão que, quando clicado, processa os dados do formulário e verifica se o código CAPTCHA introduzido corresponde ao que é apresentado na página, além de verificar se existem erros de digitação na resposta do utilizador.
O elemento acima mencionado contém um botão com um ID de “refreshButton”, que é do tipo “submit”. Quando este botão é clicado, actualiza o CAPTCHA.
O snippet de código acima mencionado apresenta um elemento HTML span, que serve como um recipiente visualmente atraente para exibir conteúdo. O conteúdo apresentado é gerado dinamicamente com base na validação das entradas fornecidas pelos utilizadores através da implementação de um sistema CAPTCHA.
O componente supramencionado serve como entidade-mãe que engloba vários elementos subordinados dentro dos seus limites, actuando como um contentor para esses componentes.
O modelo HTML CAPTCHA supracitado incorpora a funcionalidade de ligação através da utilização dos elementos e , com o primeiro situado na secção e o segundo posicionado na conclusão do do documento.
Navegar pela extensa gama de etiquetas HTML e seus atributos correspondentes pode ser um desafio para alguns indivíduos. Felizmente, existe um recurso prontamente disponível, conhecido como folha de dicas HTML, que fornece um resumo conciso dos elementos HTML essenciais.Esta ferramenta útil serve como um ponto de referência valioso para quem procura uma revisão rápida da sintaxe HTML.
É possível incorporar este script no design de sites, permitindo uma integração perfeita com formulários pré-existentes neles alojados.
CSS CAPTCHA Code
Utilize CSS, ou Cascading Style Sheets, para aplicar propriedades estilísticas a elementos HTML. O código CSS resultante pode ser utilizado para embelezar o aspeto do formulário de verificaçã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;
}
Pode melhorar o aspeto do contentor do formulário aplicando a propriedade CSS box-shadow , que adiciona um efeito de sombra elegante à volta do elemento. Além disso, tem a flexibilidade de modificar outras propriedades CSS de acordo com as suas preferências para aperfeiçoar ainda mais o design do formulário.
Validação de CAPTCHA utilizando JavaScript
Para dotar um sítio Web de capacidades adicionais, é necessário utilizar JavaScript. Para começar, recupere os elementos necessários, como a tela e o campo de entrada de texto, usando o método document.getElementById(). Isto permitir-lhe-á aceder e manipular estes componentes de forma eficaz.
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');
Neste caso, utilizamos o método document.getElementById() para identificar e isolar um elemento específico no documento com base no seu identificador único, conhecido como “ID”.
Para criar o desafio CAPTCHA, é necessário selecionar uma sequência de caracteres arbitrários. Existem vários métodos para realizar esta tarefa, incluindo o armazenamento de uma coleção de caracteres possíveis numa matriz como ponto de partida para a seleção.
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'];
Eis um exemplo de como pode implementar uma função de geração de CAPTCHA em JavaScript utilizando uma combinação de HTML5 Canvas e o método Math.random():javascriptfunction generateCaptcha() {// Criar elemento canvas para captcha imagevar canvas = document.createElement(“canvas”);canvas.width = 200;canvas.height = 80;// Obter contexto para o canvasvar ctx = canvas.getContext(“2d”);// Definir aleatoriamente a cor do fundo e do textovar bgColor = “#” \+ Math.floor(Math.random() * 16777215).toString(16);var txtColor = “#” \+ Math.floor(Math
Começamos por construir uma nova matriz composta por caracteres arbitrários de alphaNums . Vamos iterar este processo um número pré-determinado de vezes - neste caso, sete iterações. Em cada passagem, introduzimos um carácter recém-selecionado de alphaNums no conjunto em crescimento. Finalmente, utilizamos o método fillText() para inscrever a coleção completa na nossa tela como uma única entidade.
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();
Tenha em atenção que esta função específica apaga a superfície de desenho e restaura todas as saídas, desempenhando ambas um papel crucial no rejuvenescimento da apresentação do texto CAPTCHA.
O processo de validação da entrada do utilizador envolve a comparação com a cadeia CAPTCHA original. Para o efeito, pode criar uma função dedicada que efectue a comparação e devolva um valor booleano que indique se o código introduzido corresponde ou não ao esperado. Isto garantirá a autenticação adequada antes de permitir o acesso a dados ou funcionalidades sensíveis no seu sítio Web.
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
Indique que o código deve ser executado quando a tecla “Enter” é premida ou o botão “Submeter” é clicado, adicionando um ouvinte de eventos para os eventos “keydown” e “click”, respetivamente, nos elementos apropriados, tais como campos de formulário ou botões, com as funções correspondentes para tratar da lógica de submissão dos dados do formulário para atualizar a folha de cálculo.
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
Para resolver o problema de os captchas serem gerados apenas uma vez e ficarem indisponíveis após uma atualização da página ou alteração do url, temos de implementar um mecanismo para atualizar o captcha em cada pedido. Para tal, basta associar o evento “submit” do botão de geração do captcha à chamada da função generate_captcha() dentro da etiqueta de script que o contém. Isto garantirá que é gerado um novo captcha em cada submissão de formulário ou alteração de URL, mantendo assim as medidas de segurança necessárias e permitindo uma experiência de utilizador sem problemas.
refreshButton.addEventListener('click', generate_captcha);
Saída do projeto do validador CAPTCHA
De facto, ao replicar com êxito o formulário de validação CAPTCHA no seu próprio servidor ou ambiente local, poderá ver a saída esperada apresentada na página Web, confirmando que a funcionalidade do captcha está corretamente integrada na base de código. Isto serve como uma indicação de que a implementação foi efectuada corretamente e funciona eficazmente para o fim a que se destina.
Ao introduzir o código de verificação CAPTCHA válido no campo de entrada designado, é apresentada uma resposta correspondente, como se indica a seguir:
Ao introduzir uma resposta inválida ao processo de verificação CAPTCHA através do campo de entrada fornecido, o sistema gera o seguinte feedback:
Proteja o seu sítio Web com CAPTCHAs
Em casos anteriores, várias instituições e empresas sofreram contratempos substanciais, como violações de dados e ataques de spam, devido à ausência de funcionalidades CAPTCHA nas suas plataformas online. Recomenda-se vivamente a implementação de CAPTCHA para proporcionar uma camada adicional de proteção contra actividades cibernéticas maliciosas dirigidas a sistemas baseados na Web.
A Google introduziu uma oferta gratuita conhecida como “reCAPTCHA”, que serve para proteger os sítios Web contra spam e actividades abusivas. Embora o CAPTCHA e o reCAPTCHA possam parecer análogos, têm algumas diferenças. Em certos casos, os CAPTCHAs podem revelar-se exasperantes e difíceis de compreender para muitos utilizadores finais. No entanto, é essencial reconhecer que estas dificuldades são intencionalmente incorporadas devido à sua função crítica na verificação da autenticidade do utilizador.