Implementar Captcha en nuestros formularios
Implementar Captcha en nuestros formularios. Crear nuestro proyecto o página web puede resultar emocionante, pero valga verdades el internet tiene sus peligros, ataques de hackers y una serie de peligros como robots, etc. Sin embargo, también existen herramientas que debemos implementar para que nuestros formularios estén a salvo.
Implementar Captcha en nuestros formularios
Una solución para prevenir ataques de robots es el uso del Captcha, por lo tanto, con una pequeña implementación que detallaremos en este artículo usted podrá evitar que su base de datos se llene de spam (datos basura).
¿Qué es el Captcha y de que esta compuesto nuestro código?
Es un tipo de medida de seguridad conocido como autenticación pregunta-respuesta. Un CAPTCHA te ayuda a protegerte del spam y del descifrado de contraseñas pidiéndote que completes una simple prueba que demuestre que eres humano y no un ordenador que intenta acceder a una cuenta protegida con contraseña.
Este ejercicio consta de dos ficheros:
- Index.php, donde estará nuestro formulario.
- manager.php, EL fichero que realiza la verificación si es correcta o no la respuesta ingresada en el formulario.
- Bootstrap, Implementando librerias externas CSS, para darle estetica a nuestro proyecto.
Para este ejemplo usaremos 2 variables generados aleatoriamente con la función RAND. Lo almacenaremos en una SESSION, por lo tanto, serán mostrados al usuario como una pregunta. EL usuario deberá realizar la operación de suma y al final se comparara si son correctos o no.
- Si el resultado ingresado en el formulario es correcto, procedemos a continuar con el formulario y ahora si almacenarlo en nuestra base de datos.
- Si el resultado ingresado es incorrecto, notificamos al usuario o robots que el captcha es incorrecto y no se almacenara nada en nuestra base de datos, con esto obtenemos datos reales de nuestros usuarios que visitan nuestra web.
A) Fichero index.php
<?php // Estableciendo valores a la sesion con Rand session_start(); $_SESSION["valor1"] = rand(0,20); $_SESSION["valor2"] = rand(0,10); ?> <!DOCTYPE html> <html> <head> <style> .main { padding:15px; } </style> <title>Implementar Captcha en nuestros formularios</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="main"> <div class="panel panel-default"> <div class="panel-heading"> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="index.php">Inicio</a></li> </ul> </div> <div class="row"> <div class="col-sm-6"> <div class="panel-body"> <h1>Implementar Captcha</h1> <form method="post" action="manager.php"> <div class="form-group"> <label for="inputName">Nombre</label> <input type="text" class="form-control" name="nombres" placeholder="Ingrese su nombre"/> </div> <div class="form-group"> <label for="inputEmail">Email</label> <input type="text" class="form-control" name="email" placeholder="Ingrese su email"/> </div> <div class="form-group"> No soy un robot <?php echo $_SESSION["valor1"]; ?> + <?php echo $_SESSION["valor2"];?>: <input style="display: inline; width: 100px;" class="form-control" required type="text" name="captcha"> </div> <div class="form-group"> <input type="submit" class="btn btn-primary submitBtn" value="Enviar Ahora"> </div> </form> </div> </div> <!--Panel col--> <div class="col-sm-6"> </div> <!--Panel col--> </div> <!--Panel row--> <div class="panel-footer">BaulPHP</div> </div> </div> <!--Panel cierra--> </div> <!--Cierra main--> </body> </html>
El fichero «index.php» contiene el formulario. También es donde se generan por primera vez los dos números aleatorios que se mostrara como una pregunta almacenados en una SESSION.
Archivo manager.php
<?php // Restableciendo valores a la sesion session_start(); ?> <!DOCTYPE html> <html> <head> <style> .main { padding:15px; } </style> <title>Implementar Captcha en nuestros formularios</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="main"> <div class="panel panel-default"> <div class="panel-heading"> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="index.php">Inicio</a></li> </ul> </div> <div class="row"> <div class="col-sm-6"> <div class="panel-body"> <h1>Ejemplo de captcha</h1> <div class="form-group"> <label for="inputName">Nombre</label> <p><?php echo $_POST["nombres"];?></p> </div> <div class="form-group"> <label for="inputEmail">Email</label> <p><?php echo $_POST["email"];?></p> </div> <div class="form-group"> <label for="inputEmail">Respuesta Captcha</label> <p><?php echo $_POST["captcha"];?></p> <?php if(isset($_SESSION["valor1"]) && isset($_SESSION["valor2"]) && isset($_POST["captcha"])) { $resp = $_SESSION["valor1"]+$_SESSION["valor2"]; $captcha = $_POST["captcha"]; if($resp==$captcha){ echo "<b>Eres Humano Correcto</b>"; } else{ echo "<b>Captcha Incorrecto</b>"; } } ?> </div> </div> </div> <!--Panel col--> <div class="col-sm-6"> </div> <!--Panel col--> </div> <!--Panel row--> <div class="panel-footer">BaulPHP</div> </div> </div> <!--Panel cierra--> </div> <!--Cierra main--> </body> </html>
manager.php, validan los datos ingresados en el formulario. Se comprueba la respuesta para saber si el usuario es humano o no.
Conclusión
Muy fácil la implementación de este script y con este código evitaran ataques de spam. También les dejare el fichero para que puedan descárgalo.