Hay veces que tenemos que poner una protección extra en los formularios de nuestras webs, porque recibimos mucho spam de robots. Sin ir más lejos, yo tuve que poner esta protección en este blog, tanto en el formulario de contacto como en el de enviar comentarios, porque recibía bastante spam. Google reCAPTCHA es el servicio que más se utiliza para prevenir el envío de spam de robots, seguramente hayas visto el típico recuadro que te hace seleccionar unas imágenes relacionadas con una palabra, eso es Google reCAPTCHA. En esta entrada, vamos a ver como integrar varias versiones de reCAPTCHA con Laravel.
reCaptcha casilla
Primero de todo, instalamos un paquete que nos facilitará mucho las cosas:
|
1 |
composer require anhskohbo/no-captcha |
Como yo estoy utilizando la versión 5.7 de Laravel, no hace falta añadir el service provider, ni el alias, gracias al auto-discovery. Pero si estás utilizando una versión anterior a las 5.5, sí que tendrás que hacerlo.
Una vez ya tenemos el paquete instalado, tenemos que añadir las keys de Google reCAPTCHA al archivo .env . Primero, vamos a obtener las keys. Para ello, vamos a este enlace y nos logueamos con nuestra cuenta de Google.
Esto será lo que verás cuando entres. Donde poner “Tus sitios de reCAPTCHA” saldrá un listado con todos los sitios que hayas añadido. Yo tengo uno que es el de este blog. En el formulario de abajo, el que pone “Registrar un nuevo sitio”, es donde se añade un nuevo sitio y se obtienen las claves de este. Lo rellenamos:
En dominios, tendrás que poner el tuyo. Yo pongo “localhost” porque estoy en local.
Si te fijas, estamos seleccionando reCAPTCHA v2 y Casilla, este es el tipo de reCAPTCHA de selección de imágenes. En el siguiente punto veremos como hacerlo invisible y en un próximo post cómo integrar con reCAPTCHA v3.
Le damos al botón de “Registrar” y nos redirigirá a una página con las claves, tanto la del sitio como la secreta y con instrucciones de como se integraría. También, más abajo, podremos modificar la información que hemos puesto antes (dominios, propietarios, etc.).
Copiamos las claves y las ponemos al final del archivo .env :
|
1 2 |
NOCAPTCHA_SECRET=Clave secreta NOCAPTCHA_SITEKEY=Clave del sitio |
Antes de nada, tenemos que agregar el código que añade el JS necesario para que funcione el reCAPTCHA. Este código lo añadimos en la vista layouts/app.blade.php :
|
1 2 3 4 |
<head> ... {!! NoCaptcha::renderJs() !!} </head> |
Yo voy a añadir el reCAPTCHA en el formulario de registro de usuarios, pero se puede añadir en cualquier formulario de la aplicación. Entonces, me voy a la vista del formulario de registro auth/register.blade.php y añado el siguiente código antes del código del botón de registro:
|
1 2 3 4 5 |
<div class="form-group row"> <div class="col-md-6 col-md-6 offset-md-4"> {!! NoCaptcha::display() !!} </div> </div> |
Vamos a la ruta donde lo hayamos puesto y veremos lo siguiente:
Ya es un reCAPTCHA funcional, pero aún no se valida. Para ello, tendremos que agregar a la validación del formulario o a la Form Request, la siguiente regla:
|
1 2 |
... 'g-recaptcha-response' => 'required|captcha', |
Y en en la vista, agregaremos el siguiente código para mostrar los errores:
|
1 2 3 4 5 6 |
... @if ($errors->has('g-recaptcha-response')) <span class="help-block text-danger" role="alert"> <strong>{{ $errors->first('g-recaptcha-response') }}</strong> </span> @endif |
Y con esto ya lo tendríamos lo siguiente:
reCaptcha invisible
Para añadir un reCAPTCHA invisible, lo que tendremos que hacer es lo mismos pasos que para el anterior, ya que el paquete instalado lo soporta. Tendremos que obtener las claves seleccionando reCAPTCHA v2 e invisible.
Ponemos las claves en el archivo .env . Seguimos los mismos pasos, ponemos el código en la vista app.blade.php y aquí es donde viene la diferencia. Parar mostrar el reCAPTCHA no se pone el mismo código, se pone el siguiente:
|
1 |
{!! NoCaptcha::displaySubmit('register-form', 'Register', ['class' => 'btn btn-primary !!} |
El primer parámetro es el id del formulario, el segundo es el texto del botón que genera y el tercero son opciones del botón.
Hay que tener en cuenta que este código genera un nuevo botón de submit, por tanto, deberemos quitar el que ya teníamos.
Después, tendríamos que poner la regla de validación en la validación del formulario y el código para mostrar los errores.
Como has visto, es súper sencillo integrar Google reCAPTCHA con Laravel gracias al paquete No CAPTCHA reCAPTCHA. En este post hemos visto como integrar con este paquete la v2, tanto la versión que sale la casilla de verificación como la invisible. Como ya he dicho anteriormente, en un post próximo veremos como integrar la nueva versión v3 de Google reCAPTCHA.
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR
Buen apunte, esperando el post para la versión v3. ¡Gracias!
Lo he probado siguiendo los mismos pasos y no me funciona. Se envia el mensaje aunque no se marque la casilla del recaptcha. ¿Hay que añadir algo al archivo de rutas? Gracias.
Hola Toni,
Muchas gracias por tu mensaje.
No hay que añadir nada en el archivo de rutas. Has puesto la regla ‘g-recaptcha-response’ para validar el campo?
Te dejo un enlace sobre las validaciones en Laravel https://laravel.com/docs/5.7/validation.
Espero que te ayude.
Un saludo?
¡Gracias por la respuesta! He conseguido que funcione en local, pero no en produccion. Me sale un error en el archivo vendor/laravel/framework/src/Illuminate/Foundation/ProviderRepository.php:
Class ‘Anhskohbo\NoCaptcha\NoCaptchaServiceProvider’ not found
¿Alguna idea? Muchas gracias.
Hola,
Tiene pinta de que no has instalado el paquete en producción, confírmalo y ya me dices. Espero que te ayude.?
Un saludo.
Lo tengo en un hosting compartido, por lo que no puedo instalar por consola. Simplemente he subido los archivos con cambios por FTP. ¿He hecho lo correcto?
Gracias, saludos.
Hola Toni,
Al estar en un servidor compartido y no tener acceso a la consola, pues sí. Tendrás que subir los archivos por FTP, los del vendor también. Aunque subir el directorio vendor por FTP no es lo recomendable, en principio, es lo único que puedes hacer si no tienes acceso a la consola.
Un saludo!
Ok, lo he hecho así, subiendo la carpeta /anhskohbo a /vendor y tampoco. Es posible que haya algo más que tenga que subir?
Aunque tengo Laravel 5.7 he realizado los passos de añadir el service provider y el alias, además del publisher (para ver si solucionaba algo), pero nada.
Muchas gracias por tu ayuda.
En cualquier caso, si subo TODO el proyecto al servidor deberá funcionar, supongo, no?
PS: Perdón por comentar en dos tandas.
Hola Toni,
No te preocupes, no pasa nada.
Sí, en principio, sí. Si subes todo debería funcionar. Espero que te ayude.
Un saludo.
Gracias por todo. ¡Finalmente ha funcionado! Efectivamente, he tenido que subir todo el proyecto de nuevo. En este punto es importante señalar que lo mejor es borrarlo todo en el servidor, que no haya ningún archivo antes de subirlo, ya que me daba problemas la caché de la carpeta storage.
Lo apunto por si alguien se encuentra con los mismos problemas. De nuevo, gracias por tu tiempo.
Saludos.
Hola, segui paso a paso el tutorial pero no me sale la caja del captcha (es decir no se ve el mensaje ese de «no soy un robot). De hecho puse la validación y sí sale si quiero registrar un usuario me sale que el captcha es requerido. Estuve investigando y cree unas nuevas credenciales para el sitio, pero eso tampoco resolvió el problema. No se qué mas hacer. El {!! NoCaptcha::renderJs() !!} lo mande antes de cerrar el body porque los archivos js se cargan en el pie de la pagina.
Alguna sugerencia ? Desde ya muchas gracias…
ya lo pude resolver, al fin y al cabo hice un clear cache de todo, y anduvo perfecto !!!
Hola Marcelo! Muchas gracias por tu comentario y me alegro que lo hayas podido solucionar.
Hice tal cual los pasos, pero cuando resuelvo el captcha igual me dice que no lo resolví.
Cuando se resuelve el captcha y me lo marca como good, me sigue tirando que no lo resolvi, y estan agregadas tanto las claves como las validaciones.
Hola! Perdona por tardar en contestar.
Has probado lo que se menciona en alguno de los comentarios anteriores?