Cómo hacer un Formulario de Login en Laravel
¡Hola!
En el siguiente artículo explicaremos paso a paso como hacer un login en una aplicación desarrollada con el Framework Laravel en su versión 9
Índice
Flujo de Usuario
Antes de empezar a programar el Login con Laravel primero vamos a hacernos un esquema de como va a funcionar este sistema de Autenticación mediante la siguiente ilustración
Cómo deducimos de la siguiente ilustración el sistema de login funcionará de la siguiente forma:
1º El usuario accede a nuestra web.
2º La aplicación mediante la función index() del AuthController comprobará si el usuario ya está logado, si está logado va a la página logados y si no está logado se le muestra el formulario de login.
3º Suponiendo que el usuario se encuentra en el formulario de login, una vez envía sus credenciales, estas son recibidas en la función login del AuthController, si las credenciales son correctas el usuario es logado y llevado a la vista logados, en caso de que las credenciales del usuario sean incorrectas volverá al formulario de login con un mensaje de error.
Crear Aplicación Laravel
Asumimos que ya tienes instalado y configurado Composer en tu sistema, ejecuta el siguiente comando para crear una nueva App Laravel, (omite este paso si ya tienes la aplicación instalada)
composer create-project --prefer-dist laravel/laravel laravel_demo_appSi no tienes Laravel instalado puedes consultar el siguiente artículo: Cómo instalar Laravel
Conectar la aplicación Laravel a la Base de Datos
Antes de crear el AuthController, rutas y vistas debemos crear la base de datos de nuestra aplicación, preparar el .env, ejecutar las migraciones y crear usuarios en la tabla Users gracias al DatabaseSeeder.
1º Crear la base de Datos
Creamos la base de datos en nuestro gestor de bases de datos preferido (en nuestro caso estamos utilizando MySQL Workbench) con el nombre que queramos en nuestro caso llamaremos a nuestra Base de Datos login_laravel.
2. Creación de .env
Vamos a la raiz de nuestra aplicación Laravel y duplicamos el archino .env.example y lo renonbramos con el nombre de .env.
3. Modificar .env (el archivo que hemos creado en el paso anterior)
Modificamos los parámetros del .env referents a la base de datos que son:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nombre_base_de_datos
DB_USERNAME=usuario_base_de_datos(si no tenemos ponemos root)
DB_PASSWORD=password_base_de_datos(si no tenemos lo dejamos vacío)
En nuestro caso quedaría de la siguiente forma:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=login_laravel
DB_USERNAME=root
DB_PASSWORD=
4. Ejecutar las migraciónes
La aplicación Laravel viene con un modelo de User por defecto y un archivo de migración, solo tenemos que ejecutar el siguiente comando para crear la tabla dentro de nuestra base de datos, ve a la terminal y ejecuta el siguiente comando para ejecutar la migración:
php artisan migrate5. Crear Usuarios de Prueba
Para poder comprobar el Login en Laravel debemos crear usuarios de prueba, para ello modificamos el archivo DatabaseSeeder:
<?php
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
\App\Models\User::factory(10)->create();
\App\Models\User::factory()->create([
'name' => 'Test User',
'email' => '[email protected]',
'password' => bcrypt('holamundo1234')
]);
}
}
6. Ejecutar las Seed
Para crear los usuarios de prueba que acabamos de modificar debemos ejecutar el siguiente comando:
php artisan db:seedCrear controlador para la Autenticación
Lo siguiente que debemos realizar es crear el controlador que contendrá las funciones encargadas de logar al usuario, de mostrar la vista con el formulario y de mostrar la vista una vez estemos logados.
1. Creamos el controlador
Para crear el AuthController ejecutamos el siguiente comando
php artisan make:controller AuthController2. Configurar el controlador AuthController
Una vez lo hemos creado toca prepararlo con las 3 funciones siguientes:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class AuthController extends Controller
{
/**
* Función que muestra la vista de logados o la vista con el formulario de Login
*/
public function index()
{
// Comprobamos si el usuario ya está logado
if (Auth::check()) {
// Si está logado le mostramos la vista de logados
return view('logados');
}
// Si no está logado le mostramos la vista con el formulario de login
return view('login');
}
/**
* Función que se encarga de recibir los datos del formulario de login, comprobar que el usuario existe y
* en caso correcto logar al usuario
*/
public function login(Request $request)
{
// Comprobamos que el email y la contraseña han sido introducidos
$request->validate([
'email' => 'required',
'password' => 'required',
]);
// Almacenamos las credenciales de email y contraseña
$credentials = $request->only('email', 'password');
// Si el usuario existe lo logamos y lo llevamos a la vista de "logados" con un mensaje
if (Auth::attempt($credentials)) {
return redirect()->intended('logados')
->withSuccess('Logado Correctamente');
}
// Si el usuario no existe devolvemos al usuario al formulario de login con un mensaje de error
return redirect("/")->withSuccess('Los datos introducidos no son correctos');
}
/**
* Función que muestra la vista de logados si el usuario está logado y si no le devuelve al formulario de login
* con un mensaje de error
*/
public function logados()
{
if (Auth::check()) {
return view('logados');
}
return redirect("/")->withSuccess('No tienes acceso, por favor inicia sesión');
}
}
Explicación:
Como vemos en el controlador hemos creado tres funciones:
index: Es la función que se encarga de logar al usuario mediante su email y contraseña, si todo es correcto loga al usuario y va a la vista logados y si no es correcto volvemos al formulario con mensajes de error.
login: Es la función que se encarga de logar al usuario mediante su email y contraseña, si todo es correcto loga al usuario y va a la vista logados y si no es correcto volvemos al formulario con mensajes de error.
logados: Función que muestra la vista para los usuarios logados(si están logados) y si no van al formulario de login con un mensaje de error
Crear la ruta para la Autenticación
El siguiente paso importante que debemos realizar es crear las rutas que utilizaremos, en nuestro caso serán 3: (home, custom-login y logados), para crear las rutas deberemos modificar el archivo web.php
<?php
use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('/', [AuthController::class, 'index'])->name('home');
Route::post('/custom-login', [AuthController::class, 'login'])->name('custom-login');
Route::get('/logados', [AuthController::class, 'logados'])->name('logados');
Crear Vista con el formulario de Login
Comenzamos con la primera vista que será la que contendrá nuestro formulario de login. Primero nos dirigimos a la carpeta resources / views y creamos nuestro layout que llamaremos app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body >
@yield('content')
</body>
</html>
Una vez hemos creado el layout creamos otro archivo que se llamará login.blade.php
@extends('app')
@section('content')
@if(session('success'))
<h1>{{session('success')}}</h1>
@endif
<main class="login-form">
<div class="cotainer">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<h3 class="card-header text-center">Formulario Login</h3>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group mb-3">
<input type="text" placeholder="Email" id="email" class="form-control" name="email" required
autofocus>
@if ($errors->has('email'))
<span class="text-danger">{{ $errors->first('email') }}</span>
@endif
</div>
<div class="form-group mb-3">
<input type="password" placeholder="Password" id="password" class="form-control" name="password" required>
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
</div>
<div class="form-group mb-3">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Recuerdame
</label>
</div>
</div>
<div class="d-grid mx-auto">
<button type="submit" class="btn btn-dark btn-block">Enviar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
@endsection
Crear Vista para usuarios logados
En la misma carpeta en la que nos encontrábamos en el paso anterior ( resources / views ) creamos la vista para usuarios logados que llamaremos logados.blade.php
@extends('app')
@section('content')
<main class="login-form">
<div class="cotainer">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<h1>USUARIO LOGADO</h1>
</div>
</div>
</div>
</div>
</main>
@endsection
Ejecutar la Aplicación Laravel
Finalmente, necesitamos ejecutar la aplicación en Laravel, para ello vamos a la terminal en nuestro proyecto y ejecutamos:
php artisan serveUna vez ejecutamos el comando, si vamos a nuestro navegador y seguimos la siguiente url tendremos nuestra aplicación.
http://127.0.0.1:8000/ Podemos ver que si accedemos a /logados (sin estar logados)nos redirige al login con un mensaje de error.
Para logarnos simplemente deberemos poner el email y contraseña agregados con el seed (paso 5 de la base de datos)