So richten Sie die Benutzerauthentifizierung mit Devise in einer Rails 7-Anwendung ein

Der Autor hat Girls Who Code ausgewählt, um im Rahmen des Write for Donations-Programms eine Spende zu erhalten.

Einführung

Das Devise-Gem ist eine Authentifizierungslösung für Ruby on Rails-Anwendungen. Es hilft Ihnen dabei, benutzerfreundliche Authentifizierung für Ihre Projekte einzurichten, ohne alles selbst erledigen zu müssen. Devise bietet viele nützliche Funktionen wie die Verwaltung von Benutzersitzungen und die Unterstützung von Drittanbieter-Anmeldungen mit OAuth mithilfe des OmniAuth-Gems. Devise verfügt auch über integrierte Module für Funktionen wie das Zurücksetzen vergessener Passwörter, das Verfolgen von Anmeldeversuchen und Zeitstempeln, das Definieren von Timeouts, das Sperren von Konten usw.

Mit Devise wird die Benutzerauthentifizierung so einfach wie das Initialisieren des Gems und das Erstellen eines User-Modells mit den erforderlichen Funktionen. Wenn Sie die Benutzerauthentifizierung von Grund auf neu erstellen müssten, müssten Sie Code und Tests für alle gewünschten Funktionen schreiben und alle Randfälle beim Umgang mit Sitzungen, dem Speichern von Cookies und der Sicherung der Daten behandeln. Durch die Verwendung des Devise-Gems vermeiden Sie das selbst und können sich stattdessen auf den Aufbau Ihrer App konzentrieren.

In diesem Tutorial erstellen Sie eine minimale Webanwendung mit Rails und installieren Devise, mit dem Benutzer Konten erstellen, sich anmelden und sich von ihren Konten abmelden können.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

• A local development environment for Ruby on Rails. For Linux, you can follow our tutorial How To Install Ruby on Rails with rvm on Ubuntu 20.04 or use the rvm product docs for installing on Mac or Windows. You can also refer to the Ruby project docs to install Ruby directly in your system. To install the Rails gem, you can use the official Rails documentation. The Devise gem requires Ruby version 2.1.0 or greater; this tutorial was tested using Ruby version 3.0.2 and Rails version 7.0.3.
• Node.js auf Ihrem Rechner installiert. Einige Rails-Funktionen, wie der Asset Pipeline, hängen von einem JavaScript-Laufzeitumgebung ab. Node.js stellt diese Funktionalität bereit. Für Ubuntu installieren Sie Node.js über das offizielle PPA, wie in Option 2 von Anleitung zur Installation von Node.js unter Ubuntu 20.04 erklärt. Für Mac OS folgen Sie unserer Anleitung Wie man Node.js installiert und eine lokale Entwicklungsumgebung auf MacOS erstellt.
• Vertrautheit mit Ruby und dem Ruby on Rails Framework. Sie können sich die ersten Tutorials unserer Serie Rails on Containers ansehen, oder Sie können die offiziellen Rails Guides verwenden.

Schritt 1 — Erstellen einer neuen Rails-Anwendung

In diesem Schritt erstellen Sie eine neue Rails-Anwendung und führen sie lokal auf Ihrem Rechner aus. Sie werden das Befehlszeilenprogramm rails verwenden, um das Projekt zu initialisieren.

Führen Sie den folgenden Befehl von einem Terminal aus:

rails new blog

Der Befehl rails new erstellt ein neues Rails-Projekt im Verzeichnis blog, das eine Reihe generierter Dateien und Ordner enthält. Einer davon ist die Gemfile, die die Abhängigkeiten des Projekts enthält. Sie werden die Gemfile konfigurieren, um Devise in Schritt 3 — Installieren und Konfigurieren von Devise zu verwenden.

Sie können dieses Verzeichnis in Ihrem bevorzugten Texteditor öffnen oder über das Terminal darauf zugreifen:

cd blog

Um die Rails-Anwendung zu starten, starten Sie den Entwicklungsserver mit dem Befehl rails server aus dem Projektverzeichnis:

bundle exec rails server

