Advertisement
  1. Code
  2. Ruby

Wie kann man ein unauffälliges Anmeldesystem in Rails erstellen?

Scroll to top
Read Time: 16 min

() translation by (you can also view the original English article)

Ein unauffälliges Anmeldesystem ist eines, das dem Benutzer aus dem Weg geht. Dadurch wird Ihre Anwendung schöner und ausgefeilter. Dieser Artikel führt Sie durch den Prozess des Einrichtens von Benutzeranmeldungen und anschließendem Bestätigen des Prozesses, indem Sie das Formular in eine modale Box verschieben, die mit dem Server kommuniziert. Darüber hinaus zeigt Ihnen dieser Artikel, wie Sie das Setup mit jQuery und Prototype erstellen, damit Sie Ihre Lieblingsbibliothek auswählen können. In diesem Artikel wird davon ausgegangen, dass Sie Erfahrung mit Rails und jQuery oder Prototype haben.


Sie können Adman65/nettuts für eine erfolgreiche Anmeldung verwenden. Stellen Sie sicher, dass Sie schlechte Anmeldeinformationen verwenden, damit Sie sehen können, wie alles funktioniert.

Was machen wir?


Final ProjectFinal ProjectFinal Project

Anfangen

Zunächst erstellen wir eine Dummy-Anwendung mit einer öffentlichen und einer privaten Seite. Die Root-URL ist die öffentliche Seite. Auf der öffentlichen Seite befindet sich ein Anmeldelink. Wenn sich der Benutzer erfolgreich anmeldet, wird er auf die private Seite umgeleitet. Wenn nicht, werden sie zurück zum Anmeldeformular weitergeleitet. Die private Seite zeigt den Benutzernamen. Wir werden dies als Ausgangspunkt für die Ajaxifizierung der Website verwenden.

Der erste Schritt besteht darin, mit dem Befehl Rails eine neue Anwendung zu generieren und dann authlogic zu installieren und einzurichten.

1
$ cd into-a-directory
2
$ rails unobtrusive-login

authlogic hinzufügen.

1
# /config/environment.rb

2
config.gem 'authlogic'

Installieren Sie nun die gems.

1
$ sudo gem install gemcutter
2
$ sudo gem tumble
3
$ sudo rake gems:install

Erstellen Sie als Nächstes ein Benutzermodell und fügen Sie der Migration die erforderlichen authlogischen Spalten hinzu.

1
$ ./script/generate model User
2
exists  app/models/
3
exists  test/unit/
4
exists  test/fixtures/
5
create  app/models/user.rb
6
create  test/unit/user_test.rb
7
create  test/fixtures/users.yml
8
create  db/migrate
9
create  db/migrate/20100102082657_create_users.rb

Fügen Sie nun die Spalten zur neuen Migration hinzu.

1
class CreateUsers < ActiveRecord::Migration
2
  def self.up
3
    create_table :users do |t|
4
      t.string    :login,               :null => false
5
      t.string    :crypted_password,    :null => false
6
      t.string    :password_salt,       :null => false
7
      t.string    :persistence_token,   :null => false
8
      t.timestamps
9
    end
10
  end
11
12
  def self.down
13
    drop_table :users
14
  end
15
end

Migrieren Sie die Datenbank.

1
$ rake db:migrate

Authlogic in das Benutzermodell aufnehmen.

1
# /app/models/user.rb

2
class User < ActiveRecord::Base
3
  acts_as_authentic
4
end

Jetzt können wir einen Benutzer erstellen. Da es sich um eine Demo-App handelt, sind keine webbasierten Funktionen zum Anmelden erforderlich. Öffnen Sie also die Konsole und erstellen Sie einen Benutzer:

1
$ ./script/console
2
>> me = User.create(:login => 'Adman65', :password => 'nettuts', :password_confirmation => 'nettuts')

Jetzt haben wir einen Benutzer im System, aber wir haben keine Möglichkeit, uns anzumelden oder abzumelden. Dazu müssen wir die Modelle, Controller und Ansichten erstellen. Authlogic hat eine eigene Klasse zum Verfolgen von Anmeldungen. Wir können den Generator dafür verwenden:

