Integración de Google reCAPTCHA con el formulario de contacto

January 8, 2023

Integración de Google reCAPTCHA con el formulario de contacto

En esta parte del artículo, aprenderá cómo integrar Google reCAPTCHA.

Parte I: Plantilla de formulario de contacto.
Parte II: Integre Google reCAPTCHA en el formulario de contacto.
Parte III: Validación de datos del formulario usando PHP y Ajax.

Google reCAPTCHA es la mejor solución para proteger los formularios web. Este sistema verifica que el usuario que está accediendo al formulario de tu web sea una realmente una persona.

El reCAPTCHA es una poderosa herramienta destinado a proteger los sitios web de las agresiones realizadas con ayuda de los bots.

Google reCAPTCHA cuenta con diferentes de versiones de su aplicación, actualmente son V2 y V3.

reCAPTCHA

La versión V2 es la más utilizada y compatible con la mayoría de los sistemas, consume menos carga que la versión V3, por eso integramos nuestro formulario con la versión V2.

Generación de claves API de seguridad y sitio web reCAPTCHA

En primer lugar accede a la web de administración Google reCAPTCHA e inicia sesión con tu cuenta de Gmail. Debes tener una cuenta de Google para crear reCAPTCHA para tu sitio web.

Una vez identificado con tus datos, pulsamos sobre el botón "+" que aparece por la parte derecha del Admin console y registre su aplicación.

Google-creer

En este formulario de contacto hemos elegido Google reCAPTCHA v2, puesto que es uno de los más empleados y que cuenta con una amplia compatibilidad con diferentes plugins y módulos.

A continuación completa el formulario con los datos de tu web.
Te recomiendo que pongas el nombre en la etiqueta porque esto te ayuda a reconocer tu nombre de dominio registrado.
register complet

Al guardar el formulario de registro del reCAPTCHA v2, finalmente se mostrarán las clave del sitio Web y la clave secreta que debes copiar para agregarlas en el script de tu página Web. Guarda bien estas claves y no las compartas con otras personas, por razones de seguridad.

api keys

Inclusión del API

Ahora, te explico de forma sencilla como puedes añadir Google reCAPTCHA a nuestro formulario. Agrega el siguiente código dentro de la cabecera o dentro de la etiqueta <head>:

<!-- Google reCAPTCHA -->
   <script src='https://www.google.com/recaptcha/api.js'></script>

La etiqueta g-recaptcha es un elemento <div> con el nombre de la clase “g-recaptcha” y la clave del sitio en el atributo data-sitekey.

A continuación, incluimos la etiqueta de elemento <div> con la clase g-recaptcha dentro de nuestro formulario, donde queremos evitar el spam o el abuso y también necesitamos pegar la clave del sitio que generamos en el paso anterior.

Al comenzar a escribir nuestro formulario, habíamos marcado el lugar con un comentario HTML, donde insertaremos reCaptcha

Agregamos justo antes del botón de enviar:

 <!-- Google reCAPTCHA -->
          <div class="container pt-4 text-left">
             <label for="recaptcha">reCaptcha
               <span class="text-danger">&#42; </span> 
             </label>  
             <div class="form-group col-auto pl-2"> 
             <div class="g-recaptcha"  id="grecaptcha" name="g-recaptcha-response" data-sitekey="TU CLAVE DEL SITIO AQUÍ"></div>
             <span id="recaptcha_error" class="text-danger"></span>
            </div>        
         </div>                         
  <!-- // Google reCAPTCHA -->

Aprendimos cómo crear fácilmente Google reCAPTCHA e integrarlo con el formulario de contacto. Puede ver la demostración en vivo desde el enlace Demostración a continuación.

Demostración

En la siguiente parte del artículo, describiremos cómo implementar la validación de datos del formulario sin actualizar la página web usando Ajax y PHP.

Siguiente parte: Validación de datos del formulario usando PHP y Ajax

html