Get best of the week

CAPTCHA para codeigniter 4

¡Buenas tardes! A pesar del título del artículo, presentará los métodos y funciones generales que utilicé para crear mi captcha, que se pueden aplicar en otros marcos con cambios mínimos. Algunas funciones y enfoques se basan en los materiales de la publicación de desarrollo DIY CAPTCHA .

Introducción


Para trabajar con imágenes, debe verificar la presencia de la biblioteca GD en PHP. Esto se puede hacer usando la función gd_info (). En los ejemplos presentados, utilizo la versión 2.1.0 y PHP 7.4.3, que no es necesario en este caso, ya que no se utilizan las funciones PHP7.

Lógicas


¿Qué captcha quiero ver? Una que me ayudará a reducir la cantidad de solicitudes del servidor durante la autorización en mi sitio con codeigniter 4.

Para la implementación, la imagen con el código se generará exclusivamente en el lado del servidor, se guardará en una carpeta temporal, se codificará en base64 y se devolverá al usuario.

Desarrollo


Antes de dibujar la imagen, escribimos el método de generación de código.

public function generate_code() {
        srand((float) microtime() * 1000000);
        $chars = 'ABDEFHKNRSTYZabdefhknrstyz23456789'; //   
        $length = rand(5, 7); //  
        $numChars = strlen($chars); 
        $str = '';
        for ($i = 0; $i < $length; $i++) {
            $str .= $chars[rand(0, $numChars - 1)];
        }
        $array_mix = preg_split('//', $str, -1, PREG_SPLIT_NO_EMPTY);
        shuffle($array_mix);
        delete_cookie('cap'); //  ,   ,      
        set_cookie('cap', md5(implode("", $array_mix)), self::$_code_time); //      md5   _code_time
        return implode("", $array_mix);
    }

Observo que en el futuro usaré varias fuentes para generar caracteres, por lo que debe prestar atención al conjunto original de caracteres, o a las fuentes mismas, para evitar problemas con caracteres como "Z" y "z", "X" y "x", "I" y "l", etc., ya que distorsionar la imagen puede hacer que la entrada de captcha sea problemática.

Declaro los campos necesarios en el futuro.

public static $width = 220; //    
public static $height = 120; //  
public static $fonts_num = 4; //     /public/fonts/
private static $_code_time = 180; //     .

Estoy preparando algunos métodos para generar fondos y ruido (listado completo al final).

/**
     *    .
     *
     * $mode == "parallel",      
     * $max —   
     */
private function _add_line($img, $mode = '', $max = 100) {
    for ($i = 0; $i < rand(0, $max); $i++) {
        $color = imagecolorallocate($img, rand(80, 150), rand(80, 150), rand(80, 150));
        if ($mode === 'parallel') {
            $r1 = rand(0, self::$width);
            $r2 = rand(0, self::$width);
            imageline($img, $r1, $r1, $r2, $r1, $color);
            imageline($img, $r1, $r2, $r1, rand(0, 220), $color);
        } else {
            imageline($img, rand(0, self::$width), rand(0, self::$width), rand(0, self::$width), rand(0, self::$width), $color);
        }
    }
}

private function _add_poly($img) { //   
    $points = [];
    for ($i = 0; $i < 10; $i++) {
        array_push($points, rand(0, self::$width * 2));
    }
    $color = imagecolorallocate($img, rand(80, 190), rand(80, 190), rand(80, 190));
    imageFilledPolygon($img, $points, 5, $color);
}

/**
     *    .
     *
     * $xn  $yn     .   ,   ,   .  ,     "".
     * $mode          ('normal').
     */
private function _set_glitch_color($image, $xn = 0, $yn = 0, $mode = 'normal') {
    $start = rand(self::$height / 2, self::$height / 2 - self::$height / 4);
    $finish = $start + rand(5, 15);
    for ($x = 0; $x < self::$width - 1; $x++) {
        for ($y = 0; $y < self::$height - 1; $y++) {
            if ($mode != 'normal') {
                $xn = rand(0, 1);
                $yn = rand(0, 1);
            } else {
                $finish = $start + 3;
            }
            if ($y > $start && $y < $finish) {
                imagesetpixel($image, $x + $xn, $y + $yn, imagecolorat($image, $x, $y));
            }
        }
    }
}