1
# create the user session

2
$ ./script/generate UserSession

Als nächstes müssen wir den Controller generieren, der Benutzer an- und abmeldet. Sie können Sitzungen wie jede andere Ressource in Rails erstellen.

1
# create the session controller

2
$ ./script/generate controller UserSessions

Stellen Sie nun den Inhalt auf:

1
# /app/controllers/user_sessions_controller.rb

2
class UserSessionsController < ApplicationController  
3
  def new
4
    @user_session = UserSession.new
5
  end
6
7
  def create
8
    @user_session = UserSession.new(params[:user_session])
9
    if @user_session.save
10
      flash[:notice] = "Login successful!"
11
      redirect_back_or_default user_path
12
    else
13
      render :action => :new
14
    end
15
  end
16
end

Es sieht genauso aus wie ein Controller, der über ein Gerüst generiert wurde. Erstellen Sie nun den Benutzer-Controller mit öffentlichen und privaten Inhalten. Generieren Sie einen Benutzer-Controller. Innerhalb des Controllers verwenden wir einen Vorher-Filter, um den Zugriff auf die privaten Bereiche zu beschränken. Die Indexaktion ist öffentlich und die Show ist privat.

1
# create the users controller

2
$ ./script/generate controller users

Aktualisieren Sie den Inhalt:

1
# /app/controllers/users_controller.rb

2
class UsersController < ApplicationController
3
  before_filter :login_required, :only => :show
4
5
  def index
6
  end
7
8
  def show
9
    @user = current_user
10
  end
11
12
  private
13
  def login_required
14
    unless current_user
15
      flash[:error] = 'You must be logged in to view this page.'
16
      redirect_to new_user_session_path
17
    end
18
  end
19
end

Sie sollten beachten, dass current_user an dieser Stelle eine undefinierte Methode ist. Definieren Sie diese Methoden in ApplicationController. Öffnen Sie application_controller.rb und aktualisieren Sie den Inhalt:

1
# application controller

2
class ApplicationController < ActionController::Base
3
  helper :all # include all helpers, all the time

4
  protect_from_forgery # See ActionController::RequestForgeryProtection for details

5
6
  # From authlogic

7
  filter_parameter_logging :password, :password_confirmation
8
  helper_method :current_user_session, :current_user
9
10
  private
11
  def current_user_session
12
    @current_user_session ||= UserSession.find
13
  end
14
15
  def current_user        
16
    @current_user ||= current_user_session && current_user_session.user
17
  end
18
end

Zu diesem Zeitpunkt sind die Modelle und Steuerungen vollständig, die Ansichten jedoch nicht. Wir müssen Ansichten für ein Anmeldeformular und den öffentlichen und privaten Inhalt erstellen. Wir werden gem der raffinierten Generatoren verwenden, um ein grundlegendes Layout zu erstellen.

1
$ sudo gem install nifty-generators
2
$ ./script/generate nifty_layout

Zeit, um das Anmeldeformular zu erstellen. Wir werden hierfür einen Teil verwenden, da wir in Zukunft den Teil verwenden werden, um nur das Anmeldeformular im modalen Feld zu rendern. Hier ist der Code zum Erstellen des Anmeldeformulars. Es ist genau so, als würden Sie einen Blog-Beitrag oder ein anderes Modell erstellen.

1
# create the login views

2
# /app/views/user_sessions/_form.html.erb

3
<% form_for(@user_session, :url => user_session_path) do |form| %>

4
  <%= form.error_messages %>
5
6
  <p>
7
    <%= form.label :login %>

8
    <%= form.text_field :login %>
9
  </p>

10


11
  <p>

12
    <%= form.label :password %>

13
    <%= form.password_field :password %>

14
  </p>
15
16
  <%= form.submit 'Login' %>

17
<% end %>

Rendern Sie den Teil in der neuen Ansicht:

1
# /app/views/user_sessions/new.html.erb

2
<% title 'Login Please' %>
3
<%= render :partial => 'form' %>