Dieser Befehl startet den Rails-Entwicklungsserver. Öffnen Sie http://localhost:3000 in Ihrem Browser, um auf die Rails-Begrüßungsseite zuzugreifen. Rails verwendet den Port 3000, um die Anwendung auszuführen, wenn Sie keine alternative Portnummer angegeben haben.

Sie haben nun eine neue Rails-Anwendung initialisiert, zu der Sie später eine Benutzerauthentifizierung hinzufügen werden. Im nächsten Schritt werden Sie die Standard-Homepage, die Rails bereitstellt, durch eine benutzerdefinierte Landingpage ersetzen, was es einfacher macht, durch die Beispielanwendung zu navigieren, sobald Sie Devise hinzugefügt haben. Nachdem Sie eine neue Landingpage erstellt haben, fügen Sie Links hinzu, damit Benutzer sich in der Anwendung registrieren und anmelden können.

Schritt 2 — Erstellen einer Landingpage

Da Sie jetzt eine grundlegende Rails-Anwendung haben, werden Sie die Standardseite, die Rails bereitstellt, durch Ihre eigene Landingpage ersetzen. Eine benutzerdefinierte Landingpage erleichtert es, dem Benutzer Links zum Anmelden und Anmelden an der Root-URL der Anwendung anzuzeigen. Sie werden Links zum Anmelden und Registrieren in späteren Schritten hinzufügen.

Um Ihre Landingpage zu erstellen, müssen Sie Folgendes tun:

• Fügen Sie die Route in die Datei config/routes.rb hinzu.
• Erstellen Sie einen HomeController, der die Anfragen an diese Route behandelt.
• Erstellen Sie eine Ansichtsdatei, die gerendert wird, wenn Sie die Route aufrufen.

Sie beginnen damit, den Root-Pfad zur Datei routes.rb hinzuzufügen, die generiert wurde, als Sie das Projekt erstellt haben.

Öffnen Sie mit nano oder Ihrem bevorzugten Texteditor die Datei config/routes.rb, die zuvor generiert wurde:

nano config/routes.rb

Fügen Sie die hervorgehobene Zeile hinzu:

Rails.application.routes.draw do
  root to: "home#index" 
end

root to: definiert, welche Controlleraktion Anfragen an den Root-Pfad behandelt – in diesem Fall wird die Route http://localhost:3000 sein, was der Standardport für Rails-Apps ist. Die Anfragen an diese Route werden von der Aktion index im Controller home behandelt. Diese Datei existiert jetzt nicht, also erstellen Sie als nächstes die Datei app/controllers/home_controller.rb.

Speichern und schließen Sie config/routes.rb. Verwenden Sie nano, drücken Sie CTRL+X zum Beenden, Y zum Speichern und ENTER zur Bestätigung des Dateinamens und zum Schließen der Datei.

Erstellen Sie als nächstes die Datei app/controllers/home_controller.rb und fügen Sie die folgenden Zeilen hinzu:

class HomeController < ApplicationController
  def index
    render
  end
end

Dies ist ein einfacher HomeController mit einer index-Methode, die eine Sache tut: die Ansichtsdatei rendern, die mit der Controlleraktion verknüpft ist.

In diesem Fall wird die Ansichtsdatei die Datei app/views/home/index.html.erb sein. Sie müssen diese Datei sowie das Verzeichnis home im Verzeichnis app/views erstellen.

Speichern und schließen Sie die Datei des home-Controllers.

Als nächstes erstellen Sie das Verzeichnis home im Verzeichnis app/views:

mkdir app/views/home/

Das Verzeichnis home wird alle Ansichten für einen bestimmten Rails-Controller enthalten.

Dann erstellen Sie die Datei app/views/home/index.html.erb und fügen Sie die folgenden Zeilen hinzu:

<h1>Hello DigitalOcean!</h1>

app/views/home/index.html.erb ist die Ansichtsdatei, die die Aktion index des Controllers Home rendern wird. Dies ist eine HTML-Datei, in der Sie Ruby-Code einbetten können. Wenn die für die bestimmte Controller-Aktion definierte Route ausgelöst wird, wird diese Ansichtsdatei im Browser des Benutzers gerendert.

Speichern und schließen Sie Ihre Datei.

