Cómo implementar un captcha en CodeIgniter utilizando Captcha Helper

Un CAPTCHA (Complete Automated Public Turning test to tell Computer and Human Apart) es un tipo de prueba para identificar si el usuario es humano o no. Los captcha se utilizan principalmente en casi todas las aplicaciones web para proteger el sitio web ante el spam. Los captcha son muy importantes ante cualquier entrada dada por el usuario o cualquier acción procesada basándose en la respuesta del usuario.

Los captcha suelen ser un string generado al azar, incorporada a una imagen que se muestra al usuario. Claro está, el string se almacena en un variable de sesión. Una vez el usuario envía la palabra que ha previsualizado en el captcha, el valor enviado será comparado con el que tiene la sesión. Si ambos coinciden, el proceso puede continuar.

En este tutorial te mostraremos cómo implementar un captcha en CodeIgniter- CódeIgniter te proporciona captcha helper para crear tu captcha. Captcha Helper de CodeIgniter genera una imagen de captcha mediante opciones de personalización. Estos serán los pasos a seguir a la hora de implementar el captcha.

Crear y mostrar la imagen del captcha
Obtener el input del usuario y compararlo con el que tenemos en sesión
Devolver el resultado

Este es el código que utilizaremos para implementar el captcha en CodeIgniter.

// Captcha configuration
$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);

Puedes utilizar una fuente diferente para generar la palabra del captcha especificando un valor distinto en el font_path en el array de configuración.

'font_path'     => './path/to/fonts/texb.ttf'

A continuación te mostramos cómo utilizar este script en tu aplicación desarrollada en CodeIgniter. Antes de empezar, vamos a ver la estructura de carpetas y archivos de la aplicación.

> application
>> controllers
>>> Captcha.php
>> views
>>> captcha
>>>> index.php
> assets
>> images
>>> refresh.png
>> js
>>> jquery.min.js
> captcha_images

Controlador (Captcha.php)

Para utilizar el captcha helper de CodeIgniter, debes cargar captcha helper que se incluye en la función __construct().

La función index() crea el captcha, se la pasa a la imagen y carga la respectiva vista. También, gestiona la recepción del captcha y el proceso de comparación. Utilizamos refresh() cuando el usuario solicita un nuevo captcha.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Captcha extends CI_Controller
{
    function __construct() {
        parent::__construct();
        // Load the captcha helper
        $this->load->helper('captcha');
    }
    
    public function index(){
        // If captcha form is submitted
        if($this->input->post('submit')){
            $inputCaptcha = $this->input->post('captcha');
            $sessCaptcha = $this->session->userdata('captchaCode');
            if($inputCaptcha === $sessCaptcha){
                echo 'Captcha code matched.';
            }else{
                echo 'Captcha code was not match, please try again.';
            }
        }
        
        // Captcha configuration
        $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);
        
        // Unset previous captcha and store new captcha word
        $this->session->unset_userdata('captchaCode');
        $this->session->set_userdata('captchaCode',$captcha['word']);
        
        // Send captcha image to view
        $data['captchaImg'] = $captcha['image'];
        
        // Load the view
        $this->load->view('captcha/index', $data);
    }
    
    public function refresh(){
        // Captcha configuration
        $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);
        
        // Unset previous captcha and store new captcha word
        $this->session->unset_userdata('captchaCode');
        $this->session->set_userdata('captchaCode',$captcha['word']);
        
        // Display captcha image
        echo $captcha['image'];
    }
}

Vista (captcha/index.php)

Inicialmente, cargamos la vista con la imagen de captcha, la imagen de refresh, el campo input y el botón submit. Una vez que el usuario envía la palabra del captcha, se enviará también al método index() del controlador Captcha para que se compare.

Además, el usuario puede solicitar un nuevo captcha pulsando el botón Refresh. Cuando el usuario pulse ese botón, se ejecutará un script ajax para obtener una nueva imagen a través del método refresh() del controlador Captcha, y reemplazará la imagen de captcha antigua por la nueva.

<!DOCTYPE html>
<html>
<head>
    <title>Captcha implement in CodeIgniter by CodexWorld</title>
    <script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.refreshCaptcha').on('click', function(){
            $.get('<?php echo base_url().'captcha/refresh'; ?>', function(data){
                $('#captImg').html(data);
            });
        });
    });
    </script>
</head>
<body>
    <p>Submit the word you see below:</p>
    <p id="captImg"><?php echo $captchaImg; ?></p>
    <a href="javascript:void(0);" class="refreshCaptcha" ><img src="<?php echo base_url().'assets/images/refresh.png'; ?>"/></a>
    <form method="post">
        <input type="text" name="captcha" value=""/>
        <input type="submit" name="submit" value="SUBMIT"/>
    </form>
</body>
</html>