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:
Con la función create_captcha() generamos la imagen personalizada, recibe como parámetro un array con las especificaciones. ejemplo:
Luego de generar el captcha, disponemos de un array con los siguientes datos:
Para poder generar el captcha, el servidor debe cumplir con los siguientes requerimientos y especificaciones:
A continuación el código de ejemplo utilizado:
Controlador: captcha_c.php
Vista: captcha_v.php
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.
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).
- 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.
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.