Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
WTH is a JWT
A Quick Intro To Token Based Authentication
@joel__lord
#i?JS18
About Me
@joel__lord
joellord
Traditional
Applications
! Browser requests a
login page
Traditional
Applications
! Browser requests a
login page
Traditional
Applications
! Browser requests a
login page
Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
👍
Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
! It creates a session
and...
What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing creden...
What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing creden...
Token Based Auth !
OAuth
@joel__lord
CharmCityJS
Authentication Flows
Implicit Flow
@joel__lord
CharmCityJS
Authentication Flows
Implicit Flow
@joel__lord
CharmCityJS
Authentication Flows
Implicit Flow
@joel__lord
CharmCityJS
Authentication Flows
Implicit Flow
JSON Web Token
! Header
! Payload
! Signature
Header
{
"alg": "HS256",
"typ": "JWT"
}
Payload
{
"sub": "1234567890",
"name...
JSON Web Token
! Header
! Payload
! Signature
Header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Payload
eyJzdWIiOiIxMjM0NTY3ODkw...
JSON Web Token
! Header
! Payload
! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj
M0NTY3ODkwIiwibmFtZSI6Ik...
JSON Web Token
! Header
! Payload
! Signature
Image: https://jwt.io
Code
Authentication
Create a JWT
@joel__lord
CharmCityJS
Create a JWT
// sign with default (HMAC SHA256)
var jwt = require('jsonwebtoken');
var token = jwt...
@joel__lord
CharmCityJS
Create a JWT
// sign with default (HMAC SHA256)
var jwt = require('jsonwebtoken');
var token = jwt...
@joel__lord
CharmCityJS
Create a JWT
// sign with default (HMAC SHA256)
var jwt = require('jsonwebtoken');
var token = jwt...
API
Validate a JWT
@joel__lord
CharmCityJS
Validate a JWT
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2ND...
@joel__lord
CharmCityJS
Validate a JWT
var jwt = require('jsonwebtoken');
// verify a token
var data = jwt.verify(token, '...
@joel__lord
CharmCityJS
Validate a JWT
var jwt = require('jsonwebtoken');
// verify a token
var data = jwt.verify(token, '...
Front End
Handle a JWT
@joel__lord
CharmCityJS
Front-End
Add the headers
Live Demo
https://github.com/joellord/
secure-spa-auth0
Delegation!
WTH is a JWT
@joel__lord
joellord
Charm City JS
May 2nd, 2018
Nächste SlideShare
Wird geladen in …5
×

WTH is a JWT

175 Aufrufe

Veröffentlicht am

This is a talk given at CharmCityJS on May 2nd 2018.
Chances are sooner or later your shiny new single page application will need authentication. Add some security and resource access control to that list as well. But how can we integrate all of this into a single page application that is entirely public? How can we ensure that our users only have access to the resources they are authorized to by hacking way in via the console? In this talk, the attendees will learn about l JSON Web Tokens (JWT) and see how they can be used to properly secure single page applications.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

WTH is a JWT

  1. 1. WTH is a JWT A Quick Intro To Token Based Authentication
  2. 2. @joel__lord #i?JS18 About Me @joel__lord joellord
  3. 3. Traditional Applications ! Browser requests a login page
  4. 4. Traditional Applications ! Browser requests a login page
  5. 5. Traditional Applications ! Browser requests a login page
  6. 6. Traditional Applications ! Browser requests a login page ! The server validates on its database
  7. 7. Traditional Applications ! Browser requests a login page ! The server validates on its database 👍
  8. 8. Traditional Applications ! Browser requests a login page ! The server validates on its database ! It creates a session and provides a cookie identifier
  9. 9. What’s wrong with traditional auth? ! Multiple platforms connecting to your application
  10. 10. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled
  11. 11. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API
  12. 12. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API ! Users have a gazillion passwords to remember, which increases security risks
  13. 13. Token Based Auth !
  14. 14. OAuth
  15. 15. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  16. 16. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  17. 17. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  18. 18. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  19. 19. JSON Web Token ! Header ! Payload ! Signature Header { "alg": "HS256", "typ": "JWT" } Payload { "sub": "1234567890", "name": "Joel Lord", "scope": "posts:read posts:write" } Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
  20. 20. JSON Web Token ! Header ! Payload ! Signature Header eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 Payload eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG 9yZCIsImFkbWluIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlY WQgcG9zdHM6d3JpdGUifQ Signature XesR-pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg
  21. 21. JSON Web Token ! Header ! Payload ! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj M0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG9yZCIsImFkbWl uIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlYWQgcG9zdHM6d 3JpdGUifQ.XesR- pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg
  22. 22. JSON Web Token ! Header ! Payload ! Signature Image: https://jwt.io
  23. 23. Code
  24. 24. Authentication Create a JWT
  25. 25. @joel__lord CharmCityJS Create a JWT // sign with default (HMAC SHA256) var jwt = require('jsonwebtoken'); var token = jwt.sign({ name: 'Joel Lord' }, 'secret');
  26. 26. @joel__lord CharmCityJS Create a JWT // sign with default (HMAC SHA256) var jwt = require('jsonwebtoken'); var token = jwt.sign({ name: 'Joel Lord' }, 'secret'); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0Ijox NTI1MTc2NDI3fQ.V89hohVfp1uVNfunkpdl ewNyvGCX5iPPxe1YpM-RqRg
  27. 27. @joel__lord CharmCityJS Create a JWT // sign with default (HMAC SHA256) var jwt = require('jsonwebtoken'); var token = jwt.sign({ name: 'Joel Lord' }, 'secret'); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0Ijox NTI1MTc2NDI3fQ.V89hohVfp1uVNfunkpdl ewNyvGCX5iPPxe1YpM-RqRg { "name": "Joel Lord", "iat": 1525176427 }
  28. 28. API Validate a JWT
  29. 29. @joel__lord CharmCityJS Validate a JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ .V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg
  30. 30. @joel__lord CharmCityJS Validate a JWT var jwt = require('jsonwebtoken'); // verify a token var data = jwt.verify(token, 'secret'); console.log(data); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ .V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg
  31. 31. @joel__lord CharmCityJS Validate a JWT var jwt = require('jsonwebtoken'); // verify a token var data = jwt.verify(token, 'secret'); console.log(data); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ .V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg { "name": "Joel Lord", "iat": 1525176427 }
  32. 32. Front End Handle a JWT
  33. 33. @joel__lord CharmCityJS Front-End Add the headers
  34. 34. Live Demo https://github.com/joellord/ secure-spa-auth0
  35. 35. Delegation!
  36. 36. WTH is a JWT @joel__lord joellord Charm City JS May 2nd, 2018

×