Aprende a crear tu propio sistema de autenticación para Symfony 4 desde cero. En esta parte, aprenderás a crear un formulario de registro para tus usuarios desde cero.

Cómo implementar tu propio sistema de autenticación de usuario en Symfony 4.3: Parte 2 (Crear un formulario de registro de usuario)

En nuestro artículo anterior, explicamos lo fácil que era crear su propia entidad de usuario desde cero con sus propios campos. Estructuralmente, esa fue la parte más importante para implementar su propio sistema de usuario, ahora necesitamos implementar una forma simple en la que el usuario puede simplemente registrarse en el sitio web. En esta parte, le explicaremos cómo implementar fácilmente un formulario de registro de usuario utilizando la entidad Usuario creada en la primera parte de esta serie.

1. Crear RegistrationFormType

Como primer paso, nuestro formulario se creará utilizando el componente Symfony Fomrs. Cree un nuevo tipo de formulario RegistrationFormType, es decir, con el siguiente contenido en el /app/src/Form/ directorio de su aplicación:

<?php

// app/src/Form/RegistrationFormType.php
namespace App\Form;

use App\Entity\User;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\RepeatedType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Validator\Constraints\NotBlank;
use Symfony\Component\Validator\Constraints\Length;
use Symfony\Component\Validator\Constraints\IsTrue;

class RegistrationFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('firstName')
            ->add('lastName')
            ->add('email')
            ->add('plainPassword', RepeatedType::class, [
                'type' => PasswordType::class,
                'invalid_message' => 'The password fields must match.',
                'required' => true,
                'first_options'  => ['label' => 'Password'],
                'second_options' => ['label' => 'Repeat Password'],
                // instead of being set onto the object directly,
                // this is read and encoded in the controller
                'mapped' => false,
                'constraints' => [
                    new NotBlank([
                        'message' => 'Please enter a password',
                    ]),
                    new Length([
                        'min' => 6,
                        'minMessage' => 'Your password should be at least {{ limit }} characters',
                        // longitud máxima permitida por Symfony por razones de seguridad
                        'max' => 4096,
                    ]),
                ],
            ])
            ->add('agreeTerms', CheckboxType::class, [
                'mapped' => false,
                'constraints' => [
                    new IsTrue([
                        'message' => 'You should agree to our terms.',
                    ]),
                ],
            ])
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => User::class,
        ]);
    }
}

En el configureOptionsmétodo de la clase, vincularemos la clase User (creada en la primera parte de la serie) como la data_classdel formulario. El formulario tendrá 5 campos, 4 de ellos solicitando al usuario información básica para registrar un nuevo usuario, el nombre y apellido, el correo electrónico y la contraseña.

2. Crear RegistrationController

Como paso de segundos, tendremos que disponer de alguna ruta al usuario, donde pueda registrarse. Expondremos un controlador específicamente para el registro y estará disponible en mywebsite.com/register. En este controlador, tendremos una única acción que renderizará la vista de registro y procesará también a través de un condicional si el formulario ha sido enviado con la información requerida para registrar al usuario. El método de registro recibirá a través de Dependency Injection la UserPasswordEncoderInterface, que se utilizará para codificar la contraseña de texto sin formato enviada a través del formulario:

<?php

// app/src/Controller/RegistrationController.php
namespace App\Controller;

use App\Entity\User;
use App\Form\RegistrationFormType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;

class RegistrationController extends AbstractController
{
    /**
     * @Route("/register", name="app_register")
     */
    public function register(Request $request, UserPasswordEncoderInterface $passwordEncoder): Response
    {
        $user = new User();
        $form = $this->createForm(RegistrationFormType::class, $user);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            // codificar la contraseña simple
            $user->setPassword(
                $passwordEncoder->encodePassword(
                    $user,
                    $form->get('plainPassword')->getData()
                )
            );

            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->persist($user);
            $entityManager->flush();

            
            // haga cualquier otra cosa que necesite aquí, como enviar un correo electrónico
            // en este ejemplo, solo estamos redirigiendo a la página de inicio
            return $this->redirectToRoute('app_index');
        }

        return $this->render('registration/register.html.twig', [
            'registrationForm' => $form->createView(),
        ]);
    }
}

La acción genera una vista de Twig con el formulario y la lógica mencionada ocurrirá cuando se envíe el formulario.

3. Crear vista de registro en Twig

Finalmente, solo necesitamos crear la vista que enviamos como respuesta en el controlador. Esta vista, creada en el directorio /app/templates/registration/, es decir register.html.twig y tendrá el siguiente contenido:

{# /app/templates/registration/register.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Register{% endblock %}

{% block body %}
    <h1>Register</h1>

    {# Si hay algún error en el formulario, muéstrelo #}
    {% set formErrors = registrationForm.vars.errors.form.getErrors(true) %}
    {% if formErrors|length %}
        <div class="alert alert-danger">
            <ul>
                {% for error in formErrors %}
                    <li>{{ error.message }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

    {# Render the Form #}
    {{ form_start(registrationForm) }}
        {{ form_row(registrationForm.firstName) }}
        {{ form_row(registrationForm.lastName) }}
        {{ form_row(registrationForm.email) }}
        {{ form_row(registrationForm.plainPassword) }}
        {{ form_row(registrationForm.agreeTerms) }}

        <button class="btn">Register</button>
    {{ form_end(registrationForm) }}
{% endblock %}

Inicialmente, comprobaremos si hay algún error almacenado en el formulario, para que el usuario sepa si la información proporcionada es suficiente para registrarse. Luego, renderizaremos el formulario manualmente usando las etiquetas form_startform_rowform_end.

4. Formulario de prueba

Por último, puede probar la ruta de registro en su sitio web y completar el formulario:

Registration Form Symfony 4.3

El usuario podrá registrarse fácilmente.

LEA TODAS LAS PARTES DEL TUTORIAL "CÓMO IMPLEMENTAR SU PROPIO SISTEMA DE AUTENTICACIÓN DE USUARIO EN SYMFONY 4.3"

ENLACES DE INTERÉS PARA ESTE TUTORIAL

Happy coding !


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores