Laravel series VI: instalando un sistema de autenticación

Aunque no siempre nos vamos a encontrar desarrollando una página web en Laravel que controle la gestión de una base de datos, este es el escenario más habitual.

En muchos de estos escenarios, queremos tener un sistema de protección bajo contraseña que nos permita que no todo el mundo pueda ejecutar cierto código que modifique los registros de la base de datos (por ejemplo, si tenemos un backend para matener los datos; o cuando la aplicación sólo debe de ser accesible por algunos usuarios).

Si habéis aterrizado directamente aquí y os interesa aprender más sobre el Framework Laravel, recordad que este artículo pertenece a una serie sobre Laravel:

• Laravel series I: El modelo MVC
• Laravel series II: Instalación + Artisan
• Laravel series III: Bases de datos + modelo
• Laravel series IV: Migraciones + seeders
• Laravel series V: Vistas Blade

Recuerdo aquellos tiempos en los que el sistema de autenticación de nuestra aplicación era programado desde cero por el programador.

Tener un frontal con los típicos <input> de nombre y contraseña, tener que evitar las inyecciones SQL con comandos específicos, gestionar la encriptación de la contraseña, etc.

¡Todo eso ha quedado atrás!

Laravel integra un sistema de autenticación, que cómo ahora veremos, es capaz de montarnos un frontal para el usuario, dar de alta todos los campos de la base de datos e incluso facilita la existencia de toda la rama de: ‘¿ha olvidado su contraseña?’.

Instalando el sistema de autenticación Breeze ¶

Recordad que en el momento de escribir este artículo, Laravel se encuentra en la versión 8.

En esta versión de Laravel, el Framework implementa algo que han llamado ‘Kits de iniciación’ (Starter Kits).

Gracias a estos kits de iniciación, tan sólo con la ejecución de un comando, el Framework se encargará de la creación de toda la estructura necesaria para integrar el sistema de autenticación de Laravel.

Con esta estructura nos referimos a: controladores, rutas y vistas.

En este caso, este starter kit se encargará de instalar los siguientes módulos de autenticación:

• Login.
• Registro.
• Reset de password.
• Verificación por e-mail.
• Confirmación de password.
• Cierre de sesión.

¡Todo preparado para ser utilizado! Vamos a verlo.

Damos por hecho que ya tenemos una aplicación Laravel instalada en nuestro sistema. Si aún no lo habéis hecho, podéis encontrar los pasos en el capítulo dos de esta serie (tenéis un índice al inicio).

Para crear una nueva aplicación Laravel (si tenemos el instalador en nuestro sistema instalado a nivel global), sólo tendremos que ejecutar:

composer create-project laravel/laravel laravel-series-vi-autenticacion

Para incluir Breeze dentro de nuestros paquetes de la aplicación, utilizaremos el siguiente comando de Composer:

composer require laravel/breeze --dev

Posteriormente, a través de un comando Artisan, instalaremos el sistema de autenticación en nuestra aplicación. Este comando creará:

• Vistas especificas de autenticación (pantalla de login, reset de password, etc.).
• Rutas hacia estas vistas.
• Controladores que contienen la parte de código encargada de realizar las funciones necesarias para el login.
• Migraciones con las tablas necesarias para el que sistema de login funcione correctamente (el artículo de la serie que hace referencia a las migraciones es el número cuatro. Tenéis un índice al inicio de este artículo).

La ejecución de estos comandos requiere que tengáis instalado en vuestro sistema Node.js, ya que la parte frontal necesita ser compilada para que los CSS de vuestra aplicación estén disponibles.

php artisan breeze:install

npm install
npm run de v
php artisan migrate

Cómo podéis ver, entre los comandos también se ha incluido la ejecución de la migración.

Esto obliga que en este punto tengáis la conexión a vuestra base de datos correctamente configurada, ya que el comando migratede Artisan, va a ejecutar la creación de las tablas necesarias para la gestión de usuarios.

En el servidor, sólo necesitamos tener la base de datos dada de alta y un usuario con derechos plenos contra la misma.

