CONSTRUYE TU PROPIO CAPTCHA Y

FORMULARIO DE CONTACTO EN PHP

La gente escribe código todos los días para automatizar una variedad de procesos.
Aprovechamos el hecho de que las computadoras son mucho más rápidas y más
precisas que los humanos, lo que nos permite simplificar muchas tareas mundanas.
Desafortunadamente, estas mismas habilidades se pueden usar para programar
computadoras para hacer algo malicioso, como enviar spam o adivinar contraseñas. El
enfoque de este tutorial será sobre la lucha contra el spam.

Digamos que usted tiene un sitio web con un formulario de contacto para facilitar que
los visitantes se comuniquen con usted. Todo lo que tienen que hacer es completar un
formulario y presionar el botón enviar para informarle sobre un problema o solicitud que
tienen. Esta es una característica importante de un sitio web público, pero el proceso de
completar los valores de los formularios puede ser automatizado por usuarios
malintencionados para enviar una gran cantidad de correo no deseado a su manera.
Este tipo de técnica de spam no se limita a los formularios de contacto. Los bots
también se pueden usar para llenar tus foros con publicaciones de spam o comentarios
que enlazan a sitios web dañinos.

Una forma de resolver este problema es idear una prueba que pueda distinguir entre
los bots que intentan difundir el spam y las personas que legítimamente desean
ponerse en contacto con usted. Aquí es donde entran los CAPTCHA. En general,
consisten en imágenes con una combinación aleatoria de cinco o seis letras escritas
sobre un fondo de color. La idea es que un humano podrá leer el texto dentro de la
imagen, pero un bot no. La comparación del valor CAPTCHA lleno por el usuario con
respecto al original puede ayudarlo a distinguir los robots de los humanos. CAPTCHA
significa "prueba pública de Turing completamente automatizada para distinguir a las
computadoras y los humanos".

En este tutorial, aprenderemos cómo crear nuestros propios CAPTCHA y luego los
integraremos con el formulario de contacto que creamos en el tutorial.

Creando el CAPTCHA
Usaremos la biblioteca PHP GD para crear nuestro CAPTCHA. Puede aprender más
sobre cómo escribir texto y dibujar formas con GD en uno de mis tutoriales anteriores.
También tendremos que escribir un poco de código para crear nuestra cadena aleatoria
que se escribirá en la imagen que se crea. Otro tutorial, titulado Generar cadenas
alfanuméricas aleatorias en PHP, puede ayudarnos a este respecto.
Generar una Cadena Aleatoria
Todo el código de esta sección irá en el archivo captcha.php. Comencemos
escribiendo la función para crear la cadena aleatoria.

01
<?php
02
 
03
$permitted_chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
04
  
05
function generate_string($input, $strength = 5) {
06
    $input_length = strlen($input);
07     $random_string = '';
08     for($i = 0; $i < $strength; $i++) {

09         $random_character = $input[mt_rand(0, $input_length - 1)];

10         $random_string .= $random_character;

11     }

12   

    return $random_string;
13
}
14
 
15
$string_length = 6;
16
$captcha_string = generate_string($permitted_chars, $string_length);
17
 
18
 
19
?>
20

La variable  $permitted_chars  almacena todos los caracteres que queremos usar para
generar nuestra cadena CAPTCHA. Solo utilizamos letras mayúsculas en el alfabeto
inglés para evitar cualquier confusión que pueda surgir debido a letras o números que
puedan parecerse. Puede usar cualquier conjunto de caracteres que desee para
aumentar o disminuir la dificultad del CAPTCHA.

Nuestra función crea una cadena de cinco letras de forma predeterminada, pero puede
cambiar ese valor pasando un parámetro diferente a la función  generate_string() .

Advertisement
Renderizar el Fondo CAPTCHA
Una vez que tengamos nuestra cadena aleatoria, es hora de escribir el código para
crear el fondo de la imagen CAPTCHA. La imagen tendrá un tamaño de 200 x 50
píxeles y utilizará cinco colores diferentes para el fondo.

