Torii: Ember.js Authentication Library

Ember Authentication with Torii

http://github.com/vestorly/torii

Cory Forsyth@bantic


201 Created

We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.

Stickers!


http://vestorly.com


Vestorly is pioneering a content discovery app for professionals to use for lead generation / to grow their biz organically

http://vestorly.com

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)


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>


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.

http://provider.com/oauth

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! });!




• facebook-oauth2

• linked-in-oauth2

• google-oauth2

• oauth2-code base

Torii Primitive: 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


http://vestorly.com

http://201-created.com/

https://github.com/simplabs/ember-simple-auth

Torii: Ember.js Authentication Library

Internet

Transcript of Torii: Ember.js Authentication Library