Erstellen Sie einige grundlegende Seiten für den öffentlichen und privaten Inhalt. Die Indexaktion zeigt öffentlichen Inhalt und show zeigt privaten Inhalt an.

1
# create the dummy public page

2
# /app/views/users/index.html.erb

3
<% title 'Unobtrusive Login' %>
4
5
<p>Public Facing Content</p>

6


7
<%= link_to 'Login', new_user_session_path %>

Und für die private Seite:

1
# create the dummy private page

2
# /app/views/users/show.html.erb

3
<% title 'Welcome' %>
4
<h2>Hello <%=h @user.login %></h2>

5


6
<%= link_to 'Logout', user_session_path, :method => :delete %>

Löschen Sie die Datei /public/index.html und starten Sie den Server. Sie können sich jetzt bei der Anwendung an- und abmelden.

1
$ ./script/server

Hier sind einige Screenshots der Demo-Anwendung. Die erste ist die öffentliche Seite.

Public PagePublic PagePublic Page

Nun das Anmeldeformular

Login PageLogin PageLogin Page

Und die private Seite

Private PagePrivate PagePrivate Page

Und schließlich wird der Zugriff verweigert, wenn Sie versuchen, http://localhost:3000/user zu besuchen

Access DeniedAccess DeniedAccess Denied

Der AJAX-Anmeldevorgang

Bevor wir fortfahren, müssen wir verstehen, wie Server und Browser zusammenarbeiten, um diesen Prozess abzuschließen. Wir wissen, dass wir JavaScript für die Modalbox und den Server verwenden müssen, um die Anmeldungen zu überprüfen. Lassen Sie uns klarstellen, wie dies funktionieren wird. Der Benutzer klickt auf den Anmeldelink. Anschließend wird ein modales Feld mit dem Anmeldeformular angezeigt. Der Benutzer füllt das Formular aus und wird entweder auf die private Seite umgeleitet oder das modale Feld wird mit einem neuen Anmeldeformular aktualisiert. Die nächste Frage ist, wie Sie die Modalbox aktualisieren oder dem Browser mitteilen, was zu tun ist, nachdem der Benutzer das Formular gesendet hat. Rails hat reply_to-Blöcke. Mit reply_to können Sie den Controller anweisen, unterschiedliche Inhalte zu rendern, wenn der Benutzer XML, HTML, JavaScript, YAML usw. angefordert hat. Wenn der Benutzer das Formular sendet, kann der Server JavaScript zurückgeben, um es im Browser auszuführen. Wir verwenden dieses Rendering für ein neues Formular oder eine Weiterleitung. Bevor wir tiefer tauchen, gehen wir den Vorgang der Reihe nach durch.

  1. Benutzer geht zur öffentlichen Seite
  2. Der Benutzer klickt auf den Anmeldelink
  3. Das modale Feld wird angezeigt
  4. Der Benutzer füllt das Formular aus
  5. Das Formular wird an den Server gesendet
  6. Der Server gibt JavaScript zur Ausführung zurück
  7. Der Browser führt das JavaScript aus, das die Modalbox entweder umleitet oder aktualisiert.

Das ist das hohe Niveau. Hier ist die Implementierung auf niedriger Ebene.

  1. Benutzer besucht die öffentliche Seite
  2. Die öffentliche Seite enthält JavaScript, das ausgeführt wird, wenn das DOM bereit ist, das JavaScript an den Anmeldelink anfügt. Dieses Javscript führt eine XMLHTTPRequest (XHR von nun an) an den Server für etwas JavaScript durch. Das JavaScript setzt den Inhalt der Modalbox auf das Formular HTML. Das JavaScript macht auch etwas sehr Wichtiges. Es bindet die Übermittlungsaktion des Formulars an eine XHR mit POST-Daten an die Aktion des Formulars. Auf diese Weise kann der Benutzer das Anmeldeformular weiterhin in der Modalbox ausfüllen.
  3. Die Modal Box hat jetzt das Formular und das erforderliche JavaScript
  4. Der Benutzer klickt auf "Anmelden".
  5. Die Funktion submit() wird aufgerufen, die einen POST XHR für die Aktion des Formulars mit seinen Daten ausführt.
  6. Der Server generiert entweder das JavaScript für das Formular oder die Umleitung
  7. Der Browser empfängt das JavaScript und führt es aus. Der Browser aktualisiert entweder die modale Box oder leitet den Benutzer über window.location weiter.

