Text Resizer Text Resizer
July 30th, 2010
You're browsing: Scriptmatico.Com » PHP, Scripts » Captcha Basado en click – Un Captcha totalmente diferente

Captcha Basado en click – Un Captcha totalmente diferente

Posted on Oct 03 in PHP, Scriptsby adminPrintText Resizer Text Resizer

En este tutorial, el objetivo es hacer un "click" en el captcha para validar que el formulario no haya sido rellenado por un robot.

Vamos a necesitar dos imágenes:

La Imagen de seguridad:

La imagen de la máscara de Captcha:

A continuación pondre el codigo explicado:

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3.   // iniciamos la session
  5.  
  6.   // declaramos nuestras variables
  7.   $width = 180;
  8.   $height = 90;
  9.   $blob_width = 40;
  10.   $blob_height = 40;
  11.  
  12.   // creamos nuestra imagen
  13.   $image = imagecreatetruecolor($width, $height);
  14.  
  15.   //color background de la imagen
  16.   $white = imagecolorallocate($image, 230, 230, 230);
  17.   $red  = imagecolorallocate($image, 255, 0, 0);
  18.   $blue  = imagecolorallocate($image, 0, 0, 230);
  19.  
  20.   // llenamos el contenedor de la imagen
  21.   imagefilledrectangle($image, 0, 0, $width, $height ,$white);
  22.  
  23.  
  24.   // creamos el background de espirales para nuestra imagen
  25.  
  26.   $theta    = 1;
  27.   $thetac   = 7;
  28.   $radius   = 16;
  29.   $circles  = 20;
  30.   $points   = 32;
  31.  
  32.   for ($i = 0; $i <($circles * $points) - 1; $i++)
  33.   {
  34.     $theta = $theta + $thetac;
  35.     $rad = $radius * ($i / $points );
  36.     $x = ($rad * cos($theta)) + $x_axis;
  37.     $y = ($rad * sin($theta)) + $y_axis;
  38.     $theta = $theta + $thetac;
  39.     $rad1 = $radius * (($i + 1) / $points);
  40.     $x1 = ($rad1 * cos($theta)) + $x_axis;
  41.     $y1 = ($rad1 * sin($theta )) + $y_axis;
  42.     imageline($image, $x, $y, $x1, $y1, $blue);
  43.     $theta = $theta - $thetac;
  44.   }
  45.  
  46.   // obtenemos la posicion de nuestro circulo aleatoriamente
  47.   $x_axis = rand($blob_width, $width) - ($blob_width / 2);
  48.   $y_axis = rand($blob_height, $height)  - ($blob_height / 2);
  49.  
  50.   // dibujamos el circulo
  51.   imagefilledellipse ($image, $x_axis, $y_axis, $blob_width, $blob_height, $red);
  52.  
  53.   // creamos la imagen de mascara
  54.   $mask_image = imagecreatetruecolor($width, $height);
  55.  
  56.   // escogemos el color de nuestro background y color de circulo para nuestra mascara
  57.   $mask_white = imagecolorallocate($mask_image, 255, 255, 255);
  58.   $mask_red  = imagecolorallocate($mask_image, 255, 0, 0);
  59.  
  60.   // llenamos la imagen mascara con nuestro background
  61.   imagefilledrectangle($mask_image, 0, 0, $width, $height ,$mask_white);
  62.  
  63.   // dibujamos el circulo en nuestra mascara
  64.   imagefilledellipse ($mask_image, $x_axis, $y_axis, $blob_width, $blob_height, $mask_red);
  65.  
  66.   // escribimos la imagen en el buffer
  67.   ob_start();
  68.   imagepng($mask_image);
  69.   $mask_image_data = ob_get_contents();  // recibimos los datos y limpiamos el buffer
  71.  
  72.   // convertimos la imagen a Base64
  73.   $mask_image_data_b64 =  base64_encode($mask_image_data);
  74.  
  75.   // guardamos los datos en nuestra variable del servidor
  76.  $_SESSION['captcha_image_code'] = $mask_image_data_b64;
  77.  
  78.  
  79.   // Enviamos las cabeceras del contenido
  80.   header('Content-type: image/jpeg');
  81.   header('Cache-control: no-cache');
  82.  
  83.   // lanzamos la imagen al navegador
  84.   imagejpeg($image);
  85.  
  86.   imagedestroy($image);
  87.  
  88.   ?>

Ahora el formulario:

PLAIN TEXT
HTML:
  1. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data"> 
  2.       <p>Name<br/><input type="text" name="name" /></p> 
  3.       <p>Comment<br/><textarea name="message"></textarea></p>
  4.       <p>
  5.         Click the Red Circle to continue:<br/>
  6.         <input type='image' name='submit' src='captcha.php' alt='Captcha Security'  />
  7.       </p>
  8.   </form>

Por ultimo la validacion:

