Angular Login Authentication - JWT Express Mysql
Este es el primer vídeo de la sección Angular Login Authentication, donde usaremos JWT para validar información y rutas desde el backend y frontend.
Si te gustó el vídeo por favor suscríbete y comenta algún tema que te gustaría ver a futuro en el canal.
Mi facebook personal: faceboook.com/fariid.davila.9/
Documentación oficial JWT: jwt.io/introduction/
Dale estrella a los repositorios:
github.com/StilDavila/ExpressJWT
github.com/StilDavila/Angular...
Algunos comandos usados en el vídeo:
npm install --save @auth0/angular-jwt
npm install --save @auth0/angular-jwt
0:00 Introducción
01:03 ¿Qué es login authentication con JWT?
05:00 Servidor de express y mysql
31:57 Creacion de proyecto Angular
Пікірлер: 74
Estimado, analicé su vídeo por más de 5 horas e integré con el sistema que estoy desarrollando. Le agradezco mucho desde Chile y no deje de compartir su conocimiento, porque en mi caso este vídeo fue de gran pero gran ayuda para lo que estoy desarrollando. Muchas gracias.
Honestamente, tenia mucho temor meter JWT en mi proyecto de grado, queria irme por la facil y viendo tu video, me di cuenta lo facil que es usar JWT, pero es gracias a ti, vi varios videos y quedaba mas confundido, en 2023 este video la sigue rompiendo, muchas gracias, funciona al 10 de 10; me quedas debiendo el video de los frameworks que recomiendas para front-end angular, ya que soy de los que usa bootstrap para todo! mil gracias, un crack!
Que grande, gracias por el video! :D
Hermano eres una Crack. mis felicitaciones. me enseñaste mucho en este video. Ya me suscribí y seguiré aprendiendo todo lo que pueda de ti. Eres un excelente profesor. y desarrollador, Felicitaciones de verdad. 👏👏👏👏👏👏👏👏👏
Mil gracias Maestro.
tuve que volver al pasado para hacer algo como esto gracias.
Muchas gracias por el curso y dar luz sobre el uso de los tokens en bakend y frontend, me ha servido de mucho, saludos
Excelente Vídeo. De lo mejor que he visto. Es aplicable directamente. Muchas Gracias!
Excelente video! Super bien detallado. Gracias.
Me sirvió mucho, agradezco el tutorial, muy bien explicado.
excelente video, muy bien explicado. me ayudó mucho en mis estudios. excelente
Todo super explicado , excelente
muy bien explicado , me sirvio mucho gracias
Hola!! muchas gracias!! que video tan completo
excelente video, muy bien explicado. Saludos. Nota: Ojala pudieramos ver algo de pruebas unitarias con Jest para Angular
Muy buen aporte..Gracias
Muchas gracias!, tremendo video!
Excelente vìdeo Visto en 26/08/2022
Excelente tutorial... Funcionó excelente
Excelente aporte , gracias ,
Excelente explicación. Like + Suscrito + stars en los repos 👍
Gracias, si consigo un trabajo es gracias a este video :v
@aldobauvel
2 жыл бұрын
consegiste?
muy buen video
Muy buen video, me gustaria saber si tiene algun video de registros, como tipo CRUD en Angular?
Muchas gracias por compartir. 20:58 Creo que no es buena idea enviar todos los datos de autenticación para formar la firma del token (ya que la variable data está conteniendo la contraseña y no debería enviarse ni siquiera aunque estuviera encriptada y tampoco debería mandarse el correo)
para tipar user tendria que crear un models en donde encapsule el objeto? ayuda por favor
Gracias Crack.
@davidvillarreal5256
2 жыл бұрын
Hola bro, una duda, cuando trato de obtener token del local storage me genera error en la línea this.jwtHelper.isTokenExpired(token) subraya token diciendo que no se puede un valor null. sabes la solución?
Stil, gracias por compartir tus conocimientos, podrías explicar como después de un login te muestre el menú, gracias
@joelant03
Жыл бұрын
Si lo hace en el minuto 57:41
que pasa si modifico el token añadiendo que soy admin en role, no seria una falla de seguridad ingresar el rol en el jwt?
Buena tarde, todo me sale bien, ahora quiero dejar mi api en el hosting, como lo hago?. Muchas gracias.
Excelente. Necesito saber como expirar el token, luego cierra el logout automático en 15 minutos? Cómo?
Hola que versión de Angular usaste ?
Amigo, como puedo controlar que componentes puede o no ver un usuario especifico?
PREGUNTA SI AGREGO DIGAMOS SI PONGO UN TOKEN CON UNA FIRMA LA LIBRERIA QUE PUSISTE LA DETECTA COMO NO VALIDO ? ES QUE DIGAMOS QUE QUIERO QUE SI PONGO UN TOKEN ESCRITO A MANO DIGAMOS EN EL LOCAL STORAGE ESTE ME LO DETECTE COMO UN TOKEN NO VALIDO O BUENO NO SE COMO PODRIA HACER ESO ?? POR CIERTO ESTOY USANDO UN API CON REFRESH TOKEN MUCHAS GRACIAS DE ANTEMANO
Estoy teniendo um error en la variable res no lo reconece como lo puedo resolver
me gusto mucho suerte, Express con TS funciona ?
@KevinDavilaDev
3 жыл бұрын
Hola, por defecto sólo funciona con js. Podrías utilizar ts pero necesitas una configuración específica a nivel del proyecto. Puedes revisar este artículo javifont.medium.com/c%C3%B3mo-y-por-qu%C3%A9-deber%C3%ADas-usar-typescript-con-node-y-express-14fc9c1d82eb donde hacen un proyecto sencillo con Express y TS. Quizá esté subiendo un vídeo donde hagamos el mismo servidor del vídeo pero usando TS :)
haga mas videos !
Hola, alguien mas tiene problemas en el role.guards con la linea: const { userName, roleId } = decode(token); "La propiedad 'roleId' no existe en el tipo '{}'.ts(2339)" , si lo resolvieron me comentan por favor
@juanfernandohurtadoguzman8980
Жыл бұрын
hola lo encontré, tarde pero lo hice
@Kevin Davila , gracias por el aporte esta genial. Solo tengo una duda, al obtener el token y ponerlo en cualquier visor de token en linea, este me permite ver los datos que van encriptados, a que se debe esto, en teoria si no conoce el *secretOrPrivateKey* no deberia ser posible decodificarlo, alguien tiene alguna idea?
@isaacorregor
Жыл бұрын
el data de un token es siempre visible y desencriptable, por eso no debes poner informacion sensible en el, lo que protege y realiza la validacion del token es la firma, la que si esta encriptada con la palabra clave que tu eliges ....
No me reconoce username, ni roleId, a alguien le pasa igual ? const { userName, roleId } = decode(token);
@1976off
Жыл бұрын
A mi también
@juanfernandohurtadoguzman8980
Жыл бұрын
@@1976off tengo la solución
@juanfernandohurtadoguzman8980
Жыл бұрын
la solución era tipar las constantes: '* *' es lo añadido con referencia a la línea const token*: any* = localStorage.getItem('token'); const { username, rol }*: any *= decode(token);
Genial bro ... como puedo ocultar los que no tienen permiso de admin?
@141Brayan
Жыл бұрын
X2
me esta marcando n error en esta línea podrian ayudarme const {userName, roleId} = decode(token); marca el siguiente Error: src/app/guards/role.guard.ts:23:12 - error TS2339: Property 'userName' does not exist on type '{}'.mensaje de antemano gracias por su ayuda.
@joelgarciar
3 жыл бұрын
No se si lo lograste resolver, pero yo lo resolvi asi. const expectedRole = route.data.expectedRole; const token = localStorage.getItem('token'); let decodetoken:any = {}; decodetoken = decode(token); console.log(decodetoken.username);
@alejandroguarin3743
2 жыл бұрын
@@joelgarciar Super me funciono gracias
@fabiolagarcia5130
Жыл бұрын
@@joelgarciar Muchas gracias, me funcionó!!!
@aaronmejia5375
Жыл бұрын
@@joelgarciar Muchas gracias, justo estaba batallando también con ese error!
No pero porque localstorage para el Token????? porque no usa lo correcto que es una variable de SESION o COOKIE ?????????????
@hernanvilar1960
2 жыл бұрын
Como se guardaria en una cookies tienes idea? tengo el token desde un back pero no se como guardarlo en el front y luego obtenerlo para reenviarlo al back.
@arielzarate3643
2 жыл бұрын
no amigo eso se hacia antes .. ahora con jsonwebtoken se lo guarda en el localStorageo el sessionStorage depende de tu preferencias y del sistema , si es banco obviamente sera en el sessionstorage para que se loguee nuevamnete por seguirdad , pero si es una red social es mejor en el localStorage con un ExpiresIn:60x60x24
Para cerrar sesión y destruir el token
@soyungnomofeo
2 жыл бұрын
me uno a la pregunta +1
@aldobauvel
2 жыл бұрын
alguna solucion?
@Benjaskeight
Жыл бұрын
@@aldobauvel pudiste?
@141Brayan
Жыл бұрын
Yo solucioné eso borrando el local storage con un boton que llama una función Botón que llama una función Salir Función utilizada para eliminar un item del local storage y posterior recargo la página logOut() { localStorage.removeItem('token'); window.location.reload(); }
@RicardoLunaSantos
Жыл бұрын
@@141Brayan gracias
No se ve nada.ni se explica bien lo que haces los códigos no son legibles
Excelente vídeo, una duda, cuando trato de obtener token del local storage me genera error en la línea this.jwtHelper.isTokenExpired(token) subraya token diciendo que no se puede un valor null. Alguien sabe la solución?
@lbdt964
2 жыл бұрын
tuve el mismo error, en return false reemplace por: return token != null && !this.jwtHelper.isTokenExpired(token); ,espero te sirva tambien
@neodohko88
2 жыл бұрын
@@lbdt964 amiga donde puso eso que le soluciono la vida ?
@jacobtheboy_oficial7395
2 жыл бұрын
Tambien tengo el mismo error ayuden :(
@christianquispehumpiri3965
Жыл бұрын
@@lbdt964 me podrias ayudar porfa tambien tengo el mismo error
@jacobtheboy_oficial7395
Жыл бұрын
@Daniel Valerio Broncano Eso no sirvió brother, el comentario de Daiana G si sirvió