Sistema de contacto con Google reCAPTCHA. En esta publicación nos enfocaremos en crear un formulario de contacto para nuestros usuarios y/o clientes de nuestra web. Ahora, el formulario de contacto tendrá la validación de sus campos con el lenguaje jQuery y lo más importante el código captcha puede ser muy útil para validar quien está delante del formulario. Si es un usuario humano o caso contrario un robot.
Sistema de contacto con Google reCAPTCHA
En este tutorial, vamos a integrar y configurar a nuestro formulario de contacto el código de Google reCAPTCHA. Por lo tanto para mayor seguridad usaremos el reCAPTCHA de Google. Implementando este servicio gratuito podemos validar a los usuarios humanos y proteger los formularios de los bots.
¿Cómo usar este servicio gratuito de Google reCAPTCHA?
Básicamente este servicio carga automáticamente las dependencias de la biblioteca de códigos reCAPTCHA de Google. Sin embargo, para usar esta biblioteca gratuita, necesitamos obtener las claves de API desde google, registrando nuestra página web obligatoriamente.
Después de obtener las claves de API que nos proporciona google, hay que configurar el fichero «configuracion.php», usando las variables estas claves para integrar el código de Google reCAPTCHA.
<?php
//reCAPTCHA Configuracion
// Ir a Google y obtener las llaves necesarias para el correcto funcionamiento
// http://www.google.com/recaptcha/admin
define('SITE_KEY',"6LeB42AUAAAAAMNQkBNyzlyAU0waHbUcPYXYQeum");
define('SECRET_KEY',"6LeB42AUAAAAAK6elYoNInEa20ygDy9JoiNOwbtT")
?>Librerías necesarias para el funcionamiento del formulario
<script src="assets/jquery-1.12.4-jquery.min.js"></script> <script src="assets/jquery.validate.min.js"></script> <script src="assets/ValidarRegistro.js"></script>
Formulario de contacto con Google reCAPTCHA
Este código mostrara el formulario de contacto al usuario con el código reCAPTCHA de Google.
<form id="frmContact" action="" method="POST" novalidate="novalidate">
<div class="form-group">
<label for="nombres">Nombres:</label>
<input type="text" id="nombres" name="nombres" placeholder="Ingrese su nombre" title="Por favor ingrese su nombre" class="form-control" aria-required="true" required>
</div>
<div class="form-group">
<label for="Email">Email:</label>
<input type="text" id="email" name="email" placeholder="Ingrese su Email" title="Por favor ingrese su Email" class="form-control" aria-required="true" required>
</div>
<div class="form-group">
<label for="Numero Telefono">Numero Telefono:</label>
<input type="text" id="telefono" name="telefono" placeholder="Su numero telefonico" title="Por favor ingrese su numero telefonico" class="form-control" aria-required="true" required>
</div>
<div class="form-group">
<label for="Comentarios">Comentarios:</label>
<textarea class="form-control" id="comment-content" name="contenido" placeholder="Ingrese su comentario"></textarea>
</div>
<div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div>
<div id="mail-status"></div>
<button class="btn btn-primary" type="Submit" id="send-message" style="clear:both;">Enviar Mensaje</button>
</form>Para el correcto funcionamiento el usuario tiene que resolver las preguntas del reCAPTCHA, se devolverá el token de respuesta. Se creará dinámicamente un nuevo elemento HTML g-recaptcha-response para almacenar el token de respuesta del usuario. Este token se publicará en el código PHP al enviar el formulario de contacto.
¿Cómo obtener el código de reCAPTCHA?
1. Primero ir a la página de Google
https://www.google.com/recaptcha/admin
Luego configurar los datos de nuestra página web
a) En etiqueta colocar un nombre representativo a nuestra página web
b) En los botones de opción tenemos que elegir reCAPTCHA v2
c) Colocar nuestro dominio web, tal como se muestra en la imagen
d) Aceptar los términos y condiciones del servicio
e) Solamente presionar el botón registrar.
2. Resultados del registro de nuestro dominio
No enfocamos en la sección Claves, como podemos observar nos mostrara dos claves
a) Clave del sitio
b) Clave secreta
Estas claves tenemos que implementar en el fichero «configuracion.php», que lo solicita para que nuestro dominio este habilitado y con ello funcionara nuestro formulario de contacto.
Mostrando nuestro formulario como resultado final
CONCLUSIÓN
La utilización de este servicio es muy recomendable para implementar en formularios, inicios de sesión, etc. Por lo tanto, este servicio tiene beneficios porque los ficheros que necesita lo brinda google a través de su CDN.
<script src='https://www.google.com/recaptcha/api.js'></script>
Miles de páginas en internet lo usan para validar que sea una persona quien está delante del computador y no un robot.
Espero que esta breve explicación les ayude para implementar este servicio gratuito de la compañía google.
DESCARGAS
