Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember and OAuth

Ember and OAuth

A brief tour of OAuth2 and it's use with Ember and other Client-side frameworks

E60b2dc57668b5662ce3f07781e41710?s=128

Matthew Rudy Jacobs

January 15, 2014
Tweet

Transcript

  1. Ember & OAuth Matthew Rudy Jacobs Wednesday 15th January 2014

    @ EmberLondon
  2. @matthewrudy

  3. cronycle.com

  4. The Goal

  5. Authenticate via a 3rd party

  6. Obtain access to a 3rd party API

  7. The Tool

  8. OAuth2 http://tools.ietf.org/html/rfc6749

  9. “The Road to Hell”?

  10. Actually it’s alright

  11. 4 Different Flows otherwise known as “grant types”

  12. 4 Grant Types • Authorization Code • Implicit • Resource

    Owner Password Credentials • Client Credentials
  13. Authorization Code

  14. Authorization Code

  15. Authorization Code auth code access token /auth?code=abc123

  16. Implicit

  17. Implicit S3

  18. Implicit S3 access token /auth#access_token=abc123

  19. Password

  20. Password

  21. Password access token { access_token: “abc123” }

  22. Client Credentials

  23. Client Credentials

  24. Implicit Grant Flow this is what we want!

  25. ember-oauth2

  26. None
  27. Initiate the Auth

  28. Sign in with Github

  29. We have a token

  30. Except we don’t!

  31. This is not Implicit!

  32. This is not Implicit! /callback?code=…

  33. This is not Implicit! /callback?code=… /callback#access_token=…

  34. Github doesn’t do Implicit Grant!

  35. Github suggests you use passwords

  36. TLDR; pure client-side OAuth is poorly supported

  37. But what about a hybrid approach?

  38. Authorization Code Flow (as an API) ❤️

  39. Stick Ember in the middle

  40. The Concept

  41. GET /oauths/new {url: “https://github.com/auth?…”} https://github.com/auth?…

  42. GET /oauths/new {url: “https://github.com/auth?…”} https://github.com/auth?… callback POST /oauths {access_token: “abc123”}

  43. GET /oauths/new {url: “https://github.com/auth?…”} https://github.com/auth?… callback POST /oauths {access_token: “abc123”}

  44. Hack it together!

  45. OAuth API Client

  46. Handled in a Route

  47. Easy right?

  48. Thanks

  49. @matthewrudy