Originally published at: http://www.sitepoint.com/twitter-authentication-ember-js-torii/
Torii is a lightweight authentication library for Ember.js. It supports various OAuth providers (such as Twitter, Google or FaceBook), and can be used to implement a pop-up-based OAuth redirect flow. It uses a session manager (for maintaining the current user), and adapters (to persist authentication state).
In this article I will demonstrate how to implement sign in with Twitter and how to handle user sessions with Torii. Twitter uses OAuth 1.0a for authentication, which doesn’t require much client-side setup (just the pop-up and the session management). It does however require a significant server-side component for which I will use Sinatra.
For those wishing to follow along, you can grab the code to accompany this article from GitHub.
Setting up an Application on Twitter
If you do want to follow along, you will also need to setup an application on Twitter. You can do this by going to http://apps.twitter.com, where you click on “Create New App”. After that fill out your details making sure to enter http://127.0.0.1:9292 into the callback URL field (assuming you are testing locally).
Once you have created your app, you will be redirected to a page with your application’s settings. Click the “Keys and Access Tokens” tab and make a note of your consumer key and your consumer secret.
Server Setup
This requires a little knowledge of how OAuth 1.0a works (if you would like a refresher, you can check out the documentation on Twitter’s website). It also requires a library that supports authentication with different OAuth providers. As we are using Sinatra, OmniAuth is an excellent choice (it is built upon Rack, so will work in pretty much any Ruby web application). If we were using Node, we could have opted for Passport instead.
Rather than walk you through the server set up, you can just grab a working copy of the app and boot it up yourselves. Here’s how:
git clone https://github.com/sitepoint-editors/torii-twitter-example.git
cd torii-twitter-example
Then, in your terminal add your consumer key and your consumer secret to your environment
export TWITTER_KEY=twitter_key TWITTER_SECRET=twitter_secret
Run bundle to install any dependencies (assumes you have Ruby installed), then rake db:migrate to set up the database.
After that you need to build the Ember application:
cd public
npm install && bower install
ember build
Finally run rackup to start Sinatra and navigate to http://127.0.0.1:9292. If everything has gone as planned, you should be able to sign in to your new app using Twitter.
Note that the server endpoints are as follows:
Unauthenticated User:
get '/auth/twitter': Starts a sign in flow, requests a token from Twitter, redirects user to Twitter for authentication.get '/auth/twitter/callback': Twitter authenticates and sends token here, server exchanges token for an access token and authenticates user.
Authenticated User:
post '/logout': Clears user authentication.get '/users/me': Returns authenticated user info.
Now let’s use our app to look at how you might implement Torii in your own projects.
Install Torii
First, setup an Ember project with Ember CLI, and install Torii (ours is installed in the public folder):
ember init npm install –save-dev torii
Configure a Provider
Next, add the Twitter provider and set requestTokenUri to the server endpoint where the flow starts: /auth/twitter. Also set the sessionServiceName: 'session' to setup the session manager.
config/environment.js
ENV.torii = {
sessionServiceName: 'session',
providers: {
'twitter': {
requestTokenUri: '/auth/twitter'
}
}
};
Torii has several built-in providers, yet authoring your own is designed to be easy.
Continue reading this article on SitePoint