Am AJAX Ready Controller einen Peak nehmen

Schauen wir uns die neue Struktur für den UserSessions-Controller an.

1
class UserSessionsController < ApplicationController
2
  layout :choose_layout
3
4
  def new
5
    @user_session = UserSession.new
6
  end
7
8
  def create
9
    @user_session = UserSession.new(params[:user_session])
10
11
    if @user_session.save
12
      respond_to do |wants|
13
        wants.html { redirect_to user_path(@user_session.user) }
14
        wants.js { render :action => :redirect } # JavaScript to do the redirect

15
      end
16
    else
17
      respond_to do |wants|
18
        wants.html { render :new }
19
        wants.js # defaults to create.js.erb

20
      end
21
    end
22
  end
23
24
  private
25
  def choose_layout
26
    (request.xhr?) ? nil : 'application'
27
  end
28
end

Wie Sie sehen können, ist die Struktur anders. Innerhalb von if save, else bedingt, wird reply_to verwendet, um den richtigen Inhalt zu rendern. want.xx wobei xx ein Inhaltstyp ist. Standardmäßig fordern Prototype und jQuery Text/JavaScript an. Dies entspricht wants.js. Wir sind kurz davor, mit dem AJAX-Teil zu beginnen. Wir werden keine Plugins außer denen für Modalboxen verwenden. Wir verwenden Facebox für jQuery und ModalBox für Prototype.

Prototyp

Rails hat Unterstützung für Prototype eingebaut. Die JavaScript-Helfer von Rail sind Ruby-Funktionen, die JavaScript generieren und Prototype verwenden. Diese Technik ist als RJS (Ruby JavaScript) bekannt. Ein Beispiel ist remote_form_for, das wie der Standard for_for funktioniert und einige an onsubmit gebundene JS hinzufügt, die das Formular unter Verwendung seiner Methode mit seinen Daten an seine Aktion senden. Ich werde in diesem Artikel kein RJS verwenden, da ich Vanilla JS demonstrieren möchte. Ich denke, durch die Verwendung von reinem JS und die Eliminierung der JS-Helfer wird der Artikel für weniger erfahrene Entwickler zugänglicher. Abgesehen davon können Sie diese Schritte problemlos mit RJS/Prototype-Helfern ausführen, wenn Sie dies wünschen.

Das Hinzufügen eines Prototyps zur Anwendung ist sehr einfach. Wenn Sie den Befehl Rails verwenden, werden der Prototyp und die scriptaculous-Dateien in/public/JavaScripts erstellt. Sie einzuschließen ist einfach. Öffnen Sie /app/views/layouts/application.erb und fügen Sie diese Zeile in das Head-Tag ein:

1
<%= JavaScript_include_tag :defaults %>

JavaScript_include_tag erstellt Skript-Tags für Standarddateien in/public/JavaScripts, vor allem prototype.js, effects.js und application.js. effects.js ist scriptaculous. application.js ist eine Datei, mit der Sie anwendungsspezifisches JS behalten können. Jetzt brauchen wir ein Modal Box Plugin. Wir werden dies nutzen. Es ist ein sehr schönes Modal Box Plugin, das von OSX inspiriert ist. Die Quelle wird auf GitHub gehostet, daher müssen Sie die Dateien in Ihrem Projektverzeichnis klonen und verschieben. Zum Beispiel:

1
$ cd code
2
$ git clone git://github.com/okonet/modalbox.git
3
$ cd modalbox
4
# move the files in the correct directories.
5
# move modalbox.css into /public/stylesheets
6
# move modalbox.js into /public/JavaScripts
7
# move spinner.gif into /public/images

Fügen Sie nun die Stylesheets und JavaScript in Ihre Anwendung ein.

1
2
  <%= stylesheet_link_tag ‘application’ %>