Um die Änderungen in der Root-URL zu sehen, öffnen Sie http://localhost:3000 in Ihrem Browser (oder aktualisieren Sie die Seite, wenn sie bereits geöffnet ist). Die aktualisierte Startseite wird ähnlich aussehen wie diese:

Sie können diese Seite weiter anpassen, wenn nötig, aber dies ist alles, was für dieses Tutorial benötigt wird.

Jetzt, da Sie eine einfache Rails-Anwendung mit ihrer eigenen Startseite haben, werden Sie die Benutzerauthentifizierung mit dem Devise-Gem hinzufügen.

Schritt 3 — Installation und Konfiguration von Devise

In diesem Schritt installieren und konfigurieren Sie Devise in Ihrer Rails-Anwendung, damit Sie die Methoden und Hilfsprogramme verwenden können, die mit dem Gem geliefert werden. Sie werden die Methode user_signed_in? verwenden, um die Sitzungsinformationen eines angemeldeten Benutzers zu überprüfen, die in den Browser-Cookies gespeichert sind. Sie werden auch den Hilfsprogramm current_user verwenden, um die Details des gerade angemeldeten Kontos zu erhalten. Beide Methoden sind in Devise integriert und Sie können sie direkt in Ihrer Anwendung verwenden, ohne zusätzlichen Code schreiben zu müssen. Weitere Informationen zu diesen Hilfsmethoden finden Sie auf der GitHub-Seite des Devise-Projekts.

Der erste Schritt zur Installation von Devise besteht darin, das Gem zur Gemfile hinzuzufügen, die Informationen über alle Abhängigkeiten enthält, die für das Ausführen Ihres Ruby-Projekts erforderlich sind. In diesem Fall enthält die beim Initialisieren der Rails-Anwendung generierte Gemfile bereits alle grundlegenden Gems, die für das Ausführen von Rails erforderlich sind.

Aber bevor Sie Änderungen an Ihrer Gemfile vornehmen, stoppen Sie den Entwicklungsserver, den Sie im letzten Schritt gestartet haben, indem Sie CTRL+C in der Terminal eingeben, in dem er ausgeführt wird.

Dann öffnen Sie Ihre Gemfile zum Bearbeiten. Um das Devise-Gem hinzuzufügen, fügen Sie die markierte Zeile am Ende der Datei ein, jedoch außerhalb der development und test Gruppen:

# ...

# Reduziert die Boot-Zeiten durch Caching; erforderlich in config/boot.rb
gem "bootsnap", require: false

# Verwenden von Active Storage-Varianten [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

gem "devise" 

group :development, :test do
  # Siehe https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

# ...

Speichern und schließen Sie Ihre Datei.

Als nächstes installieren Sie das neu hinzugefügte Gem, indem Sie den Befehl bundle install im Terminal ausführen. Aus Ihrem Projektverzeichnis (blog) führen Sie den folgenden Befehl aus:

bundle install

Dieser Befehl installiert das Devise-Gem in Ihrem Projekt, das es Ihnen ermöglicht, den Befehl devise mit dem Befehlszeilen-Dienstprogramm rails zu verwenden und die Authentifizierung zu konfigurieren.

Um Devise in Ihrem Projekt einzurichten, führen Sie den Generierungsbefehl aus:

bundle exec rails g devise:install

Die Flagge g in dem obigen Befehl steht für generate und wird verwendet, um Rails-Generatoren aufzurufen. Generatoren erstellen Dateien, die als Ausgangspunkt dienen können. Sie können die Rails-Leitfäden für weitere Informationen zu Rails-Generatoren lesen.

Der vorherige Befehl wird mehrere Dateien generieren, einschließlich der Initialisierungsdatei und der i18n-Lokalisierungsdatei für Devise. Die Initialisierungsdatei, die unten detailliert erklärt wird, wird verwendet, um Devise zu konfigurieren, wenn Sie die App zum ersten Mal starten. i18n steht für Internationalisierung, was ein Standard ist, um Ihnen zu helfen, Ihre App in verschiedenen Sprachen auszuführen.

Zu diesem Zeitpunkt werden auch einige Anweisungen im Terminal ausgegeben, wie folgt:

