Criando Captcha com JavaScript

Neste artigo, ensinarei como criar um captcha simples utilizando JavaScript puro e com poucas linhas de código.

Requisitos:

Para criar este captcha, você precisará de:

• Algumas imagens para usar como captcha;
• Baixar o arquivo HTML com os campos necessários para procedimento do captcha.

Vamos iniciar!

Podemos começar o nosso captcha criando um arquivo chamado captcha.js

Neste arquivo, iremos criar três variáveis:

• Uma variável chamada random;
• Uma variável chamada imgCaptcha;
• Uma variável chamada imgName.

let random;
let imgCaptcha;
let imgNome;

Agora, iremos criar um objeto chamado testeCaptcha que irá conter:

• O nome do arquivo de cada imagem utilizada como captcha;
• Uma string que conterá os números e letras da sua imagem de captcha.

let testeCaptcha = {
    captcha1: "jnjd5",
    captcha2: "9lup6",
    captcha3: "xt17y",
    captcha4: "iu1it",
};

É importante lembrar de salvar as imagens em uma mesma extensão, pois as imagens serão importadas de modo aleatório. Também é importante colocar os nomes em sequência. Por exemplo: captcha1.png, captcha2.png…

Adicionamos um evento click ao botão do nosso HTML. Para isso, utilizaremos o addEventListener e chamaremos a função validaCaptcha() que será criada adiante.

document.getElementById("enviaCaptcha").addEventListener("click", validaCaptcha);

O próximo passo agora é criar uma função. A nossa função se chamará validaCaptcha(). Esta função deverá ter:

• Uma variável que receberá o valor digitado no input pelo usuário;
• Uma condicional, que irá testar se: O valor digitado pelo usuário é igual a algum dos valores do objeto testeCaptcha. Se este valor digitado for igual ao valor do atributo gerado de forma aleatória, mostre com um alert: “Captcha Correto”. Senão, chame a função recaptcha(), que será explicada no próximo passo.

function validaCaptcha() {
let inputCaptcha = document.getElementById("inputCaptcha").value;
    // testeCaptcha[imgNome]: conteúdo do captcha1, 2, 3... 
    if (inputCaptcha == testeCaptcha[imgNome]) {
        alert("Captcha Correto!");
    } else {
        recaptcha();
    }
}

Para criar a função recaptcha(), precisaremos que:

• A variável random receba um Math que gere números aleatórios de acordo com a quantidade de imagens que temos. Por exemplo, se temos 5 imagens, o random deverá gerar números aleatórios de 1 a 5.
• A variável imgCaptcha receba a imagem que foi gerada.
• A variável imgName receba a string que você colocou como nome das imagens + a variável random. Por isso, devemos colocar nomes idênticos nas imagens, mudando apenas seu número.
• Adicionar na variável imgCaptcha.src o caminho da imagem + imgName + sua extensão. Por exemplo: “captcha/”+imgName+”.png”;

function recaptcha() {
    random = Math.floor(Math.random() * 4) + 1;
    imgCaptcha = document.getElementById("imagemCaptcha");
    imgNome = "captcha" + random;
    imgCaptcha.src = "img/" + imgNome + ".png";
}

Agora devemos chamar a nossa função recaptcha():

recaptcha();

Pronto, está criado o nosso verificador de captcha simples! Você pode inserí-lo dentro de uma função anônima que será chamada no momento que a tela for carregada, utilizando o addEventListener(“load”). Veja o código completo abaixo:

window.addEventListener("load", function () {

    let random;
    let imgCaptcha;
    let imgNome;

    let testeCaptcha = {
        captcha1: "jnjd5",
        captcha2: "9lup6",
        captcha3: "xt17y",
        captcha4: "iu1it",
    };

    document.getElementById("enviaCaptcha").addEventListener("click", validaCaptcha);

    function validaCaptcha() {
        let inputCaptcha = document.getElementById("inputCaptcha").value;
        // testeCaptcha[imgNome]: conteúdo do captcha1, 2, 3... 
        if (inputCaptcha == testeCaptcha[imgNome]) {
            alert("Captcha Correto!");
        } else {
            recaptcha();
        }
    }

    function recaptcha() {
        random = Math.floor(Math.random() * 4) + 1;
        imgCaptcha = document.getElementById("imagemCaptcha");
        imgNome = "captcha" + random;
        imgCaptcha.src = "img/" + imgNome + ".png";
    }
    
    recaptcha();
});

Código HTML necessário:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Captcha com JavaScript</title>
</head>
<body>
    <img id="imagemCaptcha">
    <input id="inputCaptcha" type="text">
    <button id="enviaCaptcha">Enviar</button>
    <script src="scripts.js"></script>
</body>
</html>

Imagens disponíveis:

Gostou deste artigo? Comente abaixo!