3
  <%= stylesheet_link_tag modalbox %> 
4
  <%= JavaScript_include_tag :defaults %>

5
  <%= JavaScript_include_tag modalbox%>

Lassen Sie uns jetzt unseren Login-Link öffnen, um eine Modalbox zu öffnen. Dazu müssen wir JavaScript hinzufügen, das ausgeführt wird, wenn das DOM bereit ist, das die Modalbox an unseren Link anfügt. Wenn der Benutzer auf den Anmeldelink klickt, führt der Browser ein GET zu/user_sessions/new durch, das das Anmeldeformular enthält. Der Login-Link verwendet den Selektor #Login-Link. Aktualisieren Sie den Anmeldelink, um die neue ID in /app/views/users/index.html.erb zu verwenden. Ändern Sie die Funktion link_to folgendermaßen:

1
<%= link_to 'Login', new_user_session_path, :id => 'login-link' %>

Das gibt uns einen #Login-Link. Nun soll das JavaScript eine Modalbox anhängen. Fügen Sie diese JS in /public/JavaScripts/application.js hinzu

1
document.observe('dom:loaded', function() {
2
    $('login-link').observe('click', function(event) {
3
        event.stop();
4
        Modalbox.show(this.href,
5
            {title: 'Login', 
6
            width: 500}
7
        );
8
    });
9
})

Es gibt einige einfache JS, wenn der Benutzer auf den Link klickt, wird ein modales Feld mit der href des Links geöffnet. Weitere Informationen finden Sie in der Modalbox-Dokumentation. Hier ist ein Screenshot:

Initial ModalboxInitial ModalboxInitial Modalbox

Beachten Sie, dass das Innere der Modalbox unserer Standardseite sehr ähnlich sieht. Rails verwendet unser Anwendungslayout für alle HTML-Antworten. Da unsere XHRs HTML-Fragmente möchten, ist es sinnvoll, ohne Layouts zu rendern. Beziehen Sie sich auf die Beispielsteuerung. Ich habe eine Methode zur Bestimmung des Layouts eingeführt. Fügen Sie dies zu UserSessionsController hinzu, um das Layout für XHRs zu deaktivieren.

1
class UserSessionsController < ApplicationController  
2
  layout :choose_layout
3
4
  def new
5
    @user_session = UserSession.new
6
  end
7
8
  def create
9
    @user_session = UserSession.new(params[:user_session])
10
    if @user_session.save
11
      flash[:notice] = "Login successful!"
12
      redirect_to user_path
13
    else
14
      render :action => :new
15
    end
16
  end
17
18
  def destroy
19
    current_user_session.destroy
20
    flash[:notice] = "Logout successful!"
21
    redirect_to root_path
22
  end
23
24
  private
25
  def choose_layout
26
    (request.xhr?) ? nil : 'application'
27
  end
28
end

Aktualisieren Sie die Seite und klicken Sie auf den Link, um Folgendes zu erhalten:

Without LayoutWithout LayoutWithout Layout

Füllen Sie das Formular aus und sehen Sie, was passiert. Wenn Sie das von mit schlechten Informationen ausfüllen, werden Sie außerhalb des Modalfelds umgeleitet. Wenn Sie sich korrekt anmelden, werden Sie normal umgeleitet. Entsprechend den Anforderungen sollte der Benutzer in der Lage sein, das Formular immer wieder in der Modalbox auszufüllen, bis er sich korrekt anmeldet. Wie können wir das erreichen? Wie zuvor beschrieben, müssen wir AJAX verwenden, um Daten an den Server zu senden, und dann JavaScript verwenden, um die modale Box mit dem Formular zu aktualisieren oder eine Umleitung durchzuführen. Wir wissen, dass die Modalbox ein GET für HTML ausführt. Nach dem Anzeigen der anfänglichen Modalbox müssen wir JS schreiben, damit sich das Formular im AJAX-Stil selbst übermittelt. Dadurch kann sich das Formular innerhalb der Modalbox einreichen. Das einfache Hinzufügen dieses Codes nach dem Aufruf der Modalbox funktioniert nicht, da die XHR möglicherweise noch nicht fertig ist. Wir müssen den AfterLoad-Rückruf von Modalbox verwenden. Hier ist der neue Code:

