Cómo implementar Captcha en CodeIgniter usando Captcha Helper

Un CAPTCHA (Prueba completa automática de viraje público para indicar a Computer and Human Apart) es un tipo de prueba de desafío para identificar si el usuario es humano o no. Captcha se utiliza principalmente en la aplicación web para proteger el sitio web de spam. Un captcha es muy importante en el formulario web donde cualquier entrada es proporcionada por el usuario o cualquier acción se procesa en función de la respuesta del usuario.
CAPTCHA es una cadena generada aleatoriamente incorporada en un archivo de imagen que se muestra al usuario y la cadena aleatoria se almacena en la variable SESSION. Una vez que el usuario envía la palabra captcha al ver la imagen captcha, el valor enviado se comparará con el valor de la sesión. Si el código captcha coincide, se deben tomar más medidas.
En este tutorial, le mostraremos cómo implementar CAPTCHA en CodeIgniter . CodeIgniter proporciona un ayudante de CAPTCHA para generar un código aleatorio y crear una imagen de CAPTCHA. CodeIgniter CAPTCHA Helper contiene funciones que ayudan a generar imágenes CAPTCHA con varias opciones de personalización.
Aquí proporcionaremos el código de ejemplo para implementar la funcionalidad CAPTCHA en CodeIgniter. La siguiente funcionalidad se implementará en este sencillo script de PHP captcha para CodeIgniter.
  • Crea y muestra la imagen captcha.
  • Obtener entrada de usuario y enviar para la comparación.
  • Compare el código de entrada del usuario con la palabra captcha y devuelva el estado.

Crear imagen CAPTCHA en CodeIgniter

Para crear una imagen captcha, debe especificar las opciones de configuración y pasar esta matriz en create_captcha()función del ayudante de CAPTCHA.
// Configuración de Captcha $ config  = array ( 
    'img_path'       =>  'captcha_images /' , 
    'img_url'        =>  base_url (). 'Captcha_images /' , 
    'img_width'      =>  '150' , 
    'img_height'     =>  50 , 
    ' word_length '    =>  8 , 
    ' font_size '      =>  16 ); $ captcha  create_captcha ( $ config );

Implementar la funcionalidad CAPTCHA en CodeIgniter

Ahora le mostraremos cómo puede usar este código captcha e implementar la funcionalidad captcha en su aplicación CodeIgniter 3.

Controlador (Captcha.php)

El controlador Captcha contiene 3 funciones, __construct()index(), y refresh().
__construct()
  • Cargue el ayudante CodeIgniter CAPTCHA para generar el código y la imagen captcha.
  • Cargue la biblioteca de sesión para almacenar el código captcha para comparar.
index()
  • Genere una palabra aleatoria y cree una imagen captcha usando la función create_captcha ().
  • Almacena el código captcha en una variable SESSION.
  • Pasa la imagen captcha para ver y cargar la vista.
  • Maneja el proceso de envío y comparación de código captcha.
