> Symfony 5 > Symfony 5 Seguridad: Autenticadores
Login to bookmark this video
Buy Access to Course
04.

Construir un formulario de inicio de sesión

|

Share this awesome video!

|

Hay muchas maneras de permitir que tus usuarios se conecten... una de ellas es un formulario de conexión que carga a los usuarios desde la base de datos. Eso es lo que vamos a construir primero.

La forma más sencilla de construir un sistema de formulario de acceso es ejecutando un comandosymfony console make:auth. Eso generará todo lo que necesitas. Pero como queremos aprender realmente la seguridad, vamos a hacerlo paso a paso... sobre todo a mano.

Antes de que empecemos a pensar en la autenticación del usuario, primero tenemos que construir una página de inicio de sesión, que... si lo piensas... ¡no tiene nada que ver con la seguridad! Es sólo una ruta, un controlador y una plantilla normales de Symfony que renderizan un formulario. Vamos a hacer un poco de trampa para hacer esto. Ejecuta:

symfony console make:controller

Respuesta SecurityController. ¡Genial! Ve a abrir la nueva clase:src/Controller/SecurityController.php:

21 lines | src/Controller/SecurityController.php
// ... lines 1 - 2
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class SecurityController extends AbstractController
{
/**
* @Route("/security", name="security")
*/
public function index(): Response
{
return $this->render('security/index.html.twig', [
'controller_name' => 'SecurityController',
]);
}
}

Aquí no hay nada demasiado sofisticado. Vamos a personalizarla para que sea una página de inicio de sesión: establece la URL como /login, llama a la ruta app_login y cambia el nombre del método a login():

19 lines | src/Controller/SecurityController.php
// ... lines 1 - 8
class SecurityController extends AbstractController
{
/**
* @Route("/login", name="app_login")
*/
public function login(): Response
{
// ... line 16
}
}

Para la plantilla, llámala security/login.html.twig... y no pases ninguna variable por ahora:

19 lines | src/Controller/SecurityController.php
// ... lines 1 - 8
class SecurityController extends AbstractController
{
/**
* @Route("/login", name="app_login")
*/
public function login(): Response
{
return $this->render('security/login.html.twig');
}
}

Abajo, en el directorio templates/, abre templates/security/... y cambia el nombre de la plantilla a login.html.twig:

21 lines | templates/security/login.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello SecurityController!{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
<h1>Hello {{ controller_name }}! ✅</h1>
This friendly message is coming from:
<ul>
<li>Your controller at <code><a href="{{ '/Users/weaverryan/Sites/knp/knpu-repos/symfony5/src/Controller/SecurityController.php'|file_link(0) }}">src/Controller/SecurityController.php</a></code></li>
<li>Your template at <code><a href="{{ '/Users/weaverryan/Sites/knp/knpu-repos/symfony5/templates/security/index.html.twig'|file_link(0) }}">templates/security/index.html.twig</a></code></li>
</ul>
</div>
{% endblock %}

Para empezar, voy a sustituir completamente esta plantilla y a pegar una nueva estructura: puedes copiarla del bloque de código de esta página:

31 lines | templates/security/login.html.twig
{% extends 'base.html.twig' %}
{% block title %}Log In!{% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="login-form bg-light mt-4 p-4">
<form method="post" class="row g-3">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<div class="col-12">
<label for="inputEmail">Email</label>
<input type="email" name="email" id="inputEmail" class="form-control" required autofocus>
</div>
<div class="col-12">
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
</div>
<div class="col-12">
<button class="btn btn-lg btn-primary float-end" type="submit">
Sign in
</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

Aquí no hay nada del otro mundo: extendemos base.html.twig, anulamos el bloque title... y tenemos un formulario que envía un POST de vuelta a /login. No tiene un atributo action, lo que significa que se envía de vuelta a esta misma URL. El formulario tiene dos campos -de entrada name="email" y de entrada name="password" - y un botón de envío... todo ello con clases de Bootstrap 5 para que tenga un buen aspecto.

Vamos a añadir un enlace a esta página desde base.html.twig. Busca el registro. Genial. Justo antes de esto, añade un enlace con {{ path('app_login') }}, que diga "Log In"... y dale algunas clases para que se vea bien:

46 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 14
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light px-1">
<div class="container-fluid">
// ... lines 18 - 26
<div class="collapse navbar-collapse" id="navbar-collapsable">
// ... lines 28 - 33
<a class="nav-link text-black-50" href="{{ path('app_login') }}">Log In</a>
<a href="#" class="btn btn-dark">Sign up</a>
</div>
</div>
</nav>
// ... lines 39 - 43
</body>
</html>

¡Vamos a comprobarlo! Actualiza la página de inicio... y haz clic en el enlace. ¡Hola página de inicio de sesión!

Y por supuesto, si rellenamos el formulario y lo enviamos... ¡no pasa absolutamente nada! Tiene sentido. Se envía de nuevo a /login... pero como todavía no tenemos ninguna lógica de procesamiento de formularios... la página simplemente se vuelve a presentar.

Así que lo siguiente: vamos a escribir ese código de procesamiento. Pero... ¡sorpresa! No vivirá en el controlador. Es hora de crear un autentificador y aprender todo sobre los cortafuegos de Symfony.