cofirmar si eres "humano"

Alun · #1 (**permalink**) 21/01/2010, 12:30

Hola:

Estoy intentando hacer para clase una "validación de usuario humano" (no se cómo se llama exactamente, es la imagen esa de "introduce los caracteres que ves en la imagen"). De momento he conseguido hacer que los números aparezcan como "value" en un botón, al darle click al mismo (más o menos lo que me pedían), pero me gustaría hacerlo bien, y no tan cutre como me ha salido, y hacerlo con una imagen. El prolema es que no se exactamente qué hay que hacer, si son imágenes que se generan aleatoriamente al cargar un formulario, si son imágenes ya creadas y que se seleccionan aleatoriamente o cómo es...

Este es mi código de momento:

Código PHP:

  <html> <head> <title> Validar </title> 
 
     <script language="JavaScript"> 
         <!-- 
             function numerosAleatorios() 
        { 
            alert('numeros'); 
            uno=Math.ceil(Math.random()*10); 
            dos=Math.ceil(Math.random()*10); 
            tres=Math.ceil(Math.random()*10); 
            cuatro=Math.ceil(Math.random()*10); 
            if(uno==10) 
            { 
                uno--; 
            } 
            else if(dos==10) 
                { 
                    dos--; 
                } 
                else if(tres==10) 
                    { 
                        tres--; 
                    } 
                    else if(cuatro==10) 
                        { 
                            cuatro--; 
                        } 
            numeros=String.concat(uno,dos,tres,cuatro); 
            document.formu.boton_numeros.value=numeros; 
            return numeros; 
        } 
        function compararNumeros() 
        { 
            if(numeros!=document.formu.numeritos.value) 
                { 
                    alert('los números que has introducido no coinciden con el que yo te he dado'); 
                } 
        } 
        //--> 
     </script> 
 </head> 
<body> 
     <form name="formu"> 
         <input type="button" value="generar números" name="boton_numeros" onClick="numerosAleatorios();"> 
         Introduce los números:<input type="text" maxlength="4" name="numeritos" onBlur="compararNumeros();"> 
         <br><br> 
         <input type="submit" name="enviar" onClick="validar();"> 
         <input type="reset" name="limpiar">

Si alguien me puede ayudar (a subir nota xD), le estaría muy agradecido.

Gracias:Alun.

doylelives · #2 (**permalink**) 21/01/2010, 12:46

Lo que mencionas se denomina captcha.
http://es.wikipedia.org/wiki/Captcha

Yo te aconsejo usar php para lograrlo, ya que puedes usar la libreria php para generar imagenes dinamicamente.
Fijate que posee un ejemplo funcionando
http://blog.unijimpe.net/crear-captcha-con-php/

maycolalvarez · #3 (**permalink**) 21/01/2010, 13:38

otra técnica que complementa los captcha es el envió de email con códigos de confirmación, eso, si dispones de un registro de usuarios, implementar captchas más email disminuye las posibilidades de vulnerar tu sistema

Alun · #4 (**permalink**) 21/01/2010, 14:04

Muchas gracias por contestar:

En realidad, de momento (solo de momento), no tengo intención de crear una página que necesite tal nivel de seguridad, solamente es un trabajo de clase, y la cosa es que tengo que hacerlo con html y javascript, no puedo usar php, primero, porque aún no lo hyemos visto, y segundo, porque tampoco se nada de php.

No hay alguna manera de hacer un captcha solo con javascript, o con jQuery como mucho, o tengo que usar siempre php para hacerlos?

doylelives · #5 (**permalink**) 21/01/2010, 14:24

Podrías crear imagenes con codigo predeterminados, dentro de ellas y usando una funcion random mostrar dichas imagenes, el usuario debe ingresar el codigo que pusiste en la imagen.
Luego debes verificar que ingresó el correcto usando javascript.

Carlangueitor · #6 (**permalink**) 21/01/2010, 15:28

Otra opción es crear Preguntas aleatorias, algo así como ¿Cuanto es 1+1? .

Saludos

Alun · #7 (**permalink**) 21/01/2010, 15:33

bueno, de la respuesta de doylelives (por cierto, muchas gracias) he pensado en asignar algunas imágenes a un array, y hagcer que me las muerstre aleatoriamente, por ejemplo en un div.

Ahora, lo que no se es cómo comparar la imagen aleatoria con un código asignado a cada una, ni cómo asignarle ese código. Si me pudierais explicar, por favor.

Gracias: Alun

caricatos · #8 (**permalink**) 21/01/2010, 17:38

Hola:

En cuestiones de seguridad, decantarse por javascript, es posiblemente la peor opción... debido al constante envío de spam en mi sistema de comentarios, me animé a mejorarlo, y lo documenté en este tutorial: Ponga comentarios en su web

De todos modos, se me ocurre un sistema sin lenguaje del servidor, por ejemplo, hacer submit en una imagen, y solo validar si se pincha en alguna parte específica de la imagen... por ejemplo en la esquina superior izquierda de una imagen, y como los type image, hacen submit e indican la coordenada, se pueden leer esos valores si el método es get (ver nuestras wiki-faqs) se podría en este caso validar si x < 20 e y < 20 (para dejar un margen razonable)...

Saludos

Alun · #9 (**permalink**) 21/01/2010, 18:16

Caricatos, agradezco esa respuesta, pero de momento ando haciendo un curso bastante básico, y empiezo a tocar ahora javascript (la verdad, tengo ya ganas de acabarlo y pasar a PHP, porque veo que es muchísimo más práctico y versátil en practicamente todos los aspectos).

