Torii: Ember.js Authentication Library
•
7 likes•5,614 views
Torii is an authentication service library for use with Ember.js for managing client-side login flows, specifically with third-party OAuth. http://githbu.com/vestorly/torii
Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Viewers also liked (12)
Similar to Torii: Ember.js Authentication Library
Similar to Torii: Ember.js Authentication Library (20)
Recently uploaded
Recently uploaded (20)
Torii: Ember.js Authentication Library
- 4. 201 Created We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
- 6. http://vestorly.com http://github.com/vestorly/torii Vestorly is pioneering a content discovery app for professionals to use for lead generation / to grow their biz organically
- 8. Torii a traditional Japanese gate … [that] symbolically marks the transition from the profane to the sacred
- 9. 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) http://github.com/vestorly/torii
- 10. 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> http://github.com/vestorly/torii
- 11. 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
- 12. 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?”)
- 13. 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.
- 14. 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
- 15. 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)
- 16. 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
- 17. 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
- 18. 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`
- 19. 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:// provider.com/oauth?app_id=X”) • 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.
- 22. Torii: OAuth Providers redirects to …/?auth_code=ABC132…
- 23. Torii: OAuth Providers redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup
- 24. Torii: OAuth Providers redirects to …/?auth_code=ABC132… Torii reads ‘auth_code’, and closes popup
- 25. 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! });!
- 26. 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
- 27. 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. 'http://facebook.com/oauth'! ! !// 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’! });!
- 28. Torii Primitive: Popup • adds application initializer • detects it is in a popup • calls `deferReadiness` • reads keys from URL • `postMessage`’s to window.open
- 29. Torii: Demo Create a simple torii-provider for use against a demonstration OAuth provider. Demonstrate the torii popup reading keys off the URL.
- 30. 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
- 31. 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`
- 32. 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
- 33. 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
- 34. Torii Primitive: Session • Torii’s session is lightweight by design • The session is a proxy for the adapter’s `open` output • Call `session.open(providerName, options)`
- 35. Torii: Demo Opt in to the session, create a torii adapter
- 36. 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’)`
- 37. 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
- 38. Cory Forsyth @bantic Torii: http://github.com/vestorly/torii Vestorly: http://vestorly.com 201 Created: http://201-created.com/ Ember Simple Auth: https://github.com/simplabs/ember-simple-auth See also: flickr credits: jpellgen