#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.
- Download:
- source codeProject Files in Zip (133 KB)
- mp4Full Size H.264 Video (25.2 MB)
- m4vSmaller H.264 Video (14.6 MB)
- webmFull Size VP8 Video (30 MB)
- ogvFull Size Theora Video (32.4 MB)
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; }