Como fazer Captcha com JavaScript

[download id=”227″]

O Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) é uma ferramenta utilizada para combater spam utilizando um método chamado de teste de Turing reverso. Normalmente o servidor pede ao usuário que termine um teste que não pode ser completado por um computador e por isso assume-se que quem respondeu corretamente é um humano.

Nesse artigo/tutorial veremos como fazer 2 “captchas” simples e rápidos usando apenas o JavaScript puro ao invés efetua-lo pelo servidor. A vantagem de fazê-lo assim é a de podermos manter o controle no front-end e fornecer uma proteção básica e rápida. Por outro lado, o código estará exposto para “não robôs” contorna-lo. Vale o julgamento de cada um para saber se este controle é o suficiente.

Soma de números aleatórios

Um jeito fácil de fazer um teste é fornecer 2 números aleatórios e pedir para o usuário digitar a resposta completa.

• Primeiro precisamos do html que será usado no exemplo:

<form id="formContato">
   <p id="teste"></p>
   <input id="valida" type="text" />
   <input type="submit" value="Enviar" />
   <p id="mensagem"></p>
</form>

• Agora criamos as variáveis para o cálculo e a reposta. Neste exemplo, criaremos 2 números aleatórios de 0 a 9 e vamos soma-los. Mas você poder fazer qualquer faixa e operação

var num1 = Math.floor(Math.random() * 10);
var num2 = Math.floor(Math.random() * 10);
var resposta = num1 + num2;

•  Adicionamos um evento para que, ao carregar a página, seja capturado o parágrafo que fará a pergunta do teste e utilizamos as variáveis para gerar uma pergunta diferente cada vez que a página recarrega:

window.onload = function () {
   document.getElementById("teste").innerHTML = "qual a soma de " + num1 + " + " + num2 + "?";
}}

• Dentro da função anterior, adicionaremos um evento ao ser feito o submit do formulário para conferirmos se a resposta está correta. Caso esteja, a submissão dele ocorre normalmente, senão trancamos o envio e mostramos uma mensagem na tela

document.getElementById("formContato").onsubmit = function (e) {
  if (document.getElementById("valida").value != resposta) {
    document.getElementById("mensagem").innerHTML = "A soma está errada!";
    e.preventDefault();
  }
}

Com isso temos todo o código necessário para fazer nosso captcha funcionar, execute a página e faça o teste você mesmo.

Teste x Valor

A segunda alternativa é um pouco mais complexa, mas ainda assim muito simples de implementar. Ela pode ser utilizada para mostrar uma imagem, dados complexos, etc… e um valor que corresponde a resposta correta.

• Neste exemplo vamos tentar utilizar o máximo possível da lógica anterior para evitar complicar algo desnecessário. O form de antes será reutilizado exatamente como era e a lógica será novamente implementada dentro da função do evento window.onload
• Vamos então adicionar as 2 variáveis que precisaremos. A Primeira será um vetor contendo objetos com 2 propriedades, teste e valor. A segunda é um gerador aleatório de índice.

window.onload = function () {
  var vetor = [
    { teste: "BBbananaAA", valor: "banana" },
    { teste: "AAabacaxiII", valor: "abacaxi" },
    { teste: "BBtomateAA", valor: "tomate" },
    { teste: "BBkiwiAA", valor: "kiwi" },
    { teste: "BBmelaoAA", valor: "melao" }
  ];
  var indice = Math.floor(Math.random() * 100) % 5;
}

Note que a propriedade teste do vetor é possível utilizar o caminho de uma imagem, uma pergunta, uma data, qualquer coisa. O importante é que o que for colocado no teste precisa ter uma reposta correspondente e a tag onde ele será inserido talvez precise ser trocada ou tratada (ex.: se for uma imagem, trocar para img com o src sendo definido pelo caminho da imagem).

• Utilizando o gerador aleatório de índice, buscamos um item dentro do vetor e o exibimos para ser o teste. Lembrando que aqui meu vetor tem 5 itens, você provavelmente terá um vetor maior, então ajuste o gerador de acordo com a necessidade

document.getElementById("teste").innerHTML = "Qual a palavra formada pelas letras minusculas do texto " + vetor[indice].teste + "?";

• Por último temos novamente o teste antes de efetuar o submit do formulário que irá conferir se a resposta é igual ao valor do objeto naquela mesma posição do vetor. Com isso saberemos se podemos deixar o formulário ser enviado ou se precisamos bloqueá-lo

document.getElementById("formContato").onsubmit = function (e) {
  if (document.getElementById("valida").value != vetor[indice].valor) {
    document.getElementById("mensagem").innerHTML = "Resposta Errada";
    e.preventDefault();
  }
}