Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Construye tu propio CAPTCHA y formulario de contacto en PHP

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Rene Soto (you can also view the original English article)

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.

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().

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.

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.

CAPTCHA background in PHP

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.

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.

CAPTCHA background with text

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:

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.

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.

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.

PHP Contact form with CAPTCHA

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.

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.