01
<?php
02
 
03
$image = imagecreatetruecolor(200, 50);
04
 
05
imageantialias($image, true);
06
 
07
$colors = [];
08
 
09
$red = rand(125, 175);
10 $green = rand(125, 175);
11 $blue = rand(125, 175);
12  
13 for($i = 0; $i < 5; $i++) {

14   $colors[] = imagecolorallocate($image, $red - 20*$i, $green - 20*$i, $blue - 20*$i);

15 }

16  
imagefill($image, 0, 0, $colors[0]);
17

18  
for($i = 0; $i < 10; $i++) {
19
  imagesetthickness($image, rand(2, 10));
20
  $rect_color = $colors[rand(1, 4)];
21
  imagerectangle($image, rand(-10, 190), rand(-10, 10), rand(-10, 190), rand(40, 60), $rect
22
}
23
 
24 ?>
25

Comenzamos con valores aleatorios para las variables  $red ,  $green  y  $blue . Estos
valores determinan el color final del fondo de la imagen. Después de eso, ejecutamos
un bucle  for  para crear sombras progresivamente más oscuras del color original.
Estos colores se almacenan en una matriz. El color más claro es el primer elemento de
nuestra matriz  $colors , y el color más oscuro es el último elemento. El color más claro
se utiliza para rellenar todo el fondo de la imagen.

En el siguiente paso, usamos un bucle for para dibujar rectángulos en ubicaciones

aleatorias en nuestra imagen original. El grosor de los rectángulos varía entre 2 y 10,
mientras que el color se elige al azar de los últimos cuatro valores de nuestra
matriz  $colors .

Al dibujar todos estos rectángulos, se agregan más colores al fondo, lo que dificulta un
poco distinguir el primer plano de la cadena CAPTCHA del fondo de la imagen.

Su fondo de CAPTCHA ahora debería verse similar a la siguiente imagen.

Hacer la Cadena CAPTCHA

Para el paso final, solo tenemos que dibujar la cadena CAPTCHA en nuestro fondo. El
color, la coordenada y, y la rotación de las letras individuales se determina al azar para
hacer que la cadena CAPTCHA sea más difícil de leer.

01 <?php

02  

03 $black = imagecolorallocate($image, 0, 0, 0);

$white = imagecolorallocate($image, 255, 255, 255);

04
$textcolors = [$black, $white];
05
 
06
$fonts = [dirname(__FILE__).'\fonts\Acme.ttf', dirname(__FILE__).'\fonts\Ubuntu.ttf', dirnam
07 dirname(__FILE__).'\fonts\PlayfairDisplay.ttf'];

08  
09 $string_length = 6;

10 $captcha_string = generate_string($permitted_chars, $string_length);

11  
for($i = 0; $i < $string_length; $i++) {
12
13
  $letter_space = 170/$string_length;
14   $initial = 15;
15    
16   imagettftext($image, 20, rand(-15, 15), $initial + $i*$letter_space, rand(20, 40), $textco

17 }

18  

19 header('Content-type: image/png');

20 imagepng($image);

imagedestroy($image);
21
 
22
?>
23

Como puede ver, estoy usando algunas fuentes que descargué de Google para obtener
variaciones en los caracteres. Hay un relleno de 15 píxeles en ambos lados de la
imagen. El espacio restante (170 píxeles) se divide en partes iguales entre todas las
letras CAPTCHA.

Después de representar la cadena de texto sobre el fondo, el resultado debería ser

similar a la imagen de abajo. Los caracteres serán diferentes, pero deberían estar
ligeramente girados y ser una mezcla de blanco y negro.

Agregando el CAPTCHA a nuestro formulario de

contacto
Ahora que hemos creado nuestro CAPTCHA, es hora de agregarlo a nuestro formulario
de contacto. Utilizaremos el formulario de contacto de mi tutorial anterior sobre cómo
crear un formulario de contacto de PHP y agregar el CAPTCHA justo arriba del
botón Enviar mensaje.
Utilizaremos sesiones para almacenar el texto de CAPTCHA y luego validaremos el
texto ingresado por los visitantes del sitio web. Aquí está el código completo de nuestro
archivo captcha.php:

01 <?php

02  

03 session_start();

04  
$permitted_chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
05
  
06
function generate_string($input, $strength = 10) {
07
    $input_length = strlen($input);
08
    $random_string = '';
09
    for($i = 0; $i < $strength; $i++) {
10         $random_character = $input[mt_rand(0, $input_length - 1)];
11         $random_string .= $random_character;
12     }

13   

14     return $random_string;

15 }

16  
$image = imagecreatetruecolor(200, 50);
17

18  
imageantialias($image, true);
19
 
20
$colors = [];
21
 
22
$red = rand(125, 175);
23
$green = rand(125, 175);
24
$blue = rand(125, 175);
25
 
26 for($i = 0; $i < 5; $i++) {
27   $colors[] = imagecolorallocate($image, $red - 20*$i, $green - 20*$i, $blue - 20*$i);

28 }
29  

30 imagefill($image, 0, 0, $colors[0]);

31  

32 for($i = 0; $i < 10; $i++) {

  imagesetthickness($image, rand(2, 10));

33
  $line_color = $colors[rand(1, 4)];
34
  imagerectangle($image, rand(-10, 190), rand(-10, 10), rand(-10, 190), rand(40, 60), $line
35
}
36
 
37
$black = imagecolorallocate($image, 0, 0, 0);
38 $white = imagecolorallocate($image, 255, 255, 255);
39 $textcolors = [$black, $white];
40  
41 $fonts = [dirname(__FILE__).'\fonts\Acme.ttf', dirname(__FILE__).'\fonts\Ubuntu.ttf', dirnam
dirname(__FILE__).'\fonts\PlayfairDisplay.ttf'];
42
 
43
$string_length = 6;
44
$captcha_string = generate_string($permitted_chars, $string_length);
45
 
46
$_SESSION['captcha_text'] = $captcha_string;
47
 
48 for($i = 0; $i < $string_length; $i++) {
49   $letter_space = 170/$string_length;

50   $initial = 15;

51    

52   imagettftext($image, 24, rand(-15, 15), $initial + $i*$letter_space, rand(25, 45), $textco

53 }

54  
header('Content-type: image/png');
55
imagepng($image);
56
imagedestroy($image);
57
?>
58

59
60

61

Las fuentes que desee utilizar irán al directorio de fuentes. Ahora, simplemente debe
agregar el siguiente código HTML sobre el botón Send Message de nuestro tutorial
anterior para crear un formulario de contacto en HTML y PHP.

1 <div class="elem-group">
2     <label for="captcha">Please Enter the Captcha Text</label>

3     <img src="captcha.php" alt="CAPTCHA" class="captcha-image"><i class="fas fa-redo refresh-c

4     <br>

5     <input type="text" id="captcha" name="captcha_challenge" pattern="[A-Z]{6}">

</div>
6

A veces, el texto CAPTCHA será difícil de leer incluso para los humanos. En estas
situaciones, queremos que puedan solicitar un nuevo CAPTCHA de manera fácil para
el usuario. El icono de rehacer de arriba nos ayuda a hacer exactamente eso. Todo lo
que tiene que hacer es agregar el JavaScript a continuación en la misma página que el
HTML para el formulario de contacto.

1 var refreshButton = document.querySelector(".refresh-captcha");

2 refreshButton.onclick = function() {

3   document.querySelector(".captcha-image").src = 'captcha.php?' + Date.now();

4 }

Después de integrar el CAPTCHA en el formulario y agregar un botón de actualización,

debe obtener un formulario que se parece a la imagen de abajo.
El paso final en nuestra integración del CAPTCHA que creamos con el formulario de
contacto implica verificar el valor de CAPTCHA ingresado por los usuarios al completar
el formulario y hacer que coincida con el valor almacenado en la sesión. Actualice el
archivo contact.php del tutorial anterior para tener el siguiente código.

01 <?php

02  

03 session_start();

04  
05 if($_POST) {

06     $visitor_name = "";

    $visitor_email = "";
07
    $email_title = "";
08
    $concerned_department = "";
09
    $visitor_message = "";
10
 
11
    if(isset($_POST['captcha_challenge']) && $_POST['captcha_challenge'] == $_SESSION['capt
12 {

13      

14         if(isset($_POST['visitor_name'])) {

            $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);

15
        }
16
         
17
        if(isset($_POST['visitor_email'])) {
18
            $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visit
19
            $visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
20
             
21         }
22          
23         if(isset($_POST['email_title'])) {
24             $email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING);

25         }

26          

27         if(isset($_POST['concerned_department'])) {

            $concerned_department = filter_var($_POST['concerned_department'], FILTER_SANIT

28
        }
29
         
30
        if(isset($_POST['visitor_message'])) {
31
            $visitor_message = htmlspecialchars($_POST['visitor_message']);
32
        }
33
         
34
        if($concerned_department == "billing") {
35             $recipient = "billing@domain.com";
36

37

38         }

39         else if($concerned_department == "marketing") {

40             $recipient = "marketing@domain.com";

        }
41
        else if($concerned_department == "technical support") {
42
            $recipient = "tech.support@domain.com";
43
        }
44
        else {
45
            $recipient = "contact@domain.com";
46         }
47          
48         $headers  = 'MIME-Version: 1.0' . "\r\n"
49         .'Content-type: text/html; charset=utf-8' . "\r\n"

50         .'From: ' . $visitor_email . "\r\n";

51          

52         if(mail($recipient, $email_title, $visitor_message, $headers)) {

53             echo '<p>Thank you for contacting us. You will get a reply within 24 hours.</p>

        } else {
54
            echo '<p>We are sorry but the email did not go through.</p>';
55
        }
56
    } else {
57
        echo '<p>You entered an incorrect Captcha.</p>';
58     }
59      
60 } else {
61     echo '<p>Something went wrong</p>';

62 }

63  

64 ?>

65

66
Actualizamos este archivo para verificar primero si el valor de CAPTCHA almacenado
en la sesión es el mismo que el valor ingresado por el usuario. Si son diferentes,
simplemente les decimos a los visitantes que ingresaron un CAPTCHA incorrecto.
Puede manejar la situación de manera diferente según lo que necesite su proyecto.

Conclusiones
En este tutorial, creamos nuestro propio CAPTCHA en PHP desde cero y lo integramos
con un formulario de contacto de PHP que incorporamos en uno de nuestros tutoriales
anteriores. También hicimos que el CAPTCHA sea más fácil de usar al agregar un
botón de actualización para que los usuarios obtengan una nueva cadena con un nuevo
fondo en caso de que el anterior fuera ilegible.

También puede usar la lógica de este tutorial para crear un CAPTCHA que se basa en
resolver ecuaciones matemáticas básicas como la suma y la resta.

Si desea agregar un CAPTCHA a su sitio web, debe revisar algunos de los

complementos de formulario y CAPTCHA disponibles en CodeCanyon. Algunos de
estos tienen CAPTCHA y muchas otras características como un cargador de archivos
integrado.

Si tiene alguna pregunta o sugerencia, no dude en hacérmelo saber en los

comentarios. También debe echar un vistazo a esta lista de los mejores formularios de
contacto de PHP.

https://code.tutsplus.com/es/tutorials/build-your-own-captcha-and-contact-form-in-php--net-5362