refresh()
Generar palabra al azar, crear y mostrar la imagen captcha. Básicamente, esta función se llama cuando el usuario solicita un nuevo captcha.
<? php defined ( 'BASEPATH' ) O exit ( 'No se permite el acceso directo al script' ); 
la clase  Captcha  extiende  CI_Controller { 
    function  __construct () { 
        parent :: __construct (); 
        
        // Cargar biblioteca de sesión 
        $ this -> load -> library ( 'session' ); 
        
        // Cargar el ayudante captcha 
        $ this -> load -> helper ( 'captcha' ); 
    } 
    
índice de     función pública  () {
        // Si se envía el formulario captcha 
        si ( $ this -> input -> post ( 'submit' )) { 
            $ inputCaptcha  $ this -> input -> post ( 'captcha' ); 
            $ sessCaptcha  $ this -> session -> userdata ( 'captchaCode' ); 
            if ( $ inputCaptcha  ===  $ sessCaptcha ) { 
                echo  'Código Captcha coincidente.' ; 
            } else { 
                echo "El código Captcha no coincide, inténtalo de nuevo". ; 
            } 
        } 
        
        // Configuración de Captcha 
        $ config  = array ( 
            'img_path'       =>  'captcha_images /' , 
            'img_url'        =>  base_url (). 'Captcha_images /' , 
            'font_path'      =>  'system / fonts / texb.ttf' , 
            'img_width'      =>  '160' , 
            'img_height'     =>  50 , 
            'word_length'    =>  8 , 
            'font_size'      => 18 
        ); 
        $ captcha  create_captcha ( $ config ); 
        
        // Desactive el captcha anterior y configure la nueva palabra captcha 
        $ this -> session -> unset_userdata ( 'captchaCode' ); 
        $ this -> session -> set_userdata ( 'captchaCode' $ captcha [ 'word' ]); 
        
        // Pase la imagen captcha para ver 
        $ data [ 'captchaImg' ] =  $ captcha [ 'image' ]; 
        
        // Cargar la vista 
        $ esto -> cargar -> ver ( 'captcha / index'$ datos ); 
    } 
    
    función pública  refresh () { 
        // Configuración de Captcha 
        $ config  = array ( 
            'img_path'       =>  'captcha_images /' , 
            'img_url'        =>  base_url (). 'captcha_images /' , 
            'font_path'      =>  'sistema / fuentes / texb.ttf ' , 
            ' img_width '      =>  ' 160 ' , 
            ' img_height '     =>  50 , 
            ' word_length '    =>  8 , 
            ' font_size '      => 18 
        ); 
        $ captcha  create_captcha ( $ config ); 
        
        // Desactive el captcha anterior y configure la nueva palabra captcha 
        $ this -> session -> unset_userdata ( 'captchaCode' ); 
        $ this -> session -> set_userdata ( 'captchaCode' , $ captcha [ 'word' ]); 
        
        // Mostrar imagen captcha 
        echo  $ captcha [ 'imagen' ]; 
    } 
}

Ver (captcha / index.php)

Inicialmente, la imagen captcha se muestra con un campo de entrada y un botón de envío. Una vez que el usuario envía la palabra captcha, se enviará al index()método del controlador Captcha para su comparación.
< h4 > Enviar código Captcha </ h4 >
< p  id = "captImg" > <? php  echo  $ captchaImg ?> </ p >
< p > ¿No puedes leer la imagen? haga clic en < a  href = "javascript: void (0);"  class = "refreshCaptcha" > aquí </ a > para actualizar. </ p >
< form  method = "post" >
    Introduzca el código : 
    < input  type = "text"  name = "captcha"  value = "" />
    < input  type = "submit"  name = "submit"  value = "SUBMIT" />
</ form >
Además, el usuario puede solicitar una nueva imagen captcha por enlace de actualización. El código jQuery y Ajax se ejecutará haciendo clic en el enlace de actualización. La nueva imagen captcha se recuperará del refresh()método del controlador Captcha y la imagen captcha existente se reemplazará con una nueva imagen.
<! - biblioteca jQuery -> 
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script >

<! - código de actualización de captcha -> 
< script >
 $ ( document ) .ready ( function () {
     $ (' .refreshCaptcha ') .on ( 'click' , function () {
         $ .get ( '<? php echo base_url (). ' captcha / refresh ';?> ' , function (data) {
             $ (' #captImg ') .html (data);
        });
    });
});
</ script >

Opciones de configuración de CAPTCHA

Hay varias opciones de configuración disponibles en la función create_captcha () para personalizar la imagen captcha. Algunas opciones de configuración útiles se dan a continuación:
  • img_path - Requerido. El camino donde se almacenarán las imágenes captcha.
  • img_url - Requerido. La URL de la imagen captcha.
  • img_width - Opcional. El ancho de la imagen captcha. El valor predeterminado es 150.
  • img_height - Opcional. La altura de la imagen captcha. El valor predeterminado es 30.
  • word_length - Opcional. El número de caracteres. El valor predeterminado es 8.
  • font_size - Opcional. El tamaño de letra de la palabra captcha. El valor predeterminado es 16.
  • font_path - Opcional. La ruta de la fuente de texto. Especifique la ruta de la fuente, si desea utilizar una fuente de texto diferente para la palabra captcha.
  • piscina - opcional. El valor predeterminado es '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'. Especifique las letras que desea utilizar en el código captcha.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.