Post on 06-May-2015
description
Ember Authentication with Torii
http://github.com/vestorly/torii
Cory Forsyth@bantic
http://github.com/vestorly/torii
201 Created
We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.
Stickers!
http://github.com/vestorly/torii
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
http://github.com/vestorly/torii
Torii
a traditional Japanese gate … [that] symbolically marks the transition from the
profane to the sacred
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
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
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
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?”)
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.
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
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)
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
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
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`
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.
Torii: OAuth Providers
Torii: OAuth Providers
Torii: OAuth Providers
redirects to …/?auth_code=ABC132…
Torii: OAuth Providers
redirects to …/?auth_code=ABC132…
Torii reads ‘auth_code’, and closes popup
Torii: OAuth Providers
redirects to …/?auth_code=ABC132…
Torii reads ‘auth_code’, and closes popup
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! });!
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
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’! });!
Torii Primitive: Popup
• adds application initializer
• detects it is in a popup
• calls `deferReadiness`
• reads keys from URL
• `postMessage`’s to window.open
Torii: DemoCreate a simple torii-provider for use against a
demonstration OAuth provider.
Demonstrate the torii popup reading keys off the URL.
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
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`
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
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
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)`
Torii: Demo
Opt in to the session, create a torii adapter
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’)`
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
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