Output
===============================================================================

Depending on your application's configuration some manual setup may be required:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

     * Required for all applications. *

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

     * Not required for API-only Applications *

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

     * Not required for API-only Applications *

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

     * Not required *

===============================================================================

Obwohl diese manuelle Einrichtung für dieses Tutorial nicht erforderlich ist, werden Sie später in diesem Schritt Flash-Nachrichten für notice und alert hinzufügen.

Sie haben Devise erfolgreich installiert. Als nächstes müssen Sie einige Dinge in der gerade generierten Devise-Initialisierungsdatei konfigurieren.

Als Sie den Befehl devise:install ausgeführt haben, haben Sie die Datei config/initializers/devise.rb generiert, die die Initialisierungsdatei für Devise ist. Wenn Sie Ihre Rails-Anwendung starten, lädt Rails alle Gems und Plugins und dann alle Initialisierungsdateien. Sie können spezifische Einstellungen für verschiedene Teile Ihrer Anwendung aus diesen Initialisierungsdateien konfigurieren. Alle diese Initialisierungsdateien befinden sich im Verzeichnis config/initializers/, und dort erstellt auch das Devise-Gem seine Initialisierungsdatei.

Öffnen Sie config/initializers/devise.rb zum Bearbeiten. Suchen Sie in der Datei den Block Devise.setup und fügen Sie die folgende hervorgehobene Zeile hinzu (es können auch andere Codeblöcke innerhalb des Devise.setup-Blocks vorhanden sein, aber die können Sie ignorieren):

Devise.setup do |config|
  # ...

  config.navigational_formats = ['*/*', :html, :turbo_stream]

  # ...
end

Diese Zeile fügt turbo_stream als Navigationsformat hinzu. Turbo Streams sind Teil von Turbo, mit dem Sie servergerendertes HTML senden und Seiten ohne viel JavaScript rendern können. Sie müssen dies für Devise 4.8.1 hinzufügen, um mit Rails 7 zu funktionieren; Andernfalls erhalten Sie einen undefined method user_url Fehler.

Speichern und schließen Sie die Datei.

Als nächstes fügen Sie auch die Hinweis- und Warnungs-Flash-Nachrichten hinzu, die in den zuvor gedruckten Anweisungen hervorgehoben wurden. Die alert– und notice-Tags sind dort, wo Meldungen wie „Falsches Passwort“ und Ähnliches in der Benutzeroberfläche erscheinen würden. Sie können jederzeit benutzerdefinierte Warnmeldungen in Ihrer Anwendung implementieren (z. B. wenn Sie Axios-Interceptoren mit React als Frontend verwenden), aber für dieses Tutorial werden Sie das absolut notwendige Devise-Setup vervollständigen.

Öffnen Sie app/views/layouts/application.html.erb zum Bearbeiten. Fügen Sie die Tags für die "notice"– und "alert"-Meldungen innerhalb des Body-Tags ein, direkt über <%= yield %>:

...
<body>
  <p class="notice"><%= notice %></p> 
  <p class="alert"><%= alert %></p> 
  <%= yield %>
</body>

Wenn die Ansicht im Browser gerendert wird, wird der <%= yield %>-Block durch den Inhalt Ihrer Ansichtsdateien ersetzt. In Ihrer Ansichtsdatei hatten Sie nur den p-Tag. Dieses Yield-Tag wird durch diesen Inhalt ersetzt.

Speichern und schließen Sie Ihre Datei.

In diesem Schritt haben Sie Devise in Ihrem Projekt installiert und konfiguriert. Im nächsten Schritt werden Sie das Benutzermodell für Ihre Anwendung mit Devise erstellen und die Benutzerauthentifizierung einrichten.

Schritt 4 – Erstellen des Benutzermodells mit Devise

Sie sind nun bereit, das Benutzermodell mit Devise zu generieren. Dadurch wird die erforderliche Modelldatei erstellt und eine Migration generiert, die Sie ausführen können, um eine Tabelle „Benutzer“ in Ihrer Anwendung zu erstellen. Immer wenn sich jemand anmeldet, müssen Sie einen neuen Datensatz in der Tabelle „Benutzer“ in der Datenbank erstellen. Mit dem Benutzermodell können Sie diese Datensätze von Ihrer Frontend-Ansicht aus manipulieren.