PLAIN TEXT
PHP:
  2.  
  3.   if(isset($_POST['submit_x']) && isset($_POST['submit_y'])) { 
  4.  
  5.       if(!empty($_POST['name']) && !empty($_POST['message'])) { 
  6.  
  7.         // retrive the image captcha data
  8.         $data = base64_decode($_SESSION['captcha_image_code']);
  9.  
  10.         $captcha_image = imagecreatefromstring($data);
  11.         $x = $_POST['submit_x'];
  12.         $y = $_POST['submit_y'];
  13.  
  14.         // get the pixel color of the clicked x and y coordinate
  15.         $rgb = imagecolorat($captcha_image, $x, $y);
  16.         $color_tran = imagecolorsforindex($captcha_image, $rgb);
  17.  
  18.         // check if the color is red and red only
  19.         $captcha_ok = ($color_tran['red'] == 255 && $color_tran['green'] == 0 && $color_tran['blue'] == 0 && $color_tran['alpha'] == 0) ;
  20.  
  21.         if($captcha_ok) { 
  22.  
  23.           $result = "Thank you for submitting your comment.";           
  24.  
  25.         } else { 
  26.  
  27.           $result = "Please make sure you click the red circle!"; 
  28.  
  29.         } 
  30.  
  31.       } else { 
  32.  
  33.           $result = "Please fill out the entire form."; 
  34.  
  35.       } 
  36.  
  37.   }

Un cambio adicional aquí es recuperar la imagen de la máscara de la sesión y volver a poner esa imagen de un objeto y luego obtener el color del píxel de X e Y.

Para ello, primero tenemos que recuperar la imagen de la máscara de la sesión y luego descifrar como se muestra a continuación:

PLAIN TEXT
PHP:
  1. // retrive the image captcha data
  2.   $data = base64_decode($_SESSION['captcha_image_code']);

A continuación, convertirlo de nuevo en una imagen del objeto utilizando la funcion ImageCreateFromString().

PLAIN TEXT
PHP:
  1. $captcha_image = imagecreatefromstring($data);

Luego recuperar la coordenadas X e Y desde el primer clic que el usuario envía, junto con el color del píxel usando imagecolorsforindex (). Nos aseguramos de que sólo se obtiene un color rojo y nada más.

PLAIN TEXT
PHP:
  1. // obtenemos el  color del pixel que fue clickeado con las coordenas "x" y "y"
  2.   $rgb = imagecolorat($captcha_image, $x, $y);
  3.   $color_tran = imagecolorsforindex($captcha_image, $rgb);
  4.  
  5.   // verificamos que el color sea solo rojo
  6.   $captcha_ok = ($color_tran['red'] == 255 && $color_tran['green'] == 0 && $color_tran['blue'] == 0 && $color_tran['alpha'] == 0) ;

Despues de todo esto el formulario nos quedaria asi:

PLAIN TEXT
HTML:
  1. <?php 
  2. session_start();
  3.  
  4. if(isset($_POST['submit_x']) && isset($_POST['submit_y'])) { 
  5.  
  6.     if(!empty($_POST['name']) && !empty($_POST['message'])) { 
  7.  
  8.       // retrive the image captcha data
  9.       $data = base64_decode($_SESSION['captcha_image_code']);
  10.  
  11.       $captcha_image = imagecreatefromstring($data);
  12.       $x = $_POST['submit_x'];
  13.       $y = $_POST['submit_y'];
  14.  
  15.       // get the pixel color of the clicked x and y coordinate
  16.       $rgb = imagecolorat($captcha_image, $x, $y);
  17.       $color_tran = imagecolorsforindex($captcha_image, $rgb);
  18.  
  19.       // check if the color is red and red only
  20.       $captcha_ok = ($color_tran['red'] == 255 && $color_tran['green'] == 0 && $color_tran['blue'] == 0 && $color_tran['alpha'] == 0) ;
  21.  
  22.       if($captcha_ok) { 
  23.  
  24.         $result = "Thank you for submitting your comment.";           
  25.  
  26.       } else { 
  27.  
  28.         $result = "Please make sure you click the red circle!"; 
  29.  
  30.       } 
  31.  
  32.     } else { 
  33.  
  34.         $result = "Please fill out the entire form."; 
  35.  
  36.     } 
  37.  
  38. } 
  39. ?>
  40.  
  41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  42. <html xmlns="http://www.w3.org/1999/xhtml"> 
  44. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  45. <title>Captcha Demo</title> 
  46. </head> 
  47.  
  49.  
  50. <?php if(!empty($result)) echo "<div style='color:#990000; margin-bottom: 20px;'>" . $result . "</div>"; ?> 
  51.  
  52. <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data"> 
  53.     <p>Name<br/><input type="text" name="name" /></p> 
  54.     <p>Comment<br/><textarea name="message"></textarea></p>
  55.     <p>
  56.       Click the Red Circle to continue:<br/>
  57.       <input type='image' name='submit' src='captcha.php' alt='Captcha Security'  />
  58.     </p>
  59. </form> 
  60.  
  61. </body> 
  62. </html>

Ahora puedes implementarlo en tu web, puedes cambiar los colores y jugar un poco con esta validacion, veras que no es muy dificil.

Compártelo!

Post to Twitter


  • No Related Post

About admin

Entry Details: This entry was posted on Sábado, Octubre 3rd, 2009 at 23:34, by admin, and is filed under PHP, Scripts. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Print This!
  • No Related Post

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Back to Top
[x] Cerrar
E-mail