Autenticación: Vue.js + JWT

Esta charla muestra como podemos implementar autenticacion JWT en SPA's desarrolladas con Vue.js

Transcript

1. Autenticación: Vue.js + JWT { Autenticación: Vue.js + JWT } - @ianaya89 1
2. Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer & Speaker > Embajador @Auth0 > Organizador @Vuenos_Aires { Autenticación: Vue.js + JWT } - @ianaya89 2
3. ! Por Qué Token? — Sin Estado — Desacoplado — Escalable { Autenticación: Vue.js + JWT } - @ianaya89 3
4. { Autenticación: Vue.js + JWT } - @ianaya89 4
5. ! Por Qué JWT? — Estandard — Seguro — Auto Contenido — JSON ! { Autenticación: Vue.js + JWT } - @ianaya89 5
6. ! JWT { Autenticación: Vue.js + JWT } - @ianaya89 6
7. ! JWT ! Header { "alg": "HS256", "typ": "JWT" } { Autenticación: Vue.js + JWT } - @ianaya89 7
8. ! JWT ! Payload { "sub": "1234567890", "name": "John Doe", "admin": true, "iss": "https://api.com" } { Autenticación: Vue.js + JWT } - @ianaya89 8
9. ! JWT ✍ Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret ) { Autenticación: Vue.js + JWT } - @ianaya89 9
10. ! JWT ! Caso de Uso — SPA's — Serverless — API's — Mobile — IoT { Autenticación: Vue.js + JWT } - @ianaya89 10
11. { Autenticación: Vue.js + JWT } - @ianaya89 11
12. ! Herramientias — Auth API — vue-router — trae (http library) — localStorage { Autenticación: Vue.js + JWT } - @ianaya89 12
13. Auth Servidor = Seguridad Auth Cliente = UX { Autenticación: Vue.js + JWT } - @ianaya89 13
14. ! Auth API — Obtener JWT — Validar JWT — node, express, jsonwebtoken, express-jwt { Autenticación: Vue.js + JWT } - @ianaya89 14
15. ! vue-router — SPA's — 1 route = 1 component { Autenticación: Vue.js + JWT } - @ianaya89 15
16. ! vue-router Routes Meta const router = new Router({ routes: [{ path: '/', component: Home }, { path: '/login', component: Login, meta: { isPublic: true } }] }) { Autenticación: Vue.js + JWT } - @ianaya89 16
17. ! vue-router Guardian Navs router.beforeEach((to, from, next) => { // resolver si el usuario esta logueado if (!to.meta.isPublic && !isAuthenticated()) { return next('login') } next() }) { Autenticación: Vue.js + JWT } - @ianaya89 17
18. ! trae — Libreria HTTP — Fetch Wrapper (con esteroides) — Similar axios — Usa Promises { Autenticación: Vue.js + JWT } - @ianaya89 18
19. ! trae Ejemplo import trae from 'trae' trae.baseUrl('http://api:com') trae.get('/', {}) .then(res => console.log(res.data)) .catch(err => console.log('[ERROR]', err)) { Autenticación: Vue.js + JWT } - @ianaya89 19
20. ! trae Middlewares trae.before((config) => { const token = '123456789' config.headers['Authentication'] = token return config }) { Autenticación: Vue.js + JWT } - @ianaya89 20
21. ! localStorage trae.post('/auth', { email, password }) .then(res => { localStorage.token = res.data localStorage.user = atob(res.data.split('.')[1]) }) .catch(err => console.log('[ERROR]', err)) { Autenticación: Vue.js + JWT } - @ianaya89 21
22. ! Demo — API — Web App { Autenticación: Vue.js + JWT } - @ianaya89 22
23. ! Más! — jwt.io — Auth0 — jwt-handbook — trae — vue-router { Autenticación: Vue.js + JWT } - @ianaya89 23
24. Preguntas? { Autenticación: Vue.js + JWT } - @ianaya89 24
25. ! Gracias! @ianaya89 { Autenticación: Vue.js + JWT } - @ianaya89 25