In diesem Schritt werden Sie ein Benutzermodell generieren, die Standardkonfiguration überprüfen und dann die Migration ausführen, um Ihre Datenbank zu aktualisieren.

Da Rails ein Modell-View-Controller (MVC)-Framework ist, gibt es für jede Datenbanktabelle eine zugehörige Klasse, die verwendet werden kann, um mit den Daten in der Tabelle zu arbeiten. In diesem Fall können Sie, wenn Sie eine Tabelle „Benutzer“ erstellen, das Modell „User“ verwenden, um Operationen wie „User.first“ oder „User.find_by_email(„[email protected]“)“ durchzuführen. Sie können dieses Modell erstellen, indem Sie eine normale Klasse erzeugen, die von „ApplicationRecord“ in Rails erbt. Das Generieren eines Benutzermodells mit Devise bietet jedoch viele Methoden, die Sie für die Authentifizierung verwenden können.

Um Ihren Devise-Benutzer zu erstellen, führen Sie den folgenden Generatorbefehl aus:

bundle exec rails g devise user

Die folgende Ausgabe wird auf dem Bildschirm angezeigt:

Output
invoke  active_record
create    db/migrate/20220908152949_devise_create_users.rb
create    app/models/user.rb
invoke    test_unit
create      test/models/user_test.rb
create      test/fixtures/users.yml
insert    app/models/user.rb
route  devise_for :users

Die Ausgabe zeigt, dass Devise mehrere Dateien generiert, Tests erstellt und Routen hinzugefügt hat. Die erste Datei, db/migrate/20220908152949_devise_create_users.rb, ist eine Migrationsdatei zur Erstellung der Tabelle users in Ihrer Datenbank. Eine Rails-Migrationsdatei beschreibt die Änderungen, die in der Datenbank vorgenommen werden müssen. Der Dateiname jeder Migration enthält einen Zeitstempel, damit Rails weiß, in welcher Reihenfolge diese Änderungen vorgenommen werden sollen.

Devise hat auch die Benutzermodelldatei (app/models/user.rb) erstellt, zusammen mit Tests dafür. Die letzte Zeile der Ausgabe zeigt an, dass eine Route zur vorhandenen Datei config/routes.rb hinzugefügt wurde. Devise fügt automatisch alle Routen wie /users/sign_up und /users/sign_out mithilfe des Helfers devise_for :users hinzu.

Bevor Sie die Migrationsdatei ausführen und die Tabelle users in der Datenbank erstellen, werfen wir einen Blick auf diese generierten Dateien. Dadurch können Sie die von Devise generierte Konfiguration verstehen, damit Sie wissen, was passiert, wenn Sie die Migration ausführen.

Öffnen Sie zunächst die Migrationsdatei (db/migrate/20220908152949_devise_create_users.rb), um den Standardcode zu überprüfen:

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      ## Authentifizierung der Datenbank
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Wiederherstellbar
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Merkbar
      t.datetime :remember_created_at

      ## Rückverfolgbar
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Bestätigung
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Nur bei Verwendung von Reconfirmable

Devise enthält viele nützliche Optionen, wie zum Beispiel Felder für das Passwort-Reset-Token und die Zeit des letzten Token-Versands usw. Es gibt auch Zeilen für Funktionen wie die E-Mail-Bestätigung, das Sperren des Benutzers nach fehlgeschlagenen Anmeldeversuchen und sogar das Verfolgen der Details der Anmeldung.

Da Sie keine Änderungen vornehmen müssen, schließen Sie die Migrationsdatei.

Devise hat auch die User-Modelldatei generiert. Diese wird im Verzeichnis app/models/ verfügbar sein.

Öffnen Sie die Datei app/models/user.rb, um den Standardcode zu überprüfen:

class User < ApplicationRecord
# Standard-Devise-Module einbeziehen. Andere verfügbare Module sind:
# :confirmable, :lockable, :timeoutable, :trackable und :omniauthable
devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable
end

