¿Cómo crear el login? Angular + Spring Boot + JWT Authentication
ฝัง
- เผยแพร่เมื่อ 11 ธ.ค. 2024
- En este video vamos a completar el login integrando Angular con Spring Boot. Abordaremos además, contenidos tales como Arquitectura Web, CORS, Interceptors en otros conceptos.
Videos sugeridos previo a este video:
¿Cómo crear el login? Spring Boot 3 + Spring Security 6 + JWT Authentication. • ¿Cómo crear el login? ...
¿Cómo crear el login? Angular. • Angular. ¿Cómo crear e...
Puedes descargar el código fuente de: github.com/iro...
¡Excelente aporte! Tienes una forma de explicar muy clara y comprensible. Saludos desde Bolivia. 😊
Que bueno ver de nuevo a la Profesora Ivava, siempre Excelente!!!
Gracias Gerardo por tus comentarios! Abrazo grande!
Que bueno que si seguiste subiendo videos
Muchas gracias por tus videos son muy didácticos y valiosos. Una pregunta, ¿no quedó pendiente el onDestroy en el Logon?
Me gusto mucho para cuando eñ curso de spring boot
Estoy escribiendo un guión sobre un curso básico de spring boot, espero terminarlo en unos meses y comenzar con la grabaciones. Abrazo
Excelente contenido, mil gracias
Gracias!! Abrazo!
Te lo agradezco un monton!! nuevo sub
Hola Ivana, muchas gracias por esta derie de videos, los he estado siguiendo, solo tengo uns duda, no se si en algun momento harás un video del manejador de exepciones, oara enviarle mensajes personalizados al frontend o en cualquier caso, no se si tengas algun luguar en donde pueda leer sobre el tema, muchisimas gracias y muy buen contenido. 😊
Hola @albertoulin2927! Si claro, tengo pensado hacer alguno de manejo de excepciones. Saludos,
Nota: a veces en angular 17 hay que hacer explicitamente la importacion de ngIF sino no va aparecer el formulario
Si usas angular 17 mejor usar el @if() de una y te ahorras ese problema
Acuerdo con @victorgutierrez5526. Además es más performante tengo entendido. Abrazo!
genial! habra algun tutorial en el que tengamos un login y manejo de sesiones? con un proyecto frontend separado del back (incluso con un bff de por medio), gracias!
Lo agendo!
tengo una duda, me podria explicar como pudiera proteger mis endpoints si en vez de utilizar el protocolo http utilizo ws(web socket)>
Que buen contenido Ivana.
aprovechando me gustaría saber como desplegar esto en un servidor, porque buscando por ahí encuentro para angular hacer un build -prod y tal, que me genera una carpeta con el contenido del proyecto, pero al colocarlo en un servidor web no sale nada, y eso solo es con la parte de angular, en cuanto a la API con Spring boot tengo problemas con el jar generado. No se si de casualidad tendrás un video con el despliegue de este login
Hace un tiempo cree un video que explica cómo realizar el despliegue. Te dejo el link del video: th-cam.com/video/ExtjIZIq1C0/w-d-xo.html
Estamos utilizando las versiones gratis por lo que, tiene sus limitaciones.
@@irojascorsico ¡muchas gracias , iré a verlo!
Hola Ivana, antes que todo muchas gracias por el contenido, nadie me haba ayudado a entender tan bien sobre todo esto de JWT 💟. Tengo una duda muy grande y es que necesito seguir implementando JWT y no se si hay partes de tus videos anteriores que sean necesarios además del anterior de Spring Security + JWT (es el que realice completo) y obvio el componente Login de angular genérico que podría crear yo, en tu caso de "My Portfolio", con esto me refiero a esas clases que tienes aquí por ejemplo: "UserRequest, UserDTO" (que no las encontré en video) y las autentificaciones que realizaste con (observables +http). si tienen importancia o solo están por ser parte de un FrontEnd anterior?.
De todas formas muchas gracias.👏
Hola Andree, vi tu mensaje más temprano pero no alcancé a responder. Ahora, respondiendo a tus preguntas:
1- En relación a las clases UserRequest y UserDTO, no explico en este video el paso a paso, pero te invito a mirar los siguientes videos para entender el código fuente:
- Spring Boot. ¿Cómo crear un API REST? #Backend: studio.th-cam.com/users/videowT-hIeYyxBg/edit (este video explica cómo realizar una api básica con vscode)
- SPRING BOOT + API REST + JPA + QUERY METHOD + DTO: th-cam.com/video/YoBFTSKNrD0/w-d-xo.html (este video explica algo de jpa, los request y response y dto. Si bien estoy trabajando con NetBeans, con las extensiones que explico en el video básico puedes trabajar de igual manera con VSCode).
2- En relación a observables y http. Esto lo explico detalladamente en el video Angular. ¿Cómo crear el Login?. components + routing + forms + services + observables + http: th-cam.com/video/jkdLRbrJj9M/w-d-xo.html
Espero haberte ayudado.
Abrazo!
@@irojascorsico les daré atención. Gracias Ivana
No habia para registrar tambien en el front?
excelente aporte! una consulta. Practicando con el codigo fuente queria que mostrara en el formulario los datos del usuario que se logea (ejemplo, si el que se logea es el user 1, que muestre sus datos. si es el user 2 que muestre el suyo etc.) para lograr eso, deberia obtener el id junto con el token en el AuthResponse del service?
Excato!
Me gustan mucho tus videos, aprendo bastante, y me llama la atención porque no usas @Autowire cuando llamas al repositorio o al servicio, no entiendo porque
Hola @AbigorLuna, muy buena pregunta!! Dado que la dependencia del servicio o repositorio es obligatoria, la inyección por medio del constructor utilizando la anotación @RequiredArgsConstructor de Lombok y private final es la más recomendada porque:
- las dependencias se vuelven inmutables después de la creación del objeto, lo que hace un código de más calidad ya que aumenta la seguridad de los subprocesos y reduce posibles efectos secundarios,
- facilita las pruebas unitarias
- declara explícitamente las dependencias requeridas.
Es importante agregar que, Spring Boot recomienda la inyección por constructor por sobre las inyecciones de dependencias por campos (a menos que éstas sean muchas).
Espero haber respondido a tu pregunta. Abrazo!
Quiero agradecerte por tus vídeos, aprendí muchísimo con ellos!! Ademas queria hacer una consulta ya que al tener varios usuarios y modificarlos desde el front, en la base de datos solo se modica el primer usuario que fue creado(sin importar el usuario con el cual inicie sesión), todo funciona correctamente pero tengo ese problema. Me podrías dar algun consejo para solucionarlo. Muchas gracias!!
Hola David, el ejemplo desde la perpectiva de frontend está pensado para trabajar sólo con un usuario pero, la API está preparada para trabajar con más de un usuario por lo que, deberías modificar sólo el frontend. Si observas (en frontend), estoy trabajando sólo con un userId (archivo de environment.ts). Para resolver, deberías tener por ejemplo una tabla o algún mecanismo para poder obtener al menos el id del usuario que deseas modificar. Luego obtendrás los datos que tiene actualmente ese usuario y podrás modificarlo. No debes olvidar enviar al backend el id, que corresponde al usuario que deseas modificar. Espero haberte ayudado. No dudes en escribir por más consultas. Saludos, Ivana
Hola, excelente video, tengo una consulta, por ejemplo, al crear mi tabla de post tengo el campo de autor y debo guardar el id del usuario que creo el post y al momento de eliminar, solo el autor de dicho post puede hacerlo, entonces como podria hacer eso con JWT? con express simplemente uso un middleware y lo obtengo facil, en spring boot como podria hacerlo? muchas gracias.
Hola Bianca, una forma para resolver esto (si entendí bien) es crear un nuevo filtro que extienda de OncePerRequestFilter para resolver la autorización y luego, agregar dicho filtro a la cola de filtros (SecurityFilterChain).
Abrazo,
Ivana
Qué super video! Muchas gracias, se aprende mucho de tu forma tan clara de explicar :)
Yo tengo la duda de si la petición para solicitar los datos del usuario se debe hacer en el constructor o en el onInit #esDuda.
Felicidades por tu enorme trabajo!
Hola. Tengo entendido que lo puedes hacer en ambos lados. El onInit se ejecuta al iniciar la app al igual que el constructor.
Hola @hectorge753, esa es una muy buena pregunta!! En Angular, la elección de dónde solicitar a los datos del usuario dependerá de las necesidades específicas de la aplicación que estés construyendo. Sin embargo, se recomienda utilizar el constructor para la inyección de dependencias y el método onInit para la lógica de inicialización del componente como por ej. solicitar los datos del usuario dado que, este método se llama luego de construirse el componente lo que permite aprovechar las dependencias para cargar los datos del usuario. Se recomienda mantener el constructor lo más simple posible dado que podría realentizar la creación del mismo. Abrazo!
mucha gracias
Muchas gracias!!
muy bueno!
Gracias!
Holaa, cuando hago el login me devuelve el token pero en la terminal me aparece este error:
Cache miss for REQUEST dispatch to '/auth/login' (previous null). Performing MatchableHandlerMapping lookup. This is logged once only at WARN level, and every time at TRACE.
Como se puede solucionar, ya que si trato de hacer algun operacion que necesita autenticacion me saca un 403
Hola @ThelastG4mer, lograste resolver? Da la impresión que la aplicación no levantó.
Abrazo!
Como va? Es posible que la parte de los interceptors sea distinta en angular 17? Porque estoy viendo que a la hora de enviar el token a la api, llega vacío y me dí cuenta que nunca entra al interceptor
Si claro, porque ahora no tienes el app.module.ts. Debes configurar (si no me equivoco) el provider en el app.config.ts.
Abrazo!
Hola, hasta donde yo se es mala practica hacer llamadas a una api en el constructor, deberían ser hechas en el ngOnInit de la clase.
@daviyisu Acuerdo contigo! Por eso siempre son necesarias las code review 🙂.
Te animas a explicar al resto porque es una mala práctica?
@@irojascorsico Pues si no me equivoco es porque se usan para cosas distintas, el constructor sirve para inicializar parámetros que son necesarios para la misma creación del propio componente como inyectar servicios y el ngOnInit que ya es parte del ciclo de vida de un componente de angular, se usa y se ejecuta cuando el servicio ya esta creado y se quieren inicializar parametros que necesitan que el componente este construido
Una pregunta. No suelo usar GitHub, por lo que necesito instrucciones detalladas. Cómo puedo correr el programa desde Visual Studio Code? Repito, necesito instrucciones detalladas.
usa spring boot ide
Hola @arkhamsk7145. Te dejo un link con un paso a paso que escribí rapidamente para que puedas ejecutar la aplicación. drive.google.com/file/d/16_eHn4kgykmbSDPscNg8Y3lNVgTJX0gI/view?usp=sharing
No dudes en escribir si hay algún paso que no puedas ejecutar.
Saludos,
Ivana
Hola Ivana, resulta que cuando llamo a un endpoint desde el front y mando el token, me sale error cors, sabes como arreglarlo desde spring boot?
Hola @jeancomontoya8715, pudiste resolver?.
Muy buen tutorial, solo una duda me marca error en la consola "ERROR ReferenceError: sessionStorage is not defined" como podria solucionarlo
Fijate si en las herramientas de desarrollador que si este creada la variable, sino mira la parte del código que se encarga de instanciarla
@@jamessanchez2583 si me lo crea la variable en el sessionStorage
Pudiste resolver?
Donde puedo conseguir la base de datos ? o el script sql para crearla
Hola @ManuelLopez-rc5yx, sólo tienes que crear una base de datos en blanco, modificar las configuraciones a la base de datos que creaste y levantar el server. Podrás ver que se crean las tablas de manera automática.
Saludos
Holaa!! Disculpa, estoy empleando todo lo que guiaste en el video de spring boot para hacer mi login, pero quiero hacerlo con react.js, algun consejo que me puedas dar?:D
Hola @wwlover21, no tengo experiencia en react.js (materia pendiente para mí :P) pero estimo que podrías conectar tu frontend utilizando la API Fetch. Saludos, Ivana
vas a hacer alguna aplicación con webflux???
Agendo en los pendientes.. Abrazo!
microservicios con eureka seria genial
Si, voy a agendar.. :)
Me gustan mucho tus videos me ayudaron
Pero tengo inconveniente ya que no estoy usando Angular, estoy usando el CDN de Vue 2, junto a Springboot con MVC y Thymeleaft, no logro hacer la redireccion de mis página con mis Controllers u.u
¿Me podrías ayudar? No logro comprender como enviar mi Token para cambiar de vista.
Hola @thelinkdero. Por el momento no he trabajado con el CDN de Vue 2. Si alguien de la comunidad puede responder... bienvenido!!
Abrazo
Tienes algun curso en udemy?, excelente video, felicitaciones.
Por ahora no... quizás más adelante (uno de microservicios).
buenas estaba intentando adaptar este login a una applicacion de angular y al montar el backend al hacer las peticiones por postman tengo constantemente este error ( Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'application/json;charset=UTF-8' is not supported]) sabrias por que me esta ocurriendo?
Hola @rafacalderon3125, pudiste resover? Puede que el problema esté en el interceptor. Te dejo el link del código que fui explicando. github.com/irojascorsico/jwt-auth-login/blob/main/frontend/angular-login/src/app/services/auth/jwt-interceptor.service.ts
Deberías tener la configuración del Content-Type.
Abrazo