Autenticación: Vue.js + JWT

Slide 1

Slide 1 text

Autenticación: Vue.js + JWT { Autenticación: Vue.js + JWT } - @ianaya89 1

Slide 2

Slide 2 text

Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer & Speaker > Embajador @Auth0 > Organizador @Vuenos_Aires { Autenticación: Vue.js + JWT } - @ianaya89 2

Slide 3

Slide 3 text

! Por Qué Token? — Sin Estado — Desacoplado — Escalable { Autenticación: Vue.js + JWT } - @ianaya89 3

Slide 4

Slide 4 text

{ Autenticación: Vue.js + JWT } - @ianaya89 4

Slide 5

Slide 5 text

! Por Qué JWT? — Estandard — Seguro — Auto Contenido — JSON ! { Autenticación: Vue.js + JWT } - @ianaya89 5

Slide 6

Slide 6 text

! JWT { Autenticación: Vue.js + JWT } - @ianaya89 6

Slide 7

Slide 7 text

! JWT ! Header { "alg": "HS256", "typ": "JWT" } { Autenticación: Vue.js + JWT } - @ianaya89 7

Slide 8

Slide 8 text

! JWT ! Payload { "sub": "1234567890", "name": "John Doe", "admin": true, "iss": "https://api.com" } { Autenticación: Vue.js + JWT } - @ianaya89 8

Slide 9

Slide 9 text

! JWT ✍ Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret ) { Autenticación: Vue.js + JWT } - @ianaya89 9

Slide 10

Slide 10 text

! JWT ! Caso de Uso — SPA's — Serverless — API's — Mobile — IoT { Autenticación: Vue.js + JWT } - @ianaya89 10

Slide 11

Slide 11 text

{ Autenticación: Vue.js + JWT } - @ianaya89 11

Slide 12

Slide 12 text

! Herramientias — Auth API — vue-router — trae (http library) — localStorage { Autenticación: Vue.js + JWT } - @ianaya89 12

Slide 13

Slide 13 text

Auth Servidor = Seguridad Auth Cliente = UX { Autenticación: Vue.js + JWT } - @ianaya89 13

Slide 14

Slide 14 text

! Auth API — Obtener JWT — Validar JWT — node, express, jsonwebtoken, express-jwt { Autenticación: Vue.js + JWT } - @ianaya89 14

Slide 15

Slide 15 text

! vue-router — SPA's — 1 route = 1 component { Autenticación: Vue.js + JWT } - @ianaya89 15

Slide 16

Slide 16 text

! 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

Slide 17

Slide 17 text

! 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

Slide 18

Slide 18 text

! trae — Libreria HTTP — Fetch Wrapper (con esteroides) — Similar axios — Usa Promises { Autenticación: Vue.js + JWT } - @ianaya89 18

Slide 19

Slide 19 text

! 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

Slide 20

Slide 20 text

! trae Middlewares trae.before((config) => { const token = '123456789' config.headers['Authentication'] = token return config }) { Autenticación: Vue.js + JWT } - @ianaya89 20

Slide 21

Slide 21 text

! 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

Slide 22

Slide 22 text

! Demo — API — Web App { Autenticación: Vue.js + JWT } - @ianaya89 22

Slide 23

Slide 23 text

! Más! — jwt.io — Auth0 — jwt-handbook — trae — vue-router { Autenticación: Vue.js + JWT } - @ianaya89 23