Como implementar la reCaptcha V2 de google en Laravel
La recaptcha versión 2 de google (No soy un robot) la he implementado en un proyecto de laravel versión 9, lo puedes implementar el Laravel 8, o Laravel 7, para este ejemplo hacemos uso del sistema de autenticación Laravel Breeze, este sistema de autenticación es de fácil implementación y no nos llevará más de 10 minutos en instalarlo.
Nota: Yo estoy trabajando con el sistema operativo Linux Manjaro KDE, si tienes otro sistema operativo como Linux ubuntu, Windows o MAC, no hay inconvenientes.
Cabe señalar que debes contar con las siguientes herramientas, dicho de otra manera, debes contar con las siguientes aplicaciones en tu sistema operativo:
- Composer, el gestor de paquetes de Laravel, yo tengo composer versión 2,
- Node js, el framework basado en javascript, para poder ejecutar el gestor de paquetes npm,
- XAMPP, Servidor de base de datos local, con mysql,
- Un editor de texto, en mi caso utilizao Sublime Text, V4 (La versión 3 también te puede ser de utilidad)
- Una cuenta de google, para poder obtener la secret key, y el site key de la recaptcha
Si tienes poca experiencia con el framework Laravel, no te preocupes, vamos a ir paso a paso para que al final tu proyecto pueda ser 100% funcional.
Creación del proyecto Laravel
Abrimos una terminal o linea de comandos,
Existen dos formas o comandos para crear nuestro proyecto laravel, el primero es:
composer create-project laravel/laravel example-app
en donde example-app corresponde al nombre del proyecto, el cual puedes modificar o personalizar.
el segundo comando es más corto, lo puedes aplicar si ya cuentas con el instalador de laravel.
laravel new example-app
de igual forma, example-app hace referencia al nombre del proyecto, en mi caso ejecuto y asigno el nombre de recaptchav2
Laravel new recaptchav2
Cuando ha finalizado la creación del proyecto, tenemos que acceder al directorio recaptchav2 con el comando:
cd recaptchav2
Instalación del sistema de autenticación Laravel Breeze
Ahora ejecutamos el comando que nos permitirá implementar el sistema de autenticación Laravel Breeze en nuestro proyecto Laravel:
composer require laravel/breeze --dev
Ejecutamos un segundo comando para completar la instalación:
php artisan breeze:install
Debido a que Laravel Breeze utiliza el framework de diseño Tailwind css, necesitamos ejecutar el siguiente comando:
npm install && npm run dev
Configuración de Base de datos / Conectar base de datos
Abrimos el proyecto recién creado en el editor de texto de nuestra preferencia, en mi caso utilizo Sublime Text, abrimos el archivo .env que se encuentra en la parte raiz de los directorios del proyecto.
Una vez abierto el archivo . env, debemos validar 6 datos importantes que son necesario para conectar nuestro proyecto Laravel con la base de datos, los cuales son:
- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=recaptchav2
- DB_USERNAME=root
- DB_PASSWORD=
En DB_CONNECTION debe contener mysql, ya que ese es el motor de base de datos con el que estamos trabajando.
En DB_HOST debe contener la url de localhost, 127.0.0.1, ya que el proyecto lo estamos desarrollando de modo local.
En el campo DB_PORT por lo regular utilizamo el puerto 3306, si por alguna razón el puerto en tu computadora es diferente, como por ejemplo 33060, solo actualizalo.
En el campo DB_DATABASE colocamos el nombre de la base de datos, por default te aparece el nombre laravel, en mi caso como utilicé el comando Laravel new, me toma el nombre del proyecto como nombre de la base de datos.
El campo DB_USERNAME por default utilizamos root, si en tu servidor de base de datos has configurado otro usuario con los mismos permisos que root, lo puedes modificar.
El campo DB_PASSWORD lo dejo en blanco, ya que no he aplicado una contraseña en mi servidor de base de datos mysql o phpmyadmin, si tu ya has asignado una contraseña aquí la debes colocar.
Creación de base de datos
Debemos activar el servidor xampp, con mysql y apache, para poder ejecutar en el navegador phpmyadmin. y aquí crear la base de datos que llevará el mismo nombre que asignamos en el archivo .env de nuestro proyecto Laravel, para nuestro caso creamos la base de datos recaptchav2
Ejecutar migraciones de Laravel
Volvemos a la terminal, y ejecutamos el comando que creará las tablas del sistema de autenticación en la base de datos que recién hemos creado en phpmyadmin.
php artisan migrate
Si actualizamos phpmyadmin, podremos validar que la base de datos ya cuenta con las tablas correspondientes:
Validar creación del proyecto Laravel con sistema de autenticación Laravel Breeze
En la terminal ejecutamos el comando php artisan migrate que nos permite activar el servidor php, para luego en una ventana nueva del navegador, mediante la url 127.0.0.1:8000 (localhost) podamos validar la creación de nuestro proyecto laravel, el cual cuenta ya con el sistema de autenticación Laravel Breeze.
php artisan serve
Si hacemos click en el botón login, o en el botón de registro, podremos ver que las págians de login y de registro aún no cuentan con la recaptcha.
Instalación de recaptcha v2 en nuestro proyecto laravel mediante repositorio github
En la terminal ejecutamos el comando:
composer require anhskhobo/no-captcha
Este comando instalará los archivos correspondientes para poder ejecutar la recaptcha.
Necesitamos publicar el archivo de configuración de esta librería no-captcha, ejecutamos en la terminal:
php artisan vendor:publish --provider="Anhskhobo\NoCaptcha\NoCaptchaServiceProvider"
Secret key y Site key reCaptcha de google
Ahora debemos agregar los campos secret key y sitekey a nuestro proyecto laravel, de igual forma, se integran en el archivo .env, al final del archivo:
NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key
En una nueva pestaña del navegador escribimos la url: google.com/recaptcha/admin/create
En el campo Etiqueta colocamos un nombre, yo le asigné captchav2,
pasamos al campo Tipo de reCaptcha, seleccionamos el radio button reCaptcha v2
Se despliegan 3 radio buttons más, seleccionamos el radio button "Casilla de verificación No soy un robot"
Pasamos a la sección de Dominio, escribimos la palabra: localhost y presionamos el botón +, para agregar el dominio,
Ahora debemos aceptar las condiciones del servicio de reCaptcha, marcamos el checkbox, y hacemos click en el botón ENVIAR,
Cuando presionamos el botón enviar, la página web nos manda a otra página que ya ha generado las claves correspondientes, como son la site_key y la secret_key,
estos valores los vamos a copiar y a pegar en el archivo .env como corresponda.
En la terminal debemos ejecutar el comando:
php artisan config:clear
para limpiar la configuración del caché.
Plantilla login
En el editor de texto, abrimos el archivo: resources/views/auth/login.blade.php
Nos ubicamos entre el div del Remember me y el botón Log in,
Aquí vamos a generar un nuevo div y agregaremos dos método javascript, render y display, queda de la siguiente forma:
<div class="form-group mt-3">
{!! NoCaptcha::renderJs() !!}
{!! NoCaptcha::display() !!}
</div>
Ahora ejecutamos en la terminal el comando:
npm run watch
Actualizamos el navegador y hacemos click en el botón Log in,
aquí ya podremos ver la recaptcha dentro del formulario
Ya hemos avanzado bastante en este proyecto, sin embargo nos faltan los últimos pasos, debemos generar un nuevo usuario desde la plantilla de registro, ahora hacemos log out, y nos dirigimos a la plantilla de Log in, colocamos la cuenta de correo, y contraseña creada recientemente, y al hacer clicl en el botón LOG IN, vemos que sin marcar la recaptcha, podemos entrar a la página del dashboard, por lo que debemos implementar ahora la validación de la recaptcha, para que nos indique que debemos marcar la recaptcha, o de lo contrario no puede continuar el usuario.
Antes de pasar a las validaciones, veamos un demostración para mostrar la recaptcha en diferentes idiomas.
Recaptcha en diferentes idiomas
Al método render le vamos a agregar el siguiente código, que nos permitirá mostrar el texto No soy un robot en el idioma frances,
<div class="form-group mt-3">
{!! NoCaptcha::renderJs('fr', true, 'recaptchaCallback') !!}
{!! NoCaptcha::display() !!}
</div>
Al actualizar los datos y recargar el navegador, el widget de la recaptcha se ocultará ya que en el método render se cuenta con el código en true, debemos agregar un script al final de la plantilla log in, quedano de la siguiente manera:
</x-guest-layout> (esto indica el final de la plantilla log in, debajo se agrega el script)
<script>
var onloadCallback = function() {
alert("grecaptcha is ready");
};
</script>
La variable onloadCallback la copiamos y la pegamos en el método render, quedando de la siguiente manera:
<div class="form-group mt-3">
{!! NoCaptcha::renderJs('en', true, 'onloadCallback') !!}
{!! NoCaptcha::display(['data-theme' => 'dark']) !!}
</div>
Guardamos, y actualizamos el navegador, ahora el navegador nos mostrará un mensaje de alerta que indica que la recaptcha ya está lista.
Para poder visualizar el widget de la recaptcha nuevamente en el formulario del log in, debemos cambiar la condición true por false, quedando así:
<div class="form-group mt-3">
{!! NoCaptcha::renderJs('fr', false, 'onloadCallback') !!}
{!! NoCaptcha::display() !!}
</div>
Al actualizar el navegador, veremos que se muestra nuevamente el widget de la recaptcha y la descripción No soy un robot se encuentra en el idioma ingles, si deseas mostrar el texto en idioma ingles cambias las letras fr que están en el método render por en, y para el idioma español agregamos es,
<div class="form-group mt-3">
{!! NoCaptcha::renderJs('es', false, 'onloadCallback') !!}
{!! NoCaptcha::display(['data-theme' => 'dark']) !!}
</div>
Validación de recaptcha en archivo request
En el editor de texto, abrimos el archivo que se encuentra en la ruta: App\Http\Requests\Auth\LoginRequest.php
Nos desplazamos hasta la función rules(), y agregamos el código que nos solicitará marcar la recaptcha en el log in, quedando de la siguiente manera la función:
public function rules()
{
return [
'email' => ['required', 'string', 'email'],
'password' => ['required', 'string'],
'g-recaptcha-response' => 'required|captcha',
];
}
Al actualizar el navegador, introducimos los datos de cuenta de correo, y contraseña, si presionamos el botón Log in, sin marcar la recaptcha veremos que ya no podemos ingresar al dashboard hasta que marquemos las recaptcha, ahora bien, colocamos la cuenta de correo, la contraseña y marcamos la recaptcha, hacemos clicl en el botón log in, el sistema de autenticación ya nos permite ingresar al dashboard de nuestro proyecto laravel.
Con esto hemos terminado el tutorial, si este post fue de tu ayuda, hazlo saber en los comentarios,
Aquí te dejo el video en el que podrás seguir también de manera clara el paso a paso de este procedimiento, además de que incluye la recaptcha en la vista de registro.
https://www.youtube.com/watch?v=zWHxMZw5bz4&t=1178s
Saludos.
