Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
Similar to AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens. (20)
Recently uploaded
Recently uploaded (20)
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
- 2. Sam Bellen ● Developer Evangelist at Auth0 ● Google Developer Expert ● Co-organizer Fronteers meetups Belgium ● I tweet as @sambego
- 12. Any questions so far?
- 13. Traditional web app VS Single page application
- 15. Single page architecture app.sambego.be api.sambego.be user.sambego.be pay.sambego.be
- 16. Multi app architecture app.sambego.be api.sambego.beMobile app Desktop app
- 17. What are some of the problems with the traditional cookie based approach?
- 18. Cookies don’t like CORS
- 22. So what’s the solution?
- 24. OAuth
- 25. OpenID Connect
- 34. These are the steps we have to take to access an protected resource 1. User fills in login form 2. We pass that data to an authentication endpoint 3. The authentication endpoint returns an access token 4. We send along this access token with each request for protected data
- 35. OpenID Connect
- 42. Will the user have to login with every visit?
- 43. The login flow remains the same
- 45. With each next visit we will request the tokens again
- 49. Does this approach solve CORS?
- 50. Does this approach solve flow?
- 51. Does this approach solve keeping state?
- 52. Some questions by now?
- 53. What the #&$* is a token?
- 54. JSON Web Token
- 56. A JSON Web token is made from 3 different parts ● The header ● The payload ● The signature
- 60. Payload { "sub": "1234567890", "given_name": "Sam", "family_name": "Bellen", "preferred_username": "Sambego", "iat": 1516239022 }
- 61. Reserved claims
- 62. Public claims
- 63. Private claims
- 65. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), ✨your-256-bit-secret✨ )
- 66. JWTs can be verified!
- 67. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), ✨your-256-bit-secret✨ )
- 68. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), this-is-a-super-secret-key )
- 69. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), nPilVwFjcF0v5NL5YT1xsiwRJCGqM1do )
- 70. jwt.io
- 71. Demo time!
- 72. The future of authentication?
- 75. No more passwords! 🎉
- 76. That’s not new, we’ve had passwordless login for a while now
- 77. Loggin in with an authenticator device
- 78. api.sambego.be
- 83. Demo time!
- 84. Who has an authenticator device?
- 85. One last time, any questions?
- 86. Thanks! @sambego