A few options are added by Devise to configure how the user model works. The basic modules (database_authenticatable, registerable, recoverable, rememberable, and validatable) are already included. There are some additional options commented out, corresponding to the extra features you saw in the migration file. You can add these modules to the model file and configure the migration, depending on how much functionality you need in your application.

Dies ist, was die grundlegenden Module tun:

• database_authenticatable: Benutzer können sich mit einem Login- und Passwortfeld authentifizieren. Ihr verschlüsseltes Passwort wird in Ihrer Datenbank gespeichert.
• registerable: Benutzer können sich registrieren und ihre Konten bearbeiten oder löschen.
• recoverable: Benutzer können ihr Passwort zurücksetzen und ihre Konten wiederherstellen, wenn sie ihre Anmeldeinformationen vergessen haben.
• rememberable: Dieses Modul merkt sich die Sitzungen eines Benutzers, indem es die Informationen in einem Browser-Cookie speichert.
• validatable: Dieses Modul bietet Validierungen für die E-Mail- und Passwortfelder des Benutzers. (Zum Beispiel verlangt Ihre Anwendung, dass das Passwort mindestens sechs Zeichen lang ist, obwohl Sie keine benutzerdefinierten Validierungen in Ihrem Modell definiert haben.)

Diese grundlegenden Module sind im gerade generierten Benutzermodell enthalten. Eine vollständige Liste der mit Devise gelieferten Module finden Sie im Devise GitHub-Repository.

Sie müssen keine Änderungen vornehmen, schließen Sie daher die User-Modelldatei.

Eine weitere Aktualisierung besteht darin, dass die Datei config/routes.rb geändert wurde, um eine Zeile devise_for für users hinzuzufügen:

Rails.application.routes.draw do
  devise_for :users

  root "home#index"
end

Dies ist eine nützliche Methode, die alle erforderlichen Routen im Zusammenhang mit der Benutzerauthentifizierung definiert, wie /users/sign_in, /users/sign_out und /users/password/new. Devise kümmert sich um all das für Sie und hält sogar die Routendatei sauber. Wenn Sie verstehen möchten, wie das Hinzufügen von devise_for :users automatisch zu all diesen Routen führt, können Sie den Quellcode für die Methode im Devise GitHub-Repository überprüfen.

Sie müssen hier keine Änderungen vornehmen, daher schließen Sie die Datei config/routes.rb.

Um herauszufinden, welche Routen in Ihrer Anwendung definiert sind, können Sie sie anzeigen, indem Sie den folgenden Befehl ausführen:

bundle exec rails routes

Dieser Befehl gibt alle Anwendungsrouten und die Controller aus, mit denen diese Routen verarbeitet werden. Im Fall der Authentifizierung wurden all diese Routen von Devise erstellt, und Sie mussten sie nicht manuell hinzufügen.

Die Ausgabe wird lang sein, aber hier ist ein Ausschnitt, der einige der Routen zeigt:

Die in der Ausgabe aufgeführten Routen sind die Routen, die von Devise hinzugefügt wurden, als Sie die Zeile devise_for :users in Ihrer Routendatei eingefügt haben. Dies sind die Routen für Aktionen wie anmelden, registrieren, Passwort zurücksetzen usw.

Jetzt, da Sie die von Devise generierten Dateien und Konfigurationen überprüft haben, können Sie die Migration ausführen, die Sie zu Beginn dieses Schritts generiert haben, mit dem folgenden Befehl:

bundle exec rails db:migrate

Der obige Befehl wird alle Änderungen in jeder der Migrationsdateien in Ihrer Datenbank vornehmen. Die Änderungen müssen nacheinander vorgenommen werden, genau wie sie in den Dateien definiert sind. Rails muss die Reihenfolge kennen, in der die Migrationen ausgeführt werden sollen, weshalb die Dateien mit Zeitstempeln in ihren Namen erstellt werden.

Ausgaben wie die folgenden werden auf dem Bildschirm angezeigt:

Output
== 20220908152949 DeviseCreateUsers: migrating ================================
-- create_table(:users)
 -> 0.0040s
-- add_index(:users, :email, {:unique=>true})
 -> 0.0012s