1
document.observe('dom:loaded', function() {
2
    $('login-link').observe('click', function(event) {
3
        event.stop();
4
        Modalbox.show(this.href,
5
            {title: 'Login', 
6
            width: 500,
7
            afterLoad: function() {
8
                $('new_user_session').observe('submit', function(event) {
9
                    event.stop();
10
                    this.request();
11
                })
12
            }}
13
        );      
14
    });
15
})

Form #request ist eine bequeme Methode zum Serialisieren und Senden des Formulars über Ajax.Request an die URL des Aktionsattributs des Formulars - genau das, was wir wollen. Jetzt können Sie das Formular innerhalb des Modals ausfüllen, ohne es zu schließen. Die Client-Seite ist jetzt abgeschlossen. Was ist mit der Serverseite? Der Client sendet einen POST, in dem JS zurückgegeben werden soll. Der Server muss entweder JavaScript zurückgeben, um das Formular zu aktualisieren, oder eine Umleitung rendern. Im UserSessionsController verwenden wir reply_to, um die JS-Anforderung zu verarbeiten, und eine Bedingung, um das richtige JS zurückzugeben. Beginnen wir mit der Behandlung des fehlgeschlagenen Anmeldefalls. Der Server muss JS zurückgeben, das das Formular aktualisiert, und das neue Formular anweisen, es über Ajax zu senden. Wir platzieren diese Vorlage in /app/views/users_sessions/create.js.erb. Hier ist die Struktur für die neue Erstellungsaktion:

1
def create
2
  @user_session = UserSession.new(params[:user_session])
3
  if @user_session.save
4
    flash[:notice] = "Login successful!"
5
    redirect_to user_path
6
  else
7
    respond_to do |wants|
8
      wants.html { render :new }
9
      wants.js # create.js.erb

10
    end
11
  end
12
end

Füllen wir nun create.js.erb aus:

1
$('MB_content').update("<%= escape_JavaScript(render :partial => 'form') %>");
2
Modalbox.resizeToContent();
3
$('new_user_session').observe('submit', function(event) {
4
    event.stop();
5
    this.request();
6
});

Zuerst aktualisieren wir den Inhalt, um das neue Formular aufzunehmen. Dann ändern wir die Größe der Modalbox. Als nächstes ajaxifizieren wir das Formular wie zuvor. Voilla, Sie können das Formular so oft ausfüllen, wie Sie möchten.

Bad InfoBad InfoBad Info
Updated FormUpdated FormUpdated Form

Als nächstes müssen wir den Umleitungsfall behandeln. Erstellen Sie eine neue Datei in /app/views/users_sessions/redirect.js.erb:

1
2
  window.location=<%= user_path %>;

Aktualisieren Sie jetzt die Erstellungsaktion, um den Umleitungsprozess zu handhaben:

1
def create
2
  @user_session = UserSession.new(params[:user_session])
3
  if @user_session.save
4
    respond_to do |wants|
5
      wants.html do 
6
        flash[:notice] = "Login successful!"
7
        redirect_to user_path
8
      end
9
10
      wants.js { render :redirect }
11
    end
12
  else
13
    respond_to do |wants|
14
      wants.html { render :new }
15
      wants.js # create.js.erb

16
    end
17
  end
18
end

Und das ist es! Versuchen Sie nun, sich mit den richtigen Anmeldeinformationen anzumelden, und Sie werden zur privaten Seite weitergeleitet. Versuchen Sie zum weiteren Lernen, einen Drehfeld und eine Benachrichtigung hinzuzufügen, die dem Benutzer mitteilen, dass das Formular gesendet wird oder dass er umgeleitet wird. Die Anwendung funktioniert weiterhin, wenn für den Benutzer auch JavaScript deaktiviert ist.

jQuery

