Cómo configurar Google Captcha con PHP & Bootstrap
Google utiliza un código para generar imágenes el cual a su vez es utilizado para evitar que los usuarios spam envíen múltiples peticiones a nuestro servidor a través de los formularios web. También este tipo de formulario proporciona un grado de seguridad a los formularios de contacto, y así evitar que los spammers nos llenen de correo electrónico spam nuestro buzón de entrada.
Ahora bien, surge la siguiente interrogante ¿Y cómo se usa?
Bien, en este tutorial hemos implementado un formulario muy básico haciendo uso del lenguaje de programación PHP, y para el diseño CSS Bootstrap.
Para implementar el Catcha de Google es necesario utilizar la librería que ofrece Google, esta librería contiene el archivo captcha.php, el cual vamos a incluir dentro de nuestro archivo index.php, para poder generar la imagen.
Formularios HTML del archivo: index.php
Hemos creado un formulario HTML simple aquí y se incluye la imagen Captcha de Google que se genera a partir de captcha.php.
<html>
<head>
<title> Protección Captcha de Google en formulario</title>
<meta name="robots" content="noindex, nofollow" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<br><br>
<h2 class='text-center'>Creación de Captcha usando la Librería de Google</h2>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default" style="box-shadow: 1px 1px 22px rgb(194, 194, 194);">
<div class="panel-heading" style="background-color:#2196f3;color:white;">
<h3 class="panel-title">Ingresa la información</h3>
</div>
<div class="panel-body">
<center>
<img id="captcha_img" src="captcha.php"/><br/>
<button class="btn btn-info" id="reload">¿No se puede leer? Prueba otro</button>
</center>
<form method="post" id="myForm">
<div class="form-group">
<label for="captcha1">Ingresa el texto de la imagen</label>
<input id="captcha1" name="captcha" type="text" class="form-control" required>
</div>
<?php
include 'verify.php';
?>
<button type='submit' id="button" class="btn btn-default">Enviar</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Código jQuery: scripts.js
Aquí, podemos cambiar código de imagen haciendo clic en el botón de cambio de código de imagen para poder generar otro código Captcha.
$(document).ready(function() {
$("#reload").click(function() {
$("#captcha_img").attr("src", "captcha.php");
});
});
Verificación del Captcha: verify.php
Verifica que el texto enviado por el usuario a través del input, coincida con el texto generado en la imagen.
<?php
if (isset($_POST["captcha"]))
{
session_start();
//Verifying user input captcha text with google generated captcha
if ($_SESSION["captcha"] == $_POST["captcha"])
{
?>
<div class="alert alert-success" role="alert">Código ingresado correctamente!</div>
<?php
}
else
{
?>
<div class="alert alert-danger" role="alert">Código erróneo!</div>
<?php
}
unset($_SESSION['captcha']);
}
?>
Conclusión:
Consideramos escribir este articulo, si bien es muy básico, pero podría servirte como base para la programación de un formulario de contacto con PHP mas completo.
Comentarios