Encontré una manera fácil, posiblemente faciltambién de vulnerar y que probablemente me va a ayudar a conseguir una buena nota:

He metido unas imágenes en un array (cuyo nombre coindice con el texto dibujado en ellas), y en otra variable (más bien un array de un solo valor, para cogerlo desde una función), he hecho que se me elijan aleatoriamente con .random y sumando 1 (esto es un error, ya que de 4 imágenes solo consigo coger la do y la tres), y luego imprimo en pantalla la ruta más esta variable.

Aparte, en una función comparo la variable que contenía el valor de la imagen con el valor introducido en un campo de texto. Es un poco burdo, pero, de momento, me sale bien, salvo por el fallo ese del .random (¿no hay alguna sentencia que elija aleatoriamente números mayores de 0 o 1?).

Aquí dejo el código, por si a alguien le sirve, y por si podeis ayudarme a corregir el fallillo ese:

<html>
<head>
<script language="Javascript">

</script>
</head>
<body>
<form name="formu">
<input type="text" name="texto" onBlur="comparar();">
</form>

</body>
</html>

ceSharp · #10 (**permalink**) 22/01/2010, 05:43

hola Alun,

mirate esta forma de hacerlo
---------------------------------------------------

var imagenes = new Array("0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.j pg");
var valor = new Array(0,1,2,3,4,5);
var aleatorio = Math.round(Math.random()*6)

function mostrarCaptcha()
{
document.getElementById('captcha').src = imagenes[aleatorio];
}
function validarCaptcha()
{
var solucion = valor[aleatorio]
var tx_respuesta = document.getElementById('tx_captcha').value;
if(solucion == tx_respuesta)
alert('correcto')
else
alert('incorrecto')
}
--------------------------
y en HTML
--------------------------
<body onload="mostrarCaptcha()">
<div>
<img src="" id="captcha" alt="" />
<input type="text" id="tx_captcha" onblur="validarCaptcha()" />Escribe los caracteres<br />
</div>
</body>
----------------------------------
De esta forma tenemos dos arrays que corresponden uno a la imagen a mostrar y el otro a su valor. se genera un aleatorio entre 0 y 5 y esa es la imagen que se mostrará en pantalla.
cuando se comprueba lo escrito respecto a la imagen lo que valoramos es el array valor.
pruebalo y si tienes dudas nos cuentas.

salu2

Alun · #11 (**permalink**) 23/01/2010, 05:06

Hola, ceSharp:

Muchas gracias por el código este, lo estuve estudiando, y parecía que me iba a ir bien, pero al intentar ejecutarlo en mozilla y en IE, me dice que la función mostrarCaptcha no está definida (Error: mostrarCaptcha is not defined Archivo de origen: ............./comprobar.html Línea: 1). Probablemente, no sea un problema de la función, ya que el fallo lo da en la primera línea. Incluso al ver eso pensé que podía ser que le faltaba la definición del documento, pero tampoco es eso.

También pensé que podía ser que le faltaban las llaves al if y al else, pero se las he puesto y tampoco es.

Sigo investigando qué me puede fallar.

dggluz · #12 (**permalink**) 23/01/2010, 09:34

Pídele al usuario que "ingrese este texto: 'segundaPagina'" en un textbox. Luego, al hacer submit, cambias el action del formulario por el texto que tenían que ingresar concatenado con la extensión ('.html'). Si lo ingresan mal, simplemente se dirigirán a una página no existente. Es obvio que no da mucha seguridad, pero para un sistema diseñado para un proyecto escolar que además no use lenguaje de servidor, me parece que está bien. ¡Suerte!

Alun · #13 (**permalink**) 23/01/2010, 17:25

ddgluz, agradezco también tu idea:

en realidad, esto es (más o menos) lo que me han pedido, solo que tengo un "reto" con mi profesor, y siempre intento ir un poco más allá de lo que nos pide. Esta vez, solo nos explicó como hacerlo con texto, le pregunté por lo mismo pero con imágenes, y dijo que ya lo explicaría un poco más adelante. Normalmete, intento probar siempre las cosas antes de que las explique, de ahí que quiera ir un poco más allá de lo que nos ha pedido. No obstante, gracias por la idea.

Alun · #14 (**permalink**) 30/01/2010, 05:51

Bueno, ayer terminamos de ver en clase este ejercicio. Dejo aquí el código por si alguien necesita uno.

Código HTML:

<html>
	<head>
		<title>Captcha</title>
		<script language="JavaScript" type="text/javascript">
			<!--
			var imagenes = new Array('1.jpg','2.jpg');
			var valor = new Array('1','2');
			var aleatorio = Math.random();
			
			if (aleatorio<.5)
			{
				aleatorio=0;
			}
			else
				{
					aleatorio = 1;
				}
			
			function mostrarCaptcha()
			{
			var imagen = document.getElementById('captcha').src = imagenes[aleatorio];
			}
			function validarCaptcha()
			{
			var solucion = valor[aleatorio];
			var tx_respuesta = document.getElementById('tx_captcha').value;
			if(solucion == tx_respuesta)
			{
				alert('correcto');
			}
			else
				{
					alert('incorrecto');
				}
			}
			
				//-->
		</script>
	</head>
	<body onLoad="mostrarCaptcha();">
		<form name="formu">
			<img id="captcha">
			<input type="text" id="tx_captcha" onBlur="validarCaptcha();">Escribe los caracteres<br>
		</form>
	</body>
</html>

Gracias a todos los que ayudasteis =)

Un saludo: Alun.