-- add_index(:users, :reset_password_token, {:unique=>true})
 -> 0.0011s
== 20220908152949 DeviseCreateUsers: migrated (0.0074s) =======================

Nachdem die Migration ausgeführt wurde, ist Ihre Datenbank eingerichtet. Sie haben alles erledigt, was Sie für die Einrichtung der Benutzerauthentifizierung in Ihrem Projekt benötigen.

An diesem Punkt starten Sie Ihren Rails-Server neu:

bundle exec rails server

Die oben erwähnte Initialisierungsdatei wird nur geladen, wenn Rails gestartet wird. Sie müssen den Server neu starten, damit Rails die neue Devise-Initialisierungsdatei laden und alles für die Benutzerauthentifizierung einrichten kann.

Gehen Sie in Ihrem Browser zu http://localhost:3000/users/sign_up, wo Sie ein Anmeldeformular finden, um ein Konto zu erstellen, indem Sie eine E-Mail und ein Passwort eingeben. (Im nächsten Schritt fügen Sie Buttons zum Anmelden und Anmelden auf der Startseite hinzu, damit es für den Leser einfacher ist, zu dieser URL zu navigieren.)

Um die Authentifizierung zu testen, geben Sie eine Test-E-Mail wie [email protected] und ein Passwort ein.

Sobald Sie sich angemeldet haben, werden Sie zur Startseite weitergeleitet, die Hallo DigitalOcean! anzeigt, sowie eine Nachricht, die besagt, dass Sie sich erfolgreich angemeldet haben, wie folgt:

Diese Anmeldungsbestätigung wird im <p class="notice"><%= notice %></p> Tag gerendert, den Sie in der application.html.erb Datei hinzugefügt haben.

Zu diesem Zeitpunkt haben Sie die Benutzerauthentifizierung mit Devise in Ihrem Projekt konfiguriert und sich mit einem Musterkonto angemeldet. Sie haben Devise so konfiguriert, dass es den Anforderungen Ihrer Anwendung entspricht, während Devise die Routen, Ansichten und Controller generiert hat, die diese Benutzeranmeldeerfahrung erleichtern.

Jetzt, da Sie bestätigt haben, dass der Anmeldeprozess wie erwartet funktioniert, ist Ihr nächster Schritt, diese Authentifizierung zur Startseite hinzuzufügen, die Sie in Schritt 2 erstellt haben. Im nächsten Schritt verknüpfen Sie die Anmeldeseite mit der Startseite, sodass Benutzer nicht zu einer bestimmten URL navigieren müssen, um sich anzumelden, wie Sie es hier tun mussten.

Schritt 5 — Verknüpfung der Authentifizierung mit der Startseite

Sie haben alle Funktionen in Ihrem Projekt eingerichtet, müssen jedoch immer noch die von Devise erstellten Seiten mit Ihrer Landingpage verbinden. In Schritt zuvor haben Sie manuell die Seite /users/sign_up besucht, um sich anzumelden. In diesem Schritt verknüpfen Sie alle Seiten, indem Sie die erforderlichen Links zu Ihrer Landingpage hinzufügen. Außerdem zeigen Sie den Benutzern bedingt, basierend auf ihrem Status, Links zum Anmelden oder Abmelden aus der Anwendung an.

Sie erreichen dies mit einigen Hilfsmethoden von Devise. Die Devise-Bibliothek enthält viele Hilfsmethoden, die Sie verwenden können, ohne alles selbst implementieren zu müssen. Dadurch wird der Code einfacher zu lesen und zu warten.

Sie beginnen damit, Code hinzuzufügen, um zu überprüfen, ob der Benutzer angemeldet ist. Wenn ja, wird die Landingpage ihre E-Mail-Adresse und einen Link zum Abmelden aus der Anwendung anzeigen. Wenn der Benutzer nicht angemeldet ist, wird die Landingpage einen Link zur Anmeldeseite anzeigen.

Öffnen Sie die Datei app/views/home/index.html.erb zum Bearbeiten und fügen Sie die markierten Zeilen hinzu:

