captchaConJsEnFormularioDeContacto/validar.js at main · SebasGalvan/captchaConJsEnFormularioDeContacto · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
var claveHash = "";

const actualizar = document.querySelector('#alcualizar_clave');
const enviar = document.querySelector('#enviar');
const formulario = document.querySelector('#formularioContacto');

window.addEventListener("load", cargarClave);
actualizar.addEventListener('click', cargarClave);
formulario.addEventListener('onSubmit', validar);

function validar(e) {
    e.preventDefault();


    const catcha = document.querySelector('#catcha');
    const valor = catcha.value;

    if (valor === "") {
        const errorCatcha = document.querySelector('#errorCatcha');
        errorCatcha.hidden = false;
        console.log("Vacio");
        setTimeout(() => {
            errorCatcha.hidden = true;
            limpiarCaptcha(catcha);
            cargarClave();
        }, 5000);
    } else {

        const clave_enviada = hashear(valor.trim());

        if (clave_enviada === claveHash) {
            console.log("Bien") ;

            const errorCatcha = document.querySelector('#okCatchaOk');
            errorCatcha.hidden = false;
            setTimeout(() => {
                errorCatcha.hidden = true;
                limpiarCaptcha(catcha);
                cargarClave();
                formulario.submit()
            }, 5000);

        }else{

            const errorCatcha = document.querySelector('#errorCatchaIngresoErroneo');
            errorCatcha.hidden = false;
            console.log("Erros pasando Ingreso Incorrecto") ;
            setTimeout(() => {
                errorCatcha.hidden = true;
                limpiarCaptcha(catcha);
                cargarClave();

            }, 5000);

        }
    }

}

function limpiarCaptcha(captcha){
    captcha.value = "";

}

// --------------------------------------------------------------------------------------------

//Funcion para generar la clave ...
// Esto se haria del lado del servidor y lo enviaria via http
//Aca lo simulamos
// num ---> Es la longitud de la clave que queremos generar...
function generarClaveAleatoria(num){
    //Caracteres para generar aleatoriamente la clave
    const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let clave= ' ';

    const charactersLength = characters.length;

    for ( let i = 0; i < num; i++ ) {
        clave += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    // devolvemos la clave generada
    return clave;
}


//Funcion para mostrar la clave en la pantalla
function cargarClave(){

    // Seleciona el canvas ...
    const canvas = document.querySelector('#canvas_capcha');

            if (canvas && canvas.getContext) {
            var ctx = canvas.getContext("2d");
            limpair_canvas(ctx, canvas);

                if (ctx) {
                            var x = canvas.width/2;
                            ctx.beginPath();
                            ctx.moveTo(x, 0);
                            ctx.width = 150;
                            ctx.stroke();
                            ctx.textAlign = '';

                            ctx.font="25px Verdana";
                            ctx.fillStyle = "black";
                            mi_clave = generarClaveAleatoria(6);


                            // Para que la clave no se pueda copiar y pegar directamente la encriptamos --> En este caso uso uno muy basico, lo ideal seria usar una libreria como bcrypt en node...
                            claveHash = hashear(mi_clave.trim());

                            //Lo dibujo en el canvas
                            ctx.fillText(mi_clave,0,25);
                            //Reseteo la clave para que no pueda ser accedida
                            mi_clave = " ";

                        }
            }
}

//Reset del campo canvas
function limpair_canvas(context, canvas){
    context.clearRect(0, 0, canvas.width, canvas.height);
    var w = canvas.width;
    canvas.width = 1;
    canvas.width = w;
}


//Funcion para encriptar la clave
function hashear(str,seed = 0){

        let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
        for (let i = 0, ch; i < str.length; i++) {
            ch = str.charCodeAt(i);
            h1 = Math.imul(h1 ^ ch, 2654435761);
            h2 = Math.imul(h2 ^ ch, 1597334677);
        }
        h1 = Math.imul(h1 ^ (h1>>>16), 2246822507) ^ Math.imul(h2 ^ (h2>>>13), 3266489909);
        h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909);


        return 4294967296 * (2097151 & h2) + (h1>>>0);
};