Screencast: OmniAuth Teil 1

Die traditionelle Authentifizierung mit einem eigenem System wird immer mehr zur einer Ausnahme. Moderne Webapplikationen bieten daher die Anmeldung über bestehende Dienste wie OpenID, Twitter, Facebook und/oder OAuth an. OmniAuth ist ein Plugin das in Rails-App für diesen Zweck eingesetzt werden kann. Ryan zeigt in im ersten Teil wie es in Devise integriert werden kann.

 

Download:

Download(25.6 MB, 10:52)
Alternativer Download für iPod & Apple TV(22.3 MB, 10:52)

 

Resourcen:

 

Quellcode:

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

[ruby]
# Gemfile
gem ‚omniauth‘

# models/user.rb
has_many :authentications

# models/authentication.rb
belongs_to :user

# 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
[/ruby]

[html]
<!– 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 => "32×32" %>
<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 => "64×64", :alt => "Twitter" %>
Twitter
</a>
<a href="/auth/facebook" class="auth_provider">
<%= image_tag "facebook_64.png", :size => "64×64", :alt => "Facebook" %>
Facebook
</a>
<a href="/auth/google_apps" class="auth_provider">
<%= image_tag "google_64.png", :size => "64×64", :alt => "Google" %>
Google
</a>
<a href="/auth/open_id" class="auth_provider">
<%= image_tag "openid_64.png", :size => "64×64", :alt => "OpenID" %>
OpenID
</a>
<div class="clear"></div>
[/html]

[css]
// 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;
}
[/css]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.