Sigueme por RSS! RSS

Captcha en CodeIgniter


Al momento de agregar Captcha a nuestros sistemas tenemos varias opciones, una de las más interesantes, el reCaptcha de google. CodeIgniter dispone de una librería fácil de usar, que permite generar estas imágenes sin complicaciones, a continuación un ejemplo de uso:

Debemos incluir la librería:
$this->load->helper('captcha');

Con la función create_captcha() generamos la imagen personalizada, recibe como parámetro un array con las especificaciones. ejemplo:
$arrCaptcha = array(
   //
   //'word' => ''//indica la palabra que aparecerá en la imagen, 
   // por defecto genera aleatoriamente 

   // ruta y nombre de la carpeta que almacenara las imagenes
   'img_path'   => './captcha/',
   
   // direccion web donde se encuentraran alojadas las imagenes
   'img_url'    => base_url().'captcha/',
 
   // ruta donde se encuentra el font a usar en la imagen
   'font_path'  => './system/fonts/texb.ttf',
   
   // ancho de la imagen en pixeles
   'img_width'  => '150',
     
   // alto de la imagen
   'img_height' => '30',
   
   // tiempo en segundos para eliminar la imagen generada de la carpeta
   // 3600 es una hora
   'expiration' => '3600'
);

// generamos el captcha
$captcha = create_captcha($arrCaptcha);

Luego de generar el captcha, disponemos de un array con los siguientes datos:
Array
(
    [word]  => el código que contiene la imagen
    [time]  => el tiempo de cuando fue generada [TIMESTAMP (in microtime)]
    [image] => el código html de la imagen  
)

Para poder generar el captcha, el servidor debe cumplir con los siguientes requerimientos y especificaciones:
- es necesario tener instalada la librería GD (ejemplo para Debian/Ubuntu).
- para crear el captcha son requeridas las propiedades img_path y img_url.
- si no se indica una cadena de caracteres en la propiedad word, entonces se generara una cadena aleatoria.
- si no se especifica una ruta de acceso a la carpeta que alberga los font, se usara la fuente de la GD.
- la carpeta captcha debe tener permisos de escritura (666 o 777).

A continuación el código de ejemplo utilizado:

Controlador: captcha_c.php
(clic para mostrar/ocultar).
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Captcha_c extends CI_Controller {

   public function __construct(){
      parent::__construct();

      // cargamos el asistente de captcha y url
      $this->load->helper(array('captcha','url'));

      // usaremos librerias para sesion y validacion de formulario
      $this->load->library(array('form_validation','session'));
   }

   function index(){

      $arrValidaciones = array(
         array(
            'field'   => 'txtUsuario',
            'label'   => 'Usuario',
            'rules'   => 'required'
         ),
         array(
            'field'   => 'txtCodeImg',
            'label'   => 'código de imagen',
            'rules'   => 'required|callback__valida_captcha'
         )
      );

      // establecemos las reglas de validacion
      $this->form_validation->set_rules($arrValidaciones);    
    
      // indicamos que los errores se les aplique la clase .. (CSS)
      $this->form_validation->set_error_delimiters('<span id="msj_error"> * ','</span>');

      
      if ($this->form_validation->run() == FALSE){

         $arrCaptcha = array(
            'img_path'   => './captcha/',
            'img_url'    => base_url().'captcha/',
            'font_path'  => './system/fonts/texb.ttf',
            'img_width'  => '150',
            'img_height' => '30',
            'expiration' => '3600'
         );

         // generamos el captcha
         $captcha = create_captcha($arrCaptcha);
         //echo '<pre>',print_r($captcha),'</pre>';exit;

         // enviaremos la imagen generada
         $arrDatos['imagen']= $captcha['image'];

         // guardamos en la sesion la cadena generada
         $this->session->set_userdata('code_captcha',$captcha['word']);

         // cargamos la vista
         $this->load->view('captcha_v',$arrDatos);
      }else{
         echo "El código introducido es correcto!!";
      }
    }

    function _valida_captcha($code_usuario){

      // obtenemos el codigo almacenaod en la sesion
      $code_generado = $this->session->userdata('code_captcha');

      // -----------------------------------------------------------
      // si deseamos que la comparacion sea case sensitive
      // comentatamos las siguientes dos lineas..
      $code_usuario  = strtolower($code_usuario);
      $code_generado = strtolower($code_generado);
      // -----------------------------------------------------------

      // comparamos ..
      if (empty($code_usuario) or $code_usuario<>$code_generado){

         $this->form_validation->set_message('_valida_captcha',
         'El código introducido es incorrecto!!');
         return FALSE;
      }else{
         return TRUE;
      }
   }  
}
/* End of file captcha_c.php */
/* Location: ./application/controllers/captcha_c.php */

Vista: captcha_v.php
(clic para mostrar/ocultar).
<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8" />
      <title>Captcha en CodeIgniter</title>
      <style type="text/css">
      body {
         background-color: #fff;
         margin: 40px;
         font: 13px/20px normal Helvetica, Arial, sans-serif;
         color: #4F5155;
      }
      h1 {
         color: #444;
         background-color: transparent;
         border-bottom: 1px solid #D0D0D0;
         font-size: 19px;
         font-weight: normal;
         margin: 0 0 14px 0;
         padding: 14px 15px 10px 15px;
      }
      #body{
         margin: 0 15px 0 15px;
      }    
      #container{
         margin: 10px;
         border: 1px solid #D0D0D0;
         -webkit-box-shadow: 0 0 8px #D0D0D0;
      }
      form #msj_error {
         font-size: 12px;
         color: red;
      }
      label{
         font-weight: bold;
         width: 100px;  
      }
      </style>
   </head>
   <body>
   <div id="container">
      <h1>Captcha en CodeIgniter!</h1>
         <div id="body">
<?php

// esto imprime la etiqueta <form method="post" ... 
echo form_open('captcha_c/index',array('id' => 'form_captcha')); 
        
// armamos los campos 
$txtUsuario = array( 
    'name'      => 'txtUsuario', 
    'id'        => 'txtUsuario', 
    'maxlength' => '20', 
    'size'      => '20', 
    'value'     => set_value('txtUsuario') 
); 

$txtCodeImg = array( 
    'name'      => 'txtCodeImg', 
    'id'        => 'txtCodeImg', 
    'maxlength' => '20', 
    'size'      => '20', 
    'value'     => set_value('txtCodeImg') 
); 

$btSubmit = array( 
     'name'      => 'btSubmit', 
     'id'        => 'btSubmit', 
     'value'     => 'Validar', 
);

// usuario 
echo '<p>',form_label('Nombre de usuario: '),form_input($txtUsuario)
          ,form_error('txtUsuario'),'</p>'; 

// la imagen captcha
echo '<p>',$imagen,'</p>';

// input para el codigo de la imagen 
echo '<p>',form_label('Código de la imagen: '),form_input($txtCodeImg)
          ,form_error('txtCodeImg'),'</p>';

// botones de accion 
echo '<p>',form_submit($btSubmit),'</p>'; 

// cerramos el tag form 
echo form_close();// </from>
?>
         </div>
      </div>
   </body>
</html> 

En el ejemplo se usan sesiones, pero también puede usarse una tabla de la base de datos para almacenar la cadena de caracteres generada y validar correctamente al enviar el formulario.

Documentación en ingles
Cómo usar sesiones tradicionales en Codeigniter.

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.