Casi listo. Escribimos el código secreto en la imagen.

private function _add_text($img, $text) {
    $x = rand(10,20); //    X   .
    for ($i = 0; $i < strlen($text); $i++) {
        $text_color = imagecolorallocate($img, rand(150, 250), rand(150, 250), rand(150, 250));
        imagettftext($img, rand(35, 40), rand(0, 10) - rand(0, 10), $x, rand(55, 95), $text_color, 'fonts/' . rand(1, self::$fonts_num) . ".ttf", $text[$i]); //       1.ttf  *self::$fonts_num*.ttf
        $x += rand(25, 35);
    }
}

Combinamos métodos listos para crear una imagen y verificar el código.

public function img_code($code) {
    $image = imagecreatetruecolor(self::$width, self::$height);
    imageantialias($image, true);
    $rand_color = imagecolorallocate($image, rand(50, 120), rand(50, 120), rand(50, 120));
    imagefilledrectangle($image, 0, 0, self::$width, self::$height, $rand_color);
    $this->_add_rand_bg($image); //   
    $this->_add_text($image, $code); 
    $this->_add_glitch($image, 'normal');
    $this->_add_glitch($image, 'boom');
    $this->_add_line($image, 'rand', 200); //    
    $file = 'temp/' . md5($code) . ".png"; 
    imagepng($image, $file); //  
    imagedestroy($image);
    $res = base64_encode(file_get_contents($file)); //    base64()
    unlink($file); //  
    return $res;
}

public function check($tested) {
    $cap = get_cookie('cap');
    $r['error'] = '';
    if (!$cap) { //   
        $r['error'] = '    .';
    } elseif (strcmp($tested, $cap)) {
        $r['error'] = '   .';
    }
    delete_cookie('cap'); //     
    return $r;
}

Utilizando


En los controladores necesarios, preparamos el captcha de la siguiente manera:

public function __construct() {
    ...
    $this->captcha = new \App\Libraries\Captcha();
    ...
}

public function some_function() {
    ...
    $data['captcha'] = $this->captcha->img_code( $this->captcha->generate_code() );
    return view('page/template', $data);
}

public function recaptcha(){ //  ajax-
    return $this->captcha->img_code( $this->captcha->generate_code() );
}

En la plantilla, cree un token y un botón para volver a generar la imagen:

...
<input type="hidden" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" id="csrf"/>
...
<img src="data:image/png;base64,<?= $captcha ?>" id="cap" width="220" height="120"/>
<div id="ref" onclick="recaptcha()">⥁</div>
...

Agregamos una ruta para la solicitud ajax.

$routes->post('/recap', 'AuthController::recaptcha');

Y ajax en sí.

var numlog = 0;
function recaptcha() {
    if(numlog <= 5){
        $.ajax({
            type: 'post',
            url: '/recap',
            data: {csrf_token: $('#csrf').val()},
            success: function (result) {
                numlog++;
                $('#cap').attr('src', "data:image/png;base64," + result + '');
            }
        });
    }else{
        $('#ref').css('display', 'none');
    }
}

Total


Una paleta de colores ruidosa y un conjunto de distorsiones con diferentes parámetros complica enormemente la solución de captcha. Después de jugar con las constantes, puedes obtener resultados diferentes.

Verifiqué todos los resultados en un editor gráfico al poner un umbral en las imágenes, resaltando así los caracteres que se pueden usar para el reconocimiento.



Ruido y líneas aleatorias, por supuesto, aumentan la complejidad. Pero la conclusión que hago es la siguiente: si es necesario y deseado, esta solución no es completamente segura, sin embargo, ayuda a proteger contra los robots comunes.

El código completo se puede ver en el github . Estaré encantado de escuchar recomendaciones y comentarios.

More articles:


All Articles