Para configurar la conexión a base de datos, podéis echar un vistazo al artículo tres de esta serie (en ese caso se trata de una configuración para MySQL. Los datos de conexión a base de datos se encuentran en el archivo de variables de entorno .env que se está localizado en el raíz de vuestro sitio.

En este punto, si echamos un vistazo a nuestra base de datos podemos ver que se ha creado una tabla users, en la que Breeze se apoyará para realizar toda la gestión de usuarios.

Rutas generadas ¶

A partir de aquí, seguro que os estáis preguntando:

Pero a ver, ¿esto es todo?

Pues sí, familia, esto es todo. Así de mágico es el mundo de Laravel, que además en cada versión va mejorando, como pasa en este caso con los kits de iniciación.

Lo primero que vamos a hacer es echar un vistazo a nuestro archivo de rutas para ver lo que este kit nos ha insertado. Recordad que las rutas de nuestra aplicación se encuentran contenidas en routes\web.php:

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the 'web' middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth'])->name('dashboard');

require __DIR__.'/auth.php';

Como podemos ver en el archivo de rutas, nos encontramos con la ruta que Laravel instala por defecto cuando creamos una aplicación nueva: \welcome.

Aparte de la ruta por defecto, vemos que la instalación de Breeze nos ha instalado una nueva ruta: \dashboard. Esta ruta es una especie de panel de control que el sistema asume que tiene que instalar debido a que hay un gestión de usuarios en la aplicación.

Por último se realiza un include de otro archivo de rutas que ha sido creado por Breeze: routes\auth.php, y es este el que contiene todas las rutas referentes a la gestión de usuarios. El archivo contiene el siguiente código:

<?php

use App\Http\Controllers\Auth\AuthenticatedSessionController;
use App\Http\Controllers\Auth\ConfirmablePasswordController;
use App\Http\Controllers\Auth\EmailVerificationNotificationController;
use App\Http\Controllers\Auth\EmailVerificationPromptController;
use App\Http\Controllers\Auth\NewPasswordController;
use App\Http\Controllers\Auth\PasswordResetLinkController;
use App\Http\Controllers\Auth\RegisteredUserController;
use App\Http\Controllers\Auth\VerifyEmailController;
use Illuminate\Support\Facades\Route;

Route::get('/register', [RegisteredUserController::class, 'create'])
                ->middleware('guest')
                ->name('register');

Route::post('/register', [RegisteredUserController::class, 'store'])
                ->middleware('guest');

Route::get('/login', [AuthenticatedSessionController::class, 'create'])
                ->middleware('guest')
                ->name('login');

Route::post('/login', [AuthenticatedSessionController::class, 'store'])
                ->middleware('guest');

Route::get('/forgot-password', [PasswordResetLinkController::class, 'create'])
                ->middleware('guest')
                ->name('password.request');

Route::post('/forgot-password', [PasswordResetLinkController::class, 'store'])
                ->middleware('guest')
                ->name('password.email');

Route::get('/reset-password/{token}', [NewPasswordController::class, 'create'])
                ->middleware('guest')
                ->name('password.reset');

Route::post('/reset-password', [NewPasswordController::class, 'store'])
                ->middleware('guest')
                ->name('password.update');

Route::get('/verify-email', [EmailVerificationPromptController::class, '__invoke'])
                ->middleware('auth')
                ->name('verification.notice');

Route::get('/verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
                ->middleware(['auth', 'signed', 'throttle:6,1'])
                ->name('verification.verify');

Route::post('/email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
                ->middleware(['auth', 'throttle:6,1'])
                ->name('verification.send');

Route::get('/confirm-password', [ConfirmablePasswordController::class, 'show'])
                ->middleware('auth')
                ->name('password.confirm');

Route::post('/confirm-password', [ConfirmablePasswordController::class, 'store'])
                ->middleware('auth');

Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])
                ->middleware('auth')
                ->name('logout');

En este caso, las rutas hacen referencia a funcionalidades como: login, resetear password, verificación de email, registro, cierre de sesión, etc.

Desde ahora, todas estas rutas se encuentran en activo en nuestra aplicación.

Vistas generadas ¶

En referencia a las vistas (contenidas en resources\views), todas las vistas generadas por Breeze están contenidas en la carpeta: resources\views\auth.

Dentro de esta ruta podemos ver una especie de espejo de las funcionalidades que teníamos en las rutas. De hecho, si nos fijamos bien, podemos ver que todas las rutas apuntan a su vista en base a la función que desempeñan.

El contenido de la carpeta de vistas auth\ es el siguiente:

├── resources
│   ├── views
│   │   ├── auth
│   |    |    ├── confirm-password.blade.php
│   |    |    ├── forgot-password.blade.php
│   |    |    ├── login.blade.php
│   |    |    ├── register.blade.php
│   |    |    ├── reset-password.blade.php
│   |    |    ├── verify-email.blade.php

Controladores generados ¶

Por último, en los controladores que se han generado, vamos a encontrar algo parecido a lo que hemos venido viendo en las vistas y rutas; una serie de controladores que realizan cada una de las funciones necesarias para el sistema de autenticación.

Como ya sabéis, los controladores se van a encargar de dar toda la funcionalidad necesaria a la aplicación, ejecutando todo el código necesario para que el sistema funcione correctamente.

Vamos a echarle un vistazo a los controladores propios de la autenticación, estos están contenidos dentro de app\Http\Controllers\Auth:

├── app
│   ├── Http
│   │   ├── Controllers
│   |    |    ├── Auth
│   |    |    |    ├── AuthenticatedSessionController.php
│   |    |    |    ├── ConfirmablePasswordController.php
│   |    |    |    ├── EmailVerificationNotificationController.php
│   |    |    |    ├── EmailVerificationPromptController.php
│   |    |    |    ├── NewPasswordController.php
│   |    |    |    ├── PasswordResetLinkController.php
│   |    |    |    ├── RegisteredUserController.php
│   |    |    |    ├── VerifyEmailController.php

Probando nuestro sistema de autenticación ¶

Ahora sólo nos queda comprobar cómo se ve nuestro sistema de autenticación (la parte frontal, el frontend).

Como ya hemos visto antes, las funcionalidades del sistema de autenticación son las propias de un sistema de este estilo: login, registro, olvido de password, cierre de sesión, etc.

Vamos a echarle un vistazo a alguna capturas del sistema para comprobar como, sin haber realizado ninguna acción excepto la instalación de Breeze, tenemos un sistema de autenticación para nuestra aplicación.

¿No os parece bastante increible?

¡Ante ustedes, la grandeza de los Frameworks!

Ahora sólo necesitamos situarnos en la carpeta de la aplicación y ejecutar el comando:

php artisan serv

(recordad que tenéis que tener un servidor PHP ejecutándose. Artículo dos de esta serie)

Así se ve la pantalla de login (http://nuestra-ip/login):

Esta es la pantalla de registro (http://nuestra-ip/register):

Esta es la pantalla de olvido de password (http://nuestra-ip/forgot-password):

¿Bastante impresionante, verdad?

Ahora sólo os queda descargaros el código de la aplicación de autenticación de GitHub, o simplemente poneros a montar un sistema vosotros mismos.

¡Nos vemos en el siguiente fragmento de código!