https://webdamn.
com/build-reusable-captcha-script-with-php/
Construir Script Captcha Reutilizable con PHP
Un CAPTCHA (prueba de Turing pública completamente automatizada para diferenciar a
computadoras y humanos) es un tipo de código de desafío que se utiliza en aplicaciones web para
determinar que la acción es realizada por un ser humano.
El código Captcha es una combinación de texto legible con algunas formas distorsionadas que solo el
ser humano puede leer para confirmar que el usuario no es un bot.
Hay muchos recursos de terceros disponibles para agregar fácilmente Captcha a su aplicación web.
Pero si está buscando crear su propio código Captcha personalizado para usar en su proyecto, entonces
está aquí en el lugar correcto. En este tutorial, aprenderá cómo crear su propia secuencia de comandos
Captcha reutilizable utilizando PHP para el usuario en sus proyectos futuros.
Explicaremos este tutorial paso a paso con un ejemplo en vivo para implementar Captcha con PHP.
Crearemos un formulario HTML con texto de entrada, imagen Captcha y botón de envío para mostrar
Captcha e ingresaremos el texto de entrada para validar el envío del formulario con un código Captcha
válido.
Así que
creemos un ejemplo en vivo del script Captcha usando PHP. Los archivos principales son:
index.php
captcha.php
captcha_code.js
Paso 1: Incluir Bootstrap, archivos jQuery
Como crearemos un ejemplo en vivo de Captcha usando PHP, jQuery y el diseño Bootstrap, así que
primero incluiremos los archivos Bootstrap y jQuery.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Paso 2: Diseñe el formulario con el código Captcha
En el archivo index.php, diseñaremos un formulario HTML con texto de entrada, imagen Captcha y
botón de enviar. Llamaremos captcha.php en img src con un número aleatorio para cargar el código
Captcha cuando se cargue el formulario. También crearemos un enlace de actualización para actualizar
el código Captcha cuando haga clic en actualizar enlace.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
<form name="form" class="form" action=""
method="post">
<div class="form-group">
<label for="captcha" class="text-
info">
<?php if($statusMessage) { ?>
<span class="text-
danger"><strong><?php echo $statusMessage; ?></strong></span>
<?php } ?>
</label><br>
<input type="text"
name="captchaText" id="captchaText" class="form-control" placeholder="Enter Captcha
code">
</div>
<div class="form-group">
<img src="captcha.php?rand=<?php
echo rand(); ?>" id='captchaCode'>
<br>
<p><br>Wants new Captcha code? <a
href="javascript:void(0)" id="refreshCaptchaCode">refresh</a></p>
</div>
<div class="form-group">
<input type="submit" name="submit"
class="btn btn-info btn-md" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
Paso 3: Crear código Captcha
En el archivo captcha.php, implementaremos la funcionalidad para crear Captcha basada en sesión
PHP con PHP. Crearemos una imagen Captcha con una altura de 50 y un ancho de 130 píxeles con un
total de 5 caracteres en la imagen Captcha. El código Captcha final se almacenará en la variable de
sesión $_SESSION['captchaCode'] para verificar cuando se envíe el formulario con el código
Captcha.
<?php
session_start();
$captchaCode = '';
$captchaImageHeight = 50;
$captchaImageWidth = 130;
$totalCharactersOnImage = 6;
$possibleCaptchaLetters = 'abcdefghhkmnopqrstuvwxyz98765432';
$captchaFont = 'monofont.ttf';
$randomCaptchaDots = 50;
$randomCaptchaLines = 25;
$captchaTextColor = "a94442";
$captchaNoiseColor = "a94442";
$characterCount = 0;
while ($characterCount < $totalCharactersOnImage) {
$captchaCode .= substr($possibleCaptchaLetters, mt_rand(0,
strlen($possibleCaptchaLetters)-1), 1);
$characterCount++;
}
$captchaFont_size = $captchaImageHeight * 0.65;
$captchaImage = @imagecreate(
$captchaImageWidth,
$captchaImageHeight
);
$backgroundColor = imagecolorallocate(
$captchaImage,
255,
255,
255
);
$arrayTextColor = hextorgb($captchaTextColor);
$captchaTextColor = imagecolorallocate(
$captchaImage,
$arrayTextColor['red'],
$arrayTextColor['green'],
$arrayTextColor['blue']
);
$arrayNoiseColor = hextorgb($captchaNoiseColor);
$imageNoiseColor = imagecolorallocate(
$captchaImage,
$arrayNoiseColor['red'],
$arrayNoiseColor['green'],
$arrayNoiseColor['blue']
);
for( $captchaDotsCount=0; $captchaDotsCount<$randomCaptchaDots; $captchaDotsCount++
) {
imagefilledellipse(
$captchaImage,
mt_rand(0,$captchaImageWidth),
mt_rand(0,$captchaImageHeight),
2,
3,
$imageNoiseColor
);
}
for( $captchaLinesCount=0; $captchaLinesCount<$randomCaptchaLines;
$captchaLinesCount++ ) {
imageline(
$captchaImage,
mt_rand(0,$captchaImageWidth),
mt_rand(0,$captchaImageHeight),
mt_rand(0,$captchaImageWidth),
mt_rand(0,$captchaImageHeight),
$imageNoiseColor
);
}
$text_box = imagettfbbox(
$captchaFont_size,
0,
$captchaFont,
$captchaCode
);
$x = ($captchaImageWidth - $text_box[4])/2;
$y = ($captchaImageHeight - $text_box[5])/2;
imagettftext(
$captchaImage,
$captchaFont_size,
0,
$x,
$y,
$captchaTextColor,
$captchaFont,
$captchaCode
);
header('Content-Type: image/jpeg');
imagejpeg($captchaImage);
imagedestroy($captchaImage);
$_SESSION['captchaCode'] = $captchaCode;
function hextorgb ($hexstring){
$integar = hexdec($hexstring);
return array(
"red" => 0xFF & ($integar >> 0x10),
"green" => 0xFF & ($integar >> 0x8),
"blue" => 0xFF & $integar
);
}
?>
Paso 4: Mostrar el código Captcha
Llamaremos al archivo captcha.php y pasaremos el número de rand para cargar la imagen del código
Captcha.
<div class="form-group">
<img src="captcha.php?rand=<?php echo rand(); ?>" id='captchaCode'>
<br>
<p><br>Wants new Captcha code? <a href="javascript:void(0)"
id="refreshCaptchaCode">refresh</a></p>
</div>
Paso 5: Actualizar el código Captcha
En el archivo captcha_code.js, implementaremos la funcionalidad de actualización de código Captcha.
Manejaremos la funcionalidad del código de actualización del código Captcha cuando haga clic en el
enlace de actualización y restablezcamos el código de imagen Captcha con un nuevo número aleatorio
para actualizar el código.
$(document).ready(function(){
$("#refreshCaptchaCode").click(function(){
var img = $('#captchaCode').attr('src');
img = img.substring(0,img.lastIndexOf("?"));
img = img+"?rand="+Math.random()*1000;
$('#captchaCode').attr('src', img);
});
});
Paso 6: Validar formulario con código Captcha
Validaremos el código Captcha cuando se envíe el formulario verificando el código original de la
sesión $_SESSION['captchaCode'] y el usuario ingresó el código Captcha ingresado en el formulario
$_POST['captchaText'] y mostró el mensaje en consecuencia.
<?php
session_start();
$statusMessage = '';
if ( isset($_POST['captchaText']) && ($_POST['captchaText']!="")){
if(strcasecmp($_SESSION['captchaCode'], $_POST['captchaText']) != 0){
$statusMessage = "It seems you have entered invalid captcha code!
Please try again.";
}else{
$statusMessage = "Your captcha code have been matched
successfully.";
}
} else {
$statusMessage = "Enter captcha code.";
}
?>
