#235 OmniAuth Part 1

Oct 11, 2010 | 10 minutes | Plugins, Authentication

OmniAuth is an easy way to add many different authentication services to your app. In this episode we start integrating it with Devise.

Click to Play Video ▶

Download:
source code Project Files in Zip (133 KB)
mp4 Full Size H.264 Video (25.2 MB)
m4v Smaller H.264 Video (14.6 MB)
webm Full Size VP8 Video (30 MB)
ogv Full Size Theora Video (32.4 MB)

Browse_code Browse Source Code

There is a newer version of this episode, see the revised episode.

Resources

bash

bundle install
rails g nifty:scaffold authentication user_id:integer provider:string uid:string index create destroy
rake db:migrate

Gemfile

gem 'omniauth'

models/user.rb

has_many :authentications

models/authentication.rb

belongs_to :user

config/routes.rb

match '/auth/:provider/callback' => 'authentications#create'

authentications_controller.rb

def index
 @authentications = current_user.authentications if current_user
end
def create
 auth = request.env["rack.auth"]
 current_user.authentications.find_or_create_by_provider_and_uid(auth['provider'], auth['uid'])
 flash[:notice] = "Authentication successful."
 redirect_to authentications_url
end
def destroy
 @authentication = current_user.authentications.find(params[:id])
 @authentication.destroy
 flash[:notice] = "Successfully destroyed authentication."
 redirect_to authentications_url
end

config/initializers/omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
 provider :twitter, 'CONSUMER_KEY', 'CONSUMER_SECRET'
end

authentications/index.html.erb

<% title "Sign In" %>
<% if @authentications %>
 <% unless @authentications.empty? %>
 <p><strong>You can sign in to this account using:</strong></p>
 <div class="authentications">
 <% for authentication in @authentications %>
 <div class="authentication">
 <%= image_tag "#{authentication.provider}_32.png", :size => "32x32" %>
 <div class="provider"><%= authentication.provider.titleize %></div>
 <div class="uid"><%= authentication.uid %></div>
 <%= link_to "X", authentication, :confirm => 'Are you sure you want to remove this authentication option?', :method => :delete, :class => "remove" %>
 </div>
 <% end %>
 <div class="clear"></div>
 </div>
 <% end %>
 <p><strong>Add another service to sign in with:</strong></p>
<% else %>
 <p><strong>Sign in through one of these services:</strong></p>
<% end %>
<a href="/auth/twitter" class="auth_provider">
 <%= image_tag "twitter_64.png", :size => "64x64", :alt => "Twitter" %>
 Twitter
</a>
<a href="/auth/facebook" class="auth_provider">
 <%= image_tag "facebook_64.png", :size => "64x64", :alt => "Facebook" %>
 Facebook
</a>
<a href="/auth/google_apps" class="auth_provider">
 <%= image_tag "google_64.png", :size => "64x64", :alt => "Google" %>
 Google
</a>
<a href="/auth/open_id" class="auth_provider">
 <%= image_tag "openid_64.png", :size => "64x64", :alt => "OpenID" %>
 OpenID
</a>
<div class="clear"></div>

application.css

.authentications {
 margin-bottom: 30px;
}
.authentication {
 width: 130px;
 float: left;
 background-color: #EEE;
 border: solid 1px #999;
 padding: 5px 10px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 position: relative;
 margin-right: 10px;
}
.authentication .remove {
 text-decoration: none;
 position: absolute;
 top: 3px;
 right: 3px;
 color: #333;
 padding: 2px 4px;
 font-size: 10px;
}
.authentication .remove:hover {
 color: #CCC;
 background-color: #777;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}
.authentication img {
 float: left;
 margin-right: 10px;
}
.authentication .provider {
 font-weight: bold;
}
.authentication .uid {
 color: #666;
 font-size: 11px;
}
.auth_provider img {
 display: block;
}
.auth_provider {
 float: left;
 text-decoration: none;
 margin-right: 20px;
 text-align: center;
 margin-bottom: 10px;
}