Seleccionar página

Es recomendable incluir en los formularios de envío de datos, un captcha para evitar el spam. En este post, validaremos la información del captcha enviado desde el formulario de registro de nuevos usuarios. Para ello, vamos a seguir varios pasos:

  • Obtener las claves públicas y privadas de Google Recaptcha.
  • Instalar el paquete «google/recaptcha».
  • Crear un Trait.
  • Crear una validación personalizada donde usaremos el trait.
  • Añadir el campo para validarlo en los FormRequest/controladores donde lo requieran.
  • Añadir la dependencia javascript en la vista maestra del proyecto.
  • Usarlo en un formulario, por ejemplo, en el de registro de usuario en nuestra aplicacion web.

Si estamos en pruebas, registramos «localhost» como dominio y obtendremos la siguiente pantalla con nuestras claves:

Registramos nuestra App en https://www.google.com/recaptcha.

Ahora vamos a guardar las claves generadas por Google en el archivo de variables de entorno y usarlas de la siguiente forma:

  • La «Secret Key» la usaremos en el CaptchaTrait.
  • La «Site Key» la usaremos en la vista de registro de usuarios.

Instalamos el paquete de reCaptcha en nuestro proyecto:

Ahora, a por el Trait:

Una vez tenemos el Trait listo para usar, vamos a crear el la validación personalizada «captcha» para ser usado en las validaciones, ya sean en FormRequest o en los controladores:

A continuación, añadimos la validación personalizada «captcha» con el campo que viene desde el cliente «g-recaptcha-response» a las reglas del método «signup» del «TokenAuthController» (línea 9). Cuando estemos en la parte Angular, haremos mención a este post y renombraremos ese campo a simplemente «captcha»:

Para que se renderice el campo de captcha, hay que añadir la dependencia javascript de google en la vista maestra que Laravel trae por defecto:

Y para finalizar, añadimos el campo captcha al formulario de registro:

Así quedaría el formulario de registro:

GET /register