Imagen editada en canva.com
Un saludo amigos aquí vengo con la entrega #9 de este tutorial titulado "Crear un Blog paso a paso".
En la entrega anterior habíamos dejado la base de datos lista y nuestra configuración en el Framework Symfony para las conexiones con esta base de datos lista también.
¿Qué sigue? 🤔
Vamos a empezar a desarrollar nuestra zona privada del blog, es decir, las secciones privadas de mi blog a las que tengo acceso una vez que inicio sesión, y para ello necesitamos las siguientes interfaces: Un formulario para iniciar sesión con usuario y contraseña y otra para registrarse.
Cuando inicie sesión voy accederé a las secciones de mi Blog privadas que me permiten gestionarlo, y cuando inicie sesión otro usuario por el momento que no haga nada, puede seguir navegando por mi blog comúnmente solo que estará disponible la sesión para sí la necesito en caso de que quiera registrar una acción del usuario.
¿Cómo distingo entre un usuario y otro al dar acceso a la zona privada en Symfony?
Usaremos Roles, podríamos decir que todo aquel usuario que se registre tendrá el rol de visitante a menos que yo desde mi zona privada se lo cambie a "administrador" o lo que sea para permitirle el acceso a las zonas privadas de mi blog. Más o menos sería así, ya lo veremos en la práctica.
Antes de hacer la parte visual(Las plantillas) necesitaremos algunas cosas como una clase PHP especial en Symfony para tratar este tema de la seguridad.
La clase User en Symfony
Esta clase a ser una clase PHP que se utilizará por el framework para gestionar los usuarios, sus permisos y accesos, y estará representada en nuestra base de datos, la cual manejaremos con la ayuda de Doctrine.
¿Cómo crear la clase User en Symfony?
La clase se podría hacer manualmente, pero gracias a Symfony y sus componentes ya tenemos las herramientas para automatizar el proceso, así que haremos uso de MakerBundle un paquete que nos ayuda con eso y ya viene instalado en la versión estándar usando el superpack "webapp", el cual usamos para este tutorial.
Para crear la clase User que necesitamos para nuestro sistema de autentificación y permisos usaremos el siguiente comando, en mi caso desde la terminal integrada de Visual estudio Code.
php bin/console make:user
El resultado de ejecutar este comando es el siguiente: Una serie de opciones que vas elijiendo en esta interfaz de la CLI:
php bin/console make:user
The name of the security user class (e.g. User) [User]:
> User
Do you want to store user data in the database (via Doctrine) (yes/no) [yes]:
> yes
Enter a property name that will be the unique "display" name for the user (e.g. email, username, uuid) [email]:
> email
Will this app need to hash/check user passwords? Choose No if passwords are not needed or will be checked/hashed by some other system (e.g. a single sign-on server).
Does this app need to hash/check user passwords? (yes/no) [yes]:
> yes
created: src/Entity/User.php
created: src/Repository/UserRepository.php
updated: src/Entity/User.php
updated: config/packages/security.yaml
¿Qué hace el comando php bin/console make:user en Symfony?
Crea la clase User, UserRepository y las configuraciones necesarias para trabajar con nuestros usuarios, en nuestro caso usando Doctrine y nuestra base de datos. Estas acciones se especifican una ves que el comando termina como podemos observar en la sección anterior donde clarifica que archivos se han creado y actualizado y en que directorio se encuentran.
¿Como representar nuestro modelo en la base de datos?
Hemos creado nuestra clase PHP User que se utilizará para la autorización de los usuarios, pero todavía no se ha representado en nuestra Base de Datos, por lo que necesitamos representar nuestra entidad(Así se le llaman a las clases modelos que normalmente representan nuestra base de datos y son gestionadas por Doctrine) en nuestra base de datos.
Para hacer esto necesitamos ejecutar dos comandos que son los siguientes:
php bin/console make:migration
php bin/console doctrine:migrations:migrate
¿Qué hace php bin/console make:migration?
Este comando se encarga de hacer una migración, una migración va a ser un archivo PHP en el directorio migrations que contiene los códigos Sql necesarios para las operaciones el base de datos.
¿Qué hace php bin/console doctrine:migrations:migrate?
Cuando ejecutamos este comando se ejecutan las migraciones que hayamos hecho anteriormente, reflejando de esta manera todos los cambios en la base de datos.
Lo que hemos hecho hasta ahora fue crear nuestra clase o entidad User, crear una migracion que contiene la creación de esta clase, y migrar hacia la base de datos nuestro modelo que en este momento solo incluye a esta clase User, como resultado tendremos en nuestra base de Datos una tabla que representa esta clase o entidad User.
Sí vamos a http://localhost/phpmyadmin/ y seleccionamos nuestra Base de Datos, ahora se vería de esta forma:
Tenemos ahora tres tablas como consecuencia, doctrine_migration_versions se encarga de ir registrando nuestras migraciones, messenger_messages está debido a que utilizamos el superpack "webapp" nos agregó un paquete que hizo que se generara esta tabla, pero que creo que no utilizaremos, por ahora dejémosla ahí, y por último nuestra tabla user que representa a nuestro modelo que en este momento solo tiene una clase llamada User.
¿Como hacer un formulario de inicio de sesión en Symfony?
Ya tenemos nuestra clase User y su representación en nuestra Base de Datos ya es hora de hacer nuestro formulario de inicio de sesión, para ello podemos usar otro comando y creará todo mágicamente 😅, este formulario es especial en el framework symfony, ya que tiene sus particularidades que lo diferencia de formularios comunes ya que hay que seguir ciertas pautas, el comando a continuación nos ayuda y crea todo por nosotros:
php bin/console make:security:form-login
Ejecutamos el comando anterior y dejamos por defecto todas las opciones que nos va dando presionando la tecla "intro".
El resultado de su ejecución será la creación de dos archivos: SecurityController y login.html.twig. La primera será la clase controladora y la segunda la plantilla donde se muestra nuestro formulario, ambas ubicadas en los directorios correspondientes para cada tipo de archivo(Visto anteriormente).
También se actualizó el archivo de configuración security.yaml con los cambios necesarios para la dinámica especial de este formulario.
Como resultado de todo esto tenemos un formulario listo para usar en el path /login debido a que nuestra controller SecurityController.php recién creada atiende a esta dirección como vemos en siguiente imagen:
Esta Controller se encargará de recibir las peticiones a http://blogpersonal.local/login y renderizar la plantilla con el formulario, luego cuando el usuario entra sus credenciales y envía digamos que symfony se encarga de verificar al usuario.
En caso de estar mal las credenciales se vuelve a renderizar el formulario con los errores y en caso de éxito redirigiremos al usuario a las secciones que queramos, ya sea la página de inicio o una sección privada.
Veamos el formulario que se nos creó en la plantilla login.html.twig para ello accedemos a la url en nuestro navegador que atiende la controller encargada de este formulario: http://blogpersonal.local/login
El navegador nos muestra este formulario evidenciando el contenido de nuestra plantilla login.html.twig que es renderizada por la controller SecurityController.php y que atiende a la ruta /login.
Este formulario listo para entrar nuestras credenciales que serán verificadas por symfony teniendo en cuenta los usuarios almacenados en nuestra base de datos gracias a la Entidad User que creamos y que manejamos con Doctrine.
Puede que noten que el formulario tiene ciertos estilos y esto se debe a que symfony en la plantilla del formulario utilizó para el mismo class de estilos de boostrap y como tenemos boostrap instalado entonces se estiliza el formulario, de no haber tenido boostrap instalado se huviera visto muy feo 😅.
¿Cómo generar manualmente una contraseña codificada en Symfony?
Hasta ahora no tenemos usuarios en nuestra Base de Datos así que tendremos que crear alguno para probar nuestro formulario. Para ello usaremos otro comando que nos genera una contraseña codificada, la cual usaremos para el usuario que vamos a crear en nuestra base de datos.
Resulta que Symfony codifica la contraseña y la almacena el la base de datos así codificado por temas de seguridad, así que el usuario que vallamos a insertar manualmente en nuestra base de datos deberá también tener está contraseña codificada de lo contrario cuando symfony comparara la contraseña que introduces en el formulario no coincidiría con la que está en la base de datos.
El formulario de inicio de sesión funcionaría así, introduces la contraseña, presionas enviar, symfony codifica la clave que acabas de introducir y verifica si coincide con la que está codificada en la Base de Datos. Vamos a ver como codificamos una palabra para guardarla en la Base de Datos junto con el usuario correspondiente para poderla usar como clave en formulario de inicio de sesión.
El comando es el siguiente:
php bin/console security:hash-password
Este comando nos pide que entremos la contraseña que luego usaremos para el usuario que queremos crear para probar nuestro formulario, entonces toma esa palabra y nos la devuelve codificada y ahora si podemos crear nuestro usuario en nuestra base de Datos con esta contraseña la cual Symfony podrá verificar.
Podría devolvernos algo así, para la palabra manzana se generaría la siguiente codificación: $2y$13$i/ETxtAaAF2cR2ppRGMMFuP0csSX8RurIvXKH4FiE1C1StH8hdijW y es lo que guardaremos en el campo de password del usuario en nuestra Base de Datos, pero en el formulario usaríamos "manzana" como contraseña.
¿Cómo crear un usuario en la Base de Datos usando phpmyadmin?
Nos dirigimos a nuestro administrador de Base de Datos http://localhost/phpmyadmin/ para luego seleccionar nuestra base de datos en el panel izquierdo, luego después de hacer esto en el panel derecho nos saldría nuestras tablas para la base de datos seleccionada.
Elegimos a la tabla user y ya estando dentro de esta tabla, pinchamos en el menú superior "insertar", acto seguido se nos mostrará un formulario con todos los campos que requiere esta tabla.
Los campos a rellenar son solo tres, email, roles, password ya que el primero id se genera automaticamente, Para el email usartemos un email válido, roles es un campo especial para el rol del usuario he influye en los permisos que quieras dar a cada usuario y es de tipo json `por ahora lo rellenaré con ["ROLE_ADMIN"] ya quel usuario que pretendo crear es el mío y para el campo password lo rellenaré con la contraseña codificada generada anteriormente y listo, damos en continuar y ya quedaría creado nuestro usuario.
Este es un proceso para poder registrar un usuario inicial, luego ya generariamos los usuarios desde nuestro propio blog o mediante un formulario de registro.
Provemos nuestro formulario, primero introduciremos unas credenciales incorrecta nos ubicamos en http://blogpersonal.local/login, rellenamos el formularios con datos que no correspondan y damos en enviar:
Listo nuestro formulario se validó y mostró un error ya que eran credenciales inválidas, Ahora volvamoslo a enviar pero con los datos correctos:
Nuestro formulario funciona a la perfección nos ha logueado y nos a redireccionado hasta la pagina de inicio ya que ese es el comportamiento por defecto. El la barra de depuración de Symfony ahora podemos ver que estamos logueados con el correo correspondiente.
De esta forma tenemos un formulario que permite iniciar una sesión en nuestra aplicación Symfony con un usuario y una contraseña.
Esto ha sido todo por hoy, espero que le resulte útil mi contenido y pueda ayudar a alguien que lo necesite. Cualquier duda o sugerencia, ponerla en los comentarios con gusto la leeré.
Referencias
Framework Symfony: Symfony.com
