Torii: Ember.js Authentication Library


Published on

Torii is an authentication service library for use with Ember.js for managing client-side login flows, specifically with third-party OAuth.

Published in: Internet, Technology
  • Be the first to comment

Torii: Ember.js Authentication Library

  1. 1. Ember Authentication with Torii
  2. 2. Cory Forsyth @bantic
  3. 3. 201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
  4. 4. Stickers!
  5. 5. Vestorly is pioneering a content discovery app for professionals to use for lead generation / to grow their biz organically
  6. 6.
  7. 7. Torii a traditional Japanese gate … [that] symbolically marks the transition from the profane to the sacred
  8. 8. How can we authenticate? • Username + password • Devise (user/pass, oauth via omniauth, etc) • OAuth via facebook/twitter/github/linked-in • Hybrid flow (single-page app plus server actions)
  9. 9. Hybrid flow • HTTP Server serves Ember App (e.g. ember-rails) Server serves HTML with Ember App <html> … <script>App.create()</> … <form action=‘/signin’> … user/pass Server signs user in, serves HTML w/ Ember App _and_ currentUser <html> … <script> App.create(); App.currentUser=! “<% JSON .stringify(@user) %>”;! </script>
  10. 10. Auth with session token • Separate SPA and API ! Ember app posts user/pass to api: /sessions {token: token} API validates user/ pass, generates and returns session token Ember app stores session token and adds session token as a header to all future API calls user/pass GET /protected_resource header: token API validates token to look up session, returns protected resource
  11. 11. Devise • It manages authentication state for you at the Rack level • What does Devise allow us to not think about? • State — The What, not the How (“current_user?”)
  12. 12. Ember is a State Machine Torii helps manage state as a user moves through authentication transitions Torii is an abstraction of the concept of auth. Your auth code does not need to focus on the How, only the What.
  13. 13. What does Torii not do? • Torii is not a client-side Devise. • Not a replacement for Ember Simple Auth • Does not automatically give you 3rd party login • Does not generate UI • Does not make assumptions about server endpoints
  14. 14. What does Torii do? • Provides a set of primitives for authenticating • Provides lightweight session management (opt-in) • Provides a reusable pattern for client-side OAuth flows (easily add additional OAuth providers) • Unifies different auth options (user/pass, OAuth, etc)
  15. 15. Torii Motivation • Provide promise-based abstraction of messy popup/redirect-based OAuth flows • Handle social login, traditional login (user/pass), and connection of social accounts using the same concepts • Allow for more maintainable auth-related code
  16. 16. Torii’s Primitives • Providers: Any 1st or 3rd party that can authenticate • Popup: Simplify the boilerplate of opening a popup and reading its redirected data • Adapters: Bridge between providers and session • Session: Opt-in, state machine
  17. 17. Torii Primitive: Provider • Responsible for obtaining proof of authentication/ authorization from a 1st or 3rd party (async) • Can be as simple as POSTing user/pass to /api/ session and getting a session token • Can also handle popup-based OAuth redirect flow • Torii Providers must only implement `open`
  18. 18. OAuth overview • Register an app with a redirect url with the OAuth provider. Provider gives a unique app id and app secret. • Visit provider’s page, include your app id (“http://”) • User signs in at provider’s page, provider redirects user to registered redirect url, includes query params with auth data (“…?auth_code=ABC”) • Your server reads the query params and uses the app secret along with the auth code to exchange for an access token aka “password” for the user.
  19. 19. Torii: OAuth Providers
  20. 20. Torii: OAuth Providers
  21. 21. Torii: OAuth Providers redirects to …/?auth_code=ABC132…
  22. 22. Torii: OAuth Providers redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup
  23. 23. Torii: OAuth Providers redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup
  24. 24. Torii: OAuth Providers redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup this.get('torii').open('facebook-oauth2')! .then(function(authData)){! !// got the auth code! });!
  25. 25. Torii: OAuth Providers redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup • facebook-oauth2 • linked-in-oauth2 • google-oauth2 • oauth2-code base
  26. 26. Torii Primitive: Popup redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup this.get('popup').open(url, keys)! !// opens popup at `url`! !// e.g. ''! ! !// waits until popup reloads! !// this app, and scans its url! !// for `keys`! !// e.g. ‘http://localhost:4200/?auth_code=X'! // closes popup, resolves promise with: ! .then(function(data)){! console.log(data.auth_code); // ‘X’! });!
  27. 27. Torii Primitive: Popup • adds application initializer • detects it is in a popup • calls `deferReadiness` • reads keys from URL • `postMessage`’s to
  28. 28. Torii: Demo Create a simple torii-provider for use against a demonstration OAuth provider. Demonstrate the torii popup reading keys off the URL.
  29. 29. Torii + OAuth: What else? • Torii does not prescribe what to do once you’ve received the code. • Typically, you must complete a secret (aka server- side) exchange with the 3rd-party provider to turn the code into an access token • Some providers (Facebook Connect, Foursquare) will return to you an access token without a server- side exchange
  30. 30. Torii Primitive: Adapter • Torii Adapters are only used by the Torii Session • Adapters are the glue/bridge between torii providers and the session • torii provider -> torii adapter -> session properties • Subclasses must only implement `open`
  31. 31. Torii Primitive: Adapter • Example uses for an adapter: • POST auth information from Facebook to your server to generate a new server-side session • Decorate the client-side session with additional properties • Set an ajax prefilter that adds a header with the session token to all future requests
  32. 32. Torii Primitive: Session • Opt-in via torii configuration `sessionServiceName` • Injects ‘session’ property onto routes and controllers • Session is a state machine and a proxy • isAuthenticated • isOpening
  33. 33. Torii Primitive: Session • Torii’s session is lightweight by design • The session is a proxy for the adapter’s `open` output • Call `, options)`
  34. 34. Torii: Demo Opt in to the session, create a torii adapter
  35. 35. Torii is an ember-addon • `ember new <app>` • `npm install torii --save-dev` • In routes: `this.get(‘torii’)` • (opt-in to sessions and then:) `this.get(‘session’)`
  36. 36. What’s next for Torii? • Torii-Provider ecosystem • More conventions • Session Management — more or less? • Additional primitive/hooks for OAuth code exchange • Better Devise/omniauth compatibility
  37. 37. Cory Forsyth @bantic Torii: Vestorly: 201 Created: Ember Simple Auth: See also: flickr credits: jpellgen