<% if user_signed_in? %> 
 <div> Welcome <%= current_user.email %> </div> 
  <%= button_to "Sign out", destroy_user_session_path, method: :delete %> 
<% else %>
  <%= button_to "Sign in", new_user_session_path %> 
<% end %>
<h1>Hello DigitalOcean!</h1>

user_signed_in? stammt aus den Hilfsmethoden, die mit den Controllern von Devise verbunden sind. Es überprüft, ob der Benutzer angemeldet ist oder nicht und gibt einen booleschen Wert true oder false zurück. Sie können dieses Ergebnis verwenden, um andere Funktionen in Ihrer App zu programmieren, z. B. das Anzeigen der Kontoinformationen des Benutzers, wenn er angemeldet ist. Weitere Details zu dieser Hilfsmethode finden Sie im Quellcode im Devise GitHub-Repository.

current_user ist ein Devise-Helfer, der auf die Details des Benutzers zugreift, der sich derzeit in der Anwendung angemeldet hat. Wenn Sie sich beispielsweise mit [email protected] anmelden, würde der current_user-Helfer das Benutzermodell für [email protected] zurückgeben. Wenn Sie also current_user.email verwenden, erhalten Sie [email protected] als Ergebnis. Durch die Verwendung von Devise müssen Sie diese Logik nicht von Grund auf implementieren, was Ihnen Zeit und Mühe erspart.

Zum Schluss haben Sie mit diesem Code Anmelden– und Abmelden-Schaltflächen zur Startseite hinzugefügt. Abhängig vom Ergebnis der user_signed_in?-Hilfsmethode wird die Option zum Anmelden oder Abmelden mithilfe der neu hinzugefügten Anmelden– und Abmelden-Schaltflächen angezeigt.

Sie verwenden die button_to-Methode, um eine Schaltfläche zu definieren, die den Benutzer zu einer bestimmten Route führt. Sie verwenden auch Hilfsmethoden, um diese Routen zu erhalten: destroy_user_session_path löst zu /users/sign_out auf, und new_user_session_path löst zu /users/sign_in auf. (Sie können die vollständige Liste der Routen-URL-Helfer überprüfen, indem Sie bundle exec rails routes ausführen, wie in einem vorherigen Schritt erwähnt.)

Speichern Sie die Datei und schließen Sie sie.

Aktualisieren Sie Ihre Seite im Browser, um die Änderungen zu überprüfen.

Wenn Sie sich noch nicht für Ihre Anwendung angemeldet haben, können Sie die Route /users/sign_in besuchen, indem Sie auf die Schaltfläche Anmelden auf Ihrer Seite klicken. Von hier aus können Sie fortfahren, ein neues Konto zu erstellen, indem Sie auf den Link Registrieren unten klicken. Geben Sie eine Test-E-Mail wie [email protected] und ein Passwort ein. Sobald Sie sich angemeldet haben, gelangen Sie erneut zur Startseite. Jetzt zeigt die Startseite die E-Mail-Adresse des aktuell angemeldeten Benutzers an, zusammen mit einer Abmelden-Schaltfläche, wie hier gezeigt:

Sie erhalten auch eine Nachricht, die besagt: Sie haben sich erfolgreich registriert.

Und damit haben Sie das Devise-Gem erfolgreich integriert und die Benutzerauthentifizierung in Ihrer Anwendung eingerichtet.

Abschluss

In diesem Tutorial haben Sie Devise verwendet, um der Rails-App die Benutzerauthentifizierung hinzuzufügen. Unter Verwendung der Hilfsmethoden von Devise haben Sie eine App erstellt, in der Benutzer Konten erstellen, sich registrieren und abmelden können.

Um ein besseres Verständnis von Devise und zusätzlichen Hilfsprogrammen und Methoden zu erhalten, sehen Sie sich die README-Datei im Devise GitHub-Repository an. Als nächster Schritt zu diesem Tutorial können Sie versuchen, die „Hello World!“-Begrüßung auf der Seite bedingt anzuzeigen, zum Beispiel mit Hallo Benutzername, abhängig davon, ob der Benutzer angemeldet ist oder nicht.

Sie können den Code für dieses Projekt im DigitalOcean Community GitHub-Repository finden.