Da ich den Prototyp-Prozess bereits behandelt habe, werde ich nicht mehr auf die gleichen Details wie zuvor eingehen. Stattdessen werde ich schnell das alternative JavaScript beschreiben, das der Anwendung hinzugefügt werden soll. Die jQuery-Version hat genau die gleiche Struktur wie die Prototype-Version. Alles, was wir ändern müssen, ist, was in application.js, create.js.erb und in JavaScript/css enthalten ist.

Als erstes müssen wir jQuery und Facebox herunterladen. Verschieben Sie jQuery als jquery.js in/public/JavaScripts. Verschieben Sie für Facebox die Bilder in/public/images /, Stylesheets in/public/stylesheets und schließlich die JS in/public/JavaScripts. Aktualisieren Sie nun /app/views/layouts/application.html.erb, um die Änderungen widerzuspiegeln:

1
<head>
2
  <title><%= h(yield(:title) || "Untitled") %></title>

3
  <%= stylesheet_link_tag 'facebox' %>
4
  <%= stylesheet_link_tag 'application' %>    

5
  <%= JavaScript_include_tag 'jquery' %>
6
  <%= JavaScript_include_tag 'facebox' %>

7
  <%= JavaScript_include_tag 'application' %>
8
</head>

Facebox wird mit einem Standard-Stylesheet geliefert, das davon ausgeht, dass Sie Ihre Bilder in/facebox haben. Sie müssen diese Selektoren in facebox.css folgendermaßen aktualisieren:

1
#facebox .b {
2
  background:url(/images/b.png);
3
}
4
5
#facebox .tl {
6
  background:url(/images/tl.png);
7
}
8
9
#facebox .tr {
10
  background:url(/images/tr.png);
11
}
12
13
#facebox .bl {
14
  background:url(/images/bl.png);
15
}
16
17
#facebox .br {
18
  background:url(/images/br.png);
19
}

Jetzt hängen wir die Facebox an den Login-Link an. Öffnen Sie /public/JavaScripts/application.js und verwenden Sie Folgendes:

1
$(document).ready(function() {
2
    $('#login-link').facebox({
3
        loadingImage : '/images/loading.gif',
4
    closeImage   : '/images/closelabel.gif',
5
    });
6
});

Ich überschreibe die Standardeinstellungen für die Bilder, um den neuen Bildpfad wiederzugeben. Starten Sie den Server und gehen Sie zur Indexseite. Sie sollten eine schöne Facebox mit dem Anmeldeformular sehen:

FaceboxFaceboxFacebox

Als nächstes müssen wir das Formular so einstellen, dass es sich über AJAX selbst übermittelt. Wie zuvor müssen wir Rückrufe verwenden, um Code auszuführen, nachdem die Modalbox fertig ist. Wir verwenden die Post-Methode von jQuery für die XHR-Anforderung. Facebox hat einen After-Enthüllungs-Haken, den wir verwenden können. application.js:

1
$(document).ready(function() {
2
    $('#login-link').facebox({
3
        loadingImage : '/images/loading.gif',
4
        closeImage   : '/images/closelabel.gif',
5
    });
6
7
    $(document).bind('reveal.facebox', function() {
8
        $('#new_user_session').submit(function() {
9
            $.post(this.action, $(this).serialize(), null, "script");
10
            return false;
11
        });
12
    });
13
});

Das Aktualisieren von create.js.erb sollte einfach genug sein. Wir müssen den Inhalt der Facebox aktualisieren und das Formular erneut bestätigen. Hier ist der Code:

1
$('#facebox .content').html("<%= escape_JavaScript(render :partial => 'form') %>");
2
$('#new_user_session').submit(function() {
3
    $.post(this.action, $(this).serialize(), null, "script");
4
    return false;
5
});

Und das ist es! Hier ist das Endprodukt:

Logging InLogging InLogging In
Bad LoginBad LoginBad Login
RedirectedRedirectedRedirected

Code herunterladen

Den Code erhalten Sie hier. Für jede Bibliothek gibt es Zweige, sodass Sie die Prototype- oder jQuery-Versionen überprüfen können. Fragen, Kommentare, Bedenken? Nochmals vielen Dank für das Lesen!

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um die besten Webentwicklungs-Tutorials im Web zu erhalten.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.