Hoje em dia, os CAPTCHAs são parte integrante da segurança de um site. Milhões de testes CAPTCHA são concluídos 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-o como um alvo para spammers.

Aqui está tudo o que você precisa saber sobre CAPTCHAs e como implementá-los facilmente em seu site usando 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 usado para determinar se o usuário é humano ou não.

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

A ideia do CAPTCHA origina-se do Teste de Turing. Um Teste de Turing é um método para testar se uma máquina pode pensar como um humano ou não. Curiosamente, um teste CAPTCHA pode ser chamado de "Teste de Turing reverso", pois, neste caso, o computador cria o teste que desafia os humanos.

Por que seu site precisa de validação CAPTCHA?

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

• CAPTCHAs ajudam a evitar que hackers e bots façam spam nos 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 força bruta de login de seu site, que os hackers usam para tentar fazer login usando milhares de senhas.
• 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 de ingressos, pois algumas pessoas compram um grande número de ingressos para revenda. O CAPTCHA pode até evitar registros falsos para eventos gratuitos.
• Os CAPTCHAs podem impedir que os cibercriminosos enviem spam para blogs com comentários duvidosos e links para sites prejudiciais.

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

Código HTML CAPTCHA

HTML, ou HyperText Markup Language, descreve a estrutura de uma página da web. Use o seguinte código HTML para estruturar seu formulário de validação CAPTCHA:

Captcha Validator usando HTML, CSS e JavaScript



texto captcha




Atualizar

Este código consiste principalmente em 7 elementos:

• : Este elemento é usado para exibir o título 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 ou não.
• : 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.

Os arquivos CSS e JavaScript estão vinculados a esta página HTML por meio do e elementos respectivamente. Você deve adicionar o link tag dentro do cabeça tag e roteiro tag no final do corpo.

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

Relacionado: Folha de referências do HTML Essentials: tags, atributos e muito mais

Código CSS CAPTCHA

CSS, ou Cascading Style Sheets, é usado para definir o estilo de elementos HTML. Use o seguinte código CSS para definir o estilo dos elementos HTML acima:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
corpo {
cor de fundo: # 232331;
família da fonte: 'Roboto', sans-serif;
}
#captchaBackground {
altura: 200px;
largura: 250px;
cor de fundo: # 2d3748;
display: flex;
alinhar-itens: centro;
justificar-conteúdo: centro;
direção flexível: coluna;
}
#captchaHeading {
cor branca;
}
#CAPTCHA {
margem inferior: 1em;
tamanho da fonte: 30px;
espaçamento entre letras: 3px;
cor: # 08e5ff;
}
.Centro {
display: flex;
direção flexível: coluna;
alinhar-itens: centro;
}
#botão de envio {
margem superior: 2em;
margem inferior: 2em;
cor de fundo: # 08e5ff;
borda: 0px;
intensidade da fonte: Negrito;
}
#refreshButton {
cor de fundo: # 08e5ff;
borda: 0px;
intensidade da fonte: Negrito;
}
#caixa de texto {
altura: 25px;
}
.Captcha incorreto {
cor: # FF0000;
}
.correctCaptcha {
cor: # 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 o Propriedade CSS box-shadow.

Código JavaScript CAPTCHA

JavaScript é usado para adicionar funcionalidade a uma página da web estática. Use o seguinte código para adicionar funcionalidade completa ao formulário de validação CAPTCHA:

// document.querySelector () é usado para selecionar um elemento do documento usando seu ID
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums contém os caracteres com os quais você deseja criar o CAPTCHA
deixe 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'];
deixe emptyArr = [];
// Este loop gera uma string aleatória de 7 caracteres usando alphaNums
// Além disso, esta string é exibida como um CAPTCHA
para (deixe i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Este ouvinte de evento é estimulado sempre que o usuário pressiona o botão "Enter"
// "Correto!" ou a mensagem "Incorreto, tente novamente" é
// exibido após validar o texto de entrada com CAPTCHA
userText.addEventListener ('keyup', function (e) {
// O valor do código-chave do botão "Enter" é 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Correto!";
} senão {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Incorreto, tente novamente";
}
}
});
// Este ouvinte de evento é estimulado sempre que o usuário clica no botão "Enviar"
// "Correto!" ou a mensagem "Incorreto, tente novamente" é
// exibido após validar o texto de entrada com CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Correto!";
} senão {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "Incorreto, tente novamente";
}
});
// Este ouvinte de evento é estimulado sempre que o usuário pressiona o botão "Atualizar"
// Um ​​novo CAPTCHA aleatório é gerado e exibido depois que o usuário clica no botão "Atualizar"
refreshButton.addEventListener ('click', function () {
userText.value = "";
deixe refreshArr = [];
para (seja j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

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

Ao inserir o código CAPTCHA correto na caixa de entrada, a seguinte saída será exibida:

Quando você insere qualquer código CAPTCHA incorreto na caixa de entrada, a seguinte saída será exibida:

Torne seu site seguro com CAPTCHAs

No passado, muitas organizações e empresas sofreram pesadas perdas, como violações de dados, ataques de spam, etc. por 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.

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 haja uma razão importante para eles serem difíceis.

Como funcionam os CAPTCHAs e por que são tão difíceis?

CAPTCHAs e reCAPTCHAs evitam spam. Como eles funcionam? E por que você acha os CAPTCHAs tão difíceis de resolver?

Leia a seguir

Sobre o autor