Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Autenticación: Vue.js + JWT
Search
Ignacio Anaya
November 02, 2017
Programming
0
1.1k
Autenticación: Vue.js + JWT
Esta charla muestra como podemos implementar autenticacion JWT en SPA's desarrolladas con Vue.js
Ignacio Anaya
November 02, 2017
Tweet
Share
More Decks by Ignacio Anaya
See All by Ignacio Anaya
Security is not a feature‼️
ianaya89
2
470
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
130
Security is not a feature!
ianaya89
1
340
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
110
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
270
Vue.js, PWA & The Subway Dilemma
ianaya89
0
170
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
120
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
98
Other Decks in Programming
See All in Programming
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
iOSでQRコード生成奮闘記
ktcryomm
2
110
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
220
バッチを作らなきゃとなったときに考えること
irof
2
550
Introduction to kotlinx.rpc
arawn
0
770
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
Jakarta EE meets AI
ivargrimstad
0
510
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Producing Creativity
orderedlist
PRO
344
40k
Designing for humans not robots
tammielis
250
25k
A better future with KSS
kneath
238
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Gamification - CAS2011
davidbonilla
80
5.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A designer walks into a library…
pauljervisheath
205
24k
Transcript
Autenticación: Vue.js + JWT { Autenticación: Vue.js + JWT }
- @ianaya89 1
Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer &
Speaker > Embajador @Auth0 > Organizador @Vuenos_Aires { Autenticación: Vue.js + JWT } - @ianaya89 2
! Por Qué Token? — Sin Estado — Desacoplado —
Escalable { Autenticación: Vue.js + JWT } - @ianaya89 3
{ Autenticación: Vue.js + JWT } - @ianaya89 4
! Por Qué JWT? — Estandard — Seguro — Auto
Contenido — JSON ! { Autenticación: Vue.js + JWT } - @ianaya89 5
! JWT { Autenticación: Vue.js + JWT } - @ianaya89
6
! JWT ! Header { "alg": "HS256", "typ": "JWT" }
{ Autenticación: Vue.js + JWT } - @ianaya89 7
! JWT ! Payload { "sub": "1234567890", "name": "John Doe",
"admin": true, "iss": "https://api.com" } { Autenticación: Vue.js + JWT } - @ianaya89 8
! JWT ✍ Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload),
secret ) { Autenticación: Vue.js + JWT } - @ianaya89 9
! JWT ! Caso de Uso — SPA's — Serverless
— API's — Mobile — IoT { Autenticación: Vue.js + JWT } - @ianaya89 10
{ Autenticación: Vue.js + JWT } - @ianaya89 11
! Herramientias — Auth API — vue-router — trae (http
library) — localStorage { Autenticación: Vue.js + JWT } - @ianaya89 12
Auth Servidor = Seguridad Auth Cliente = UX { Autenticación:
Vue.js + JWT } - @ianaya89 13
! Auth API — Obtener JWT — Validar JWT —
node, express, jsonwebtoken, express-jwt { Autenticación: Vue.js + JWT } - @ianaya89 14
! vue-router — SPA's — 1 route = 1 component
{ Autenticación: Vue.js + JWT } - @ianaya89 15
! 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
! 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
! trae — Libreria HTTP — Fetch Wrapper (con esteroides)
— Similar axios — Usa Promises { Autenticación: Vue.js + JWT } - @ianaya89 18
! 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
! trae Middlewares trae.before((config) => { const token = '123456789'
config.headers['Authentication'] = token return config }) { Autenticación: Vue.js + JWT } - @ianaya89 20
! 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
! Demo — API — Web App { Autenticación: Vue.js
+ JWT } - @ianaya89 22
! Más! — jwt.io — Auth0 — jwt-handbook — trae
— vue-router { Autenticación: Vue.js + JWT } - @ianaya89 23
Preguntas? { Autenticación: Vue.js + JWT } - @ianaya89 24
! Gracias! @ianaya89 { Autenticación: Vue.js + JWT } -
@ianaya89 25