🔒¿ Cómo usar JWT y ANGULAR?, ¿Qué es Jwt o json web token? tutorial actualizado
HTML-код
- Опубликовано: 18 апр 2021
- 👉🏼 Más contenido: • Refresh token con aute...
🔥 Angular desde cero🔥🔥 🔥 🔥 Node desde cero🔥🔥
En el video de hoy aprenderás de forma práctica a
🔒¿ Cómo usar JWT y ANGULAR?, ¿Qué es Jwt o json web token? tutorial 2021
Si estás empezando a programar, o si quieres fortalecer tus conocimientos te doy la bienvenida a este canal.
Aquí hablamos de angular desde cero, y node desde cero, también complementamos con cursos gratis mongo, de frontend de backend, problemas reales de un programador y soluciones que se aplican en el día a día.
Aquí vas a encontrar tutoriales de angular, tutoriales de node, juntos llevaremos a la práctica ejercicios reales de programación, así que venga y le cuento.
Si aún no estás suscrito y este contenido gusta 👉 / @leifermendez
Como usar JWT y ANGULAR tutorial 2021
🔒 Como usar JWT y ANGULAR, Que es Jwt o json web token tutorial 2021
👋 𝐂𝐔𝐑𝐒𝐎𝐒 𝐆𝐑𝐀𝐓𝐈𝐒
├ 0️⃣ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.github.io/#/
├ 1️⃣ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
├ 2️⃣ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
├ 3️⃣ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
└ 4️⃣ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
🤑 𝐂𝐔𝐑𝐒𝐎𝐒 𝐏𝐀𝐆𝐎𝐒
└ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ link.codigoencasa.com/PROMO-I...
🚀 𝐂𝐎𝐌𝐔𝐍𝐈𝐃𝐀𝐃 𝐘 𝐆𝐑𝐔𝐏𝐎𝐒 𝐃𝐄 𝐄𝐒𝐓𝐔𝐃𝐈𝐎
├ 𝙎𝙐𝙎𝘾𝙍𝙄𝘽𝙀𝙏𝙀 ⮕ / @leifermendez
├ 𝙈𝙄𝙀𝙈𝘽𝙍𝙊𝙎 ⮕ / @leifermendez
└ 𝙏𝙀𝙇𝙀𝙂𝙍𝘼𝙈 ⮕ t.me/leifermendez
🏆 𝐌Á𝐒 𝐂𝐎𝐍𝐓𝐄𝐍𝐈𝐃𝐎
├ 𝙎𝙋𝙊𝙏𝙄𝙁𝙔 ⮕ spoti.fi/3vnrvqg
├ 𝙔𝙊𝙐𝙏𝙐𝘽𝙀 ⮕ / leifermendez
├ 𝙄𝙉𝙎𝙏𝘼𝙂𝙍𝘼𝙈 ⮕ / leifermendez
├ 𝘽𝙇𝙊𝙂 ⮕ www.codigoencasa.com
└ 𝙁𝘼𝘾𝙀𝘽𝙊𝙊𝙆 ⮕ / leifermendez.dev
💰 𝐏𝐑𝐎𝐌𝐎𝐂𝐈𝐎𝐍𝐄𝐒 𝐘 𝐃𝐄𝐒𝐂𝐔𝐄𝐍𝐓𝐎𝐒
├ 𝙃𝙊𝙎𝙏𝙄𝙉𝙂 Aprovéchate del descuento) ⮕ bit.ly/hosting-descuento-leif...
├ 𝙑𝙋𝙉 (3 meses gratis de servicio) ⮕ bit.ly/vpn-leifermendez
└ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊 ⮕ link.codigoencasa.com/MAS-COSAS
🧠 𝐑𝐄𝐏𝐎𝐒𝐈𝐓𝐎𝐑𝐈𝐎 𝐘 𝐂𝐎𝐃𝐈𝐆𝐎𝐒
└ 𝙂𝙄𝙏𝙃𝙐𝘽 ⮕ github.com/leifermendez
✉️ 𝐂𝐎𝐍𝐓𝐀𝐂𝐓𝐎
└ 𝙈𝘼𝙄𝙇 ⮕ leifer.contacto@gmail.com
0:00 Intro
Si el contenido de esta lección te gusta recuerda suscribirte al canal, compartirlo, dejar una manito arriba y activar la campanita para que youtube te avise cuando subo un nuevo video.
#leifermendezAngular #leifermendezNode #leifermendezSocket
├ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.github.io/#/
├ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
├ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
├ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
├ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
└ 𝙉𝙂𝙍𝙓 𝙙𝙚𝙨𝙙𝙚 𝘾𝙀𝙍𝙊 ⮕ link.codigoencasa.com/NODE
Muy bien explicado, me ha quedado todo muy claro, muchas gracias!
facil y para toda la familia
Me sirvió de mucho este vídeo, mil gracias en serio, ERES UN CRACK!!!!!!!!!!!!!!!! saludos desde Perú.
Saludos Paolo y bienvenido a esta comunidad
Excelente video muchas gracias Dios te bendiga 😊😊😊
Gracias y bienvenido
Mas que claro!!! 100% recomendado
Genial
Primer video que veo de tu autoría y me ha gustado, se entiende muy bien
Hola Cristian gracias por tu comentario espero que te sea de utilidad igual si gustas pasarte por mi canal tengo mas video de Angular, Node etc y aqui aprendemos juntos :)
Buen video!, genial que estés escuchando la comunidad. Yo comente sobre el post que hiciste preguntando si seria bueno hacer este video y escuche justo lo que te propuse hablar y un poco mas +10 (Y)
Gracias por ver seguiré conectando más con la comunidad
Gracias muy bueno!!!!!!!!
Gracias muy bien explicado creo que más claro no lo pudistes explicar jejej me has salvado jja
Hola Cristian jeje qué bueno y gracias por formar parte de esta comunidad
De nada brooo la verdad me has salvado de unas jajaja
gracias
otra de la innumerables veces que me salvas la vida
Gusto tenerte de nuevo! gracias por tu comentario y cualquier cosa ya sabes aqui ando y ahora en instagram 🤣🤣
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Como plus, seria bueno que explicaras como refrescar un token, para mantener sesiones activas al menos que el usuario quiera desloguearse. Saludos, me encanta tu contenido
Gracias por tu comentario! lo tendre en cuenta para los proximo videos :)
@@LeiferMendez seria interesante saberlo
@@JoseLuis-sr4xw que cosa exactamente con gusto te explico
@@LeiferMendez resfrescar un Token y mantener la sesión
@@LeiferMendez lo explicaste?
gracias, lastima que no se ve todo el codigo inferior en la parte del interceptor
Hola Leifer muy fácil comprender lo que explicas. te quería consultar. Al igual que el local storage el cookie puede ser accedido por js. Qué opinas del cookie httponly , seria más seguro y no puede ser accedido con js. lo has utilizado?
Hola Leifer, buen video, consultas. Tu hablas de guardar en una cookie el token. La primera pregunta es, se puede proteger lo que está almacenado en las cookies para que no sea accesible por decirlo de alguna forma, haciendo click en inspeccionar??. La segunda pregunta es, donde manejas la renovación automática cuando expira el token ?. Mi backend lo tengo en django y uso el token que me genera django rest framework, lo guardo en ionic storage y también es accesible de forma facil. Saludos
que es mejor localstorage o una cokie?,tienes algún video tocando el tema de ataques XSS,metiendome al tema dicen que localstorage tiene esa contra
Hola, podría compartir el backend de este ejemplo porfa, muy buena la información
gracias por la explicación, pero agradeceria no presentar pantallas blancas por que mis ojos se alborotan :)
hola Leifer Mendez, buen video la creación de un proyecto front y back end seria excelente usando los JWT de forma local ...Saludos desde COLOMBIA
He visto varios videos sobre el tema pero no muy recientes, tengo ya el backend made in php laravel con seg JWT y eh consumido tales apis pero no de la forma mas eficiente usando guards pero me interesa ver mas al respecto ...Interceptors etc .... DE NUEVO SALUDOS DE COLOMBIA COMPADRE
Hola leifer, excelente video. La parte del backend la explicas en otro video?
Hola Fernando claro que si te comparto el video en el minuto que explico esto del lado del backend ruclips.net/video/xRXHQlqA3Ak/видео.html
Hola una consulta es necesario guardar el token en la base de datos? o ya no es necesario para temas de seguridad?
Maravilloso contenido :) en relación a los interceptor, como haces para diferenciar endpoint públicos y privados? 😳
Hola, tanny la verdad a nivel de fornt no lo hace técnicamente no pasa nada que un endpoint público reciba el encabezado con authorization así que es indiferente
Una consulta Leifer, veo que cuando realizas el login el json que te devuelve el backend es un data con la informacion del token y el usuario, mi duda es la informacion del usuario como ser: email, name, _id, role se la podria colocar en el payload del token, para asi obtenerla con angular, segun veo JWT puedes obtener la informacion del payload.
Ahora como se realiza la obtencion de informacion del payload con angular?
Hola, buen día! Pasate sí deseas por el canal de discord donde tengo una sección orientada a la asesoría técnica.
Te dejo el link a mi comunidad por si deseas unirte, allí podrás encontrar algún colega dispuesto a apoyarte.
link.codigoencasa.com/discord
¡Un saludo!
Buenas Leifer! te hago una consulta que no entiendo en general de las cookies, vi que en algunos sitios te piden permisos para poder usar la cookie, no lo pueden sin el consentimiento de uno. ahora yo necesito mostrar una alerta para utilizar las cookies para guardar el token? o es otro tipo de permisos y no lo debo pedir? Saludos!
Hola Herman eso sobre todo se usa cuando tú usas servicios de terceros cómo analítica, o cosas que tiene ver con la publicidad o rastreo en este caso solo es una cookie de funcionamiento
@@LeiferMendez Perfecto, o sea en caso de logins y demas se pueden usar sin problemas?, muchas gracias por contestar
Leifer una consulta, con tu video estoy implementando jwt, interceptores y guards en un proyecto y quede pegado en una cosa, como hago para llamar al interceptor, lo definí como lo hiciste en el proyecto pero me imagino que hay que implementarlo en alguna parte para que lo llame cuando haga solicitudes http y poder elegir cuando quiero o no llamar a ese interceptor. Donde se hace eso?, en el appModulo, en providers o como alguna dependencia?. Si me puedes ayudar con eso te lo agradeceria. Saludos.
Hola Fernando tienes razón en la descripción está el link al blog donde explico más igual te dejo el link www.codigoencasa.com/angular-y-jwt/ cualquier duda me comentas
@@LeiferMendez Que grande muchas gracias!!!
Muchas gracias por el video tengo una duda yo lo e realizado guardando el token en el localstorage!! Pero e visto que no muchos lo recomiendan está mal guardarlo ahí o es siemplemente cuestión de gustos
Yo personalmente uso cookie porque me facilita poder colocar tiempo de vida a la cookie pero ya lo que mejor se adapte a gi
Muy Interesante la verda en pocas líneas de código lograr crear el interceptór y me gustó mucho tu lógica
Muchas gracias por compartir tu conocimiento
@@ManuelHernandez-px5bg Gracias Manuel bueno estamos creando una comunidad y esperamos que los videos se compartan
@@LeiferMendez Yo también estoy usando cookies para compartir entre varios dominios, pero dicen que esto no es seguro y que será deprecado
una pregunta, y la propagacion del jwt entre microservicios es tarea de angular o es tarea del gateway que orquesta los microservicios?
Del Gateway
Grande!!! Gracias Alejandro.
Muy buen video, pero una mejora seria con roles broo
Claro que si hare un video de ROL con los guard!
@@LeiferMendez un usuarios con varios Roles.. para q lo tengas presente porfa. Ojalá uses el ngx-permissions
@@jhorsendavidachede3662 hola gracias por ver! ya son varios los que quieres un video de roles lo hare!
Brotha, pregunta...
porque en cookies ? Porque no en localStorage ?
???
mm mi pregunta era, y por que no con sesionStorage?
Normalmente uso cookie ya que le puedo establecer un tiempo de vida a la cookie
Estoy intentando hacer lo mismo con localStorage. En principio va todo bien, pero me acabo de dar cuenta que el token del interceptor está null. He hecho debug y he visto que el interceptor salta antes de hacer login y por tanto, al no haber iniciado sesión, tiene sentido que no haya token. ¿Cómo puedo hacer que el interceptor se ejecute después del login?
Muchas gracias! Un vídeo estupendo!
Hola Félix mm técnicamente el interceptor se va a ejecutar antes de la petición. Cual seria el caso de uso ? Querés proteger una ruta ? Si es así ruclips.net/video/nox__spS6k4/видео.html
@@LeiferMendez Buenas! Tengo la siguiente situación:
Dentro de una webapp que usa MEAN, en el back he especificado que debe incluir las cabeceras authorization: Bearer token (para efectivamente que un usuario vea solo sus propios datos).
Cuando estoy pasando al front los datos y aplico el interceptor (para "set" las cabeceras), este se ejecuta antes que el login, por lo que al no haberse iniciado sesión, no tenemos token ni datos de usuario. Consecuentemente la cabecera ni si quiera existe.
Para que te hagas una idea, haciendo debug en la línea de instanciación del token (en tu código línea 20), en pantalla está el formulario (al no haber iniciado sesión no hay token, sin embargo ya se ha instanciado en el código)
@@felixjimenezgonzalez9292 entiendo puede ser que la funcion que utilizes para obtener el valor de tu localstorage sea sincrona y no esta esperando hasta obtener si es el caso trata de hacerla promesa y retornar un promesa en el canactivate ya que tambien permite el retorno de promesas
en lugar de guardar el token en una cookie lo podria guardae en el local storage, no?
Hola José si, también puedes guardarlo en localstorage
Cual es la forma de proteger las rutas con guards en un proyecto real? Supongo que al validar simplemente que exista la cookie "token" no es seguro porque se puede crear esa cookie manualmente. Saludos y muchas gracias por el contenido
Hola! Buena pregunta se debe tener en cuenta que el backend es el encargado de validar si el token es válido y deolver la información si alguien coloca una cookie manualmemte puede entrar a la ruta efectivamente pero cuando en esa ruta haga las peticiones al backend con esa cookie fake el backend no va a retornar nada. Por otro lado sistemas más seguro lo que hacen es que aparte de verificar si tienen cooki en ese momento en el guard hacen una petición a un endpoint en el backend que se encargue de verificar si el token es válido y de lo contrario dejarlo pasar.
@@LeiferMendez a ok perfecto, yo lo que hice en un sistema fue que el Guard solo protegía de cierta manera el acceso a la ruta, pero para usuarios más "vivos" implementé un endpoint en el back que validada la sesión en base al token, esta validación la ejecutaba en el ngOnInit y si todo iba bien hacia la carga de data, si no cerraba sesión, además para cada petición entraba a un Middleware y validada la sesión y si todo iba bien ejecutaba el código del controlador, no se si ese enfoque está bien en cuanto a buenas prácticas o si se pudiera mejorar. Gracias
@@nythe3009 SII está buen yo recomendaría esa función que colocaste en el ngOninit del controlador llevarlo a una función dentro del propio guard y así evitas estar colocando esa función en el componente
@@LeiferMendez perfecto. Agradezco mucho tus respuestas, estoy buscando crecer con angular y llevar buenas prácticas y es de mucha ayuda saber la opinión de personas con mucha experiencia.
Tengo una duda, cómo haría después de autenticarme para mantener variables en sesion con Angular?
por medio de las cookies
Hola buen video, pero en el payload del login se ve el password
Correcto! ese es el punto el backend debe ser capaz de validar
Dado que los Guars se implementan en el lado del cliente, es seguro usar esa práctica?
MMM me refiero tu por el backend tienes que proteger todas las rutas que sean privadas. Siempre tienes que imaginar que alguien puede ver el la consola del navegador y poder ver las url a las cuales hacen peticiones
Se esperaban 0-1 argumentos, pero se obtuvieron 2
Esto en el .clone()
ni idea
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
Muy buena explicacion, tendras este ejemplo en algun repositorio para poder descargarlo. Saludos
En el blog encontraras párate el código para que lo puedas utilizar www.codigoencasa.com/angular-y-jwt/