Persönliche Todo-Listen mit dem b4um Generator erstellen
Erweitere deine Rails-Todo-Anwendung um eine Benutzeranmeldung mit bcrypt und persönliche Aufgabenlisten. Mit dem b4um Generator erhält jeder Benutzer seine eigene Aufgabenverwaltung – inklusive Zugriffsschutz und automatischer Weiterleitung zur Login-Seite.
Einführung
Im ersten Tutorial haben wir mit dem b4um Generator eine vollständige Todo-Anwendung erstellt.
Unsere Aufgabenliste unterstützt bereits das Hinzufügen, Erledigen, Wiederöffnen und Löschen von Aufgaben. Außerdem werden die Aufgaben mithilfe von Turbo Streams aktualisiert, ohne dass wir die gesamte Seite neu laden müssen.
Allerdings hat unsere bisherige Anwendung eine Besonderheit: Alle Besucher verwenden dieselbe Aufgabenliste.
Für eine öffentliche Demonstration ist das vollkommen ausreichend. Möchten wir unsere Todo-Anwendung jedoch als persönlichen Aufgabenplaner verwenden, benötigen wir Benutzerkonten.
Jeder Benutzer soll ausschließlich seine eigenen Aufgaben sehen und bearbeiten können.
Genau das setzen wir in diesem Tutorial um.
Dafür verwenden wir drei Generatoren:
b4um:scaffold erstellt unser Benutzermodell mit Registrierung.
b4um:authentication ergänzt die Anmeldung und Abmeldung.
b4um:todo erstellt eine persönliche Todo-Liste mit Benutzerzuordnung.
Wir verwenden den b4um Generator in Version 0.5.1, der außerdem eine automatische Weiterleitung zur Login-Seite unterstützt.
Am Ende besitzen wir zwei voneinander unabhängige Aufgabenverwaltungen: eine öffentliche und eine persönliche Todo-Liste.
1. Voraussetzungen
Wir setzen auf der Rails-Anwendung aus unserem ersten Tutorial auf.
Dort haben wir bereits eine öffentliche Todo-Liste erstellt.
Unsere Entwicklungsumgebung verwendet:
Ruby:
ruby -v
ruby 3.4.10
Rails:
rails -v
Rails 8.1.4
b4um Generator:
bundle info b4um_generators
b4um_generators (0.5.1)
Falls du das erste Tutorial noch nicht durchgeführt hast, solltest du zunächst eine Rails-Anwendung erstellen und den b4um Generator installieren.
Für die persönliche Todo-Liste benötigen wir außerdem bcrypt zur sicheren Passwortverarbeitung.
Dieses Gem haben wir bereits bei der Grundinstallation über folgenden Befehl aktiviert:
bin/rails generate b4um:install
Der Installationsassistent fragt:
Install bcrypt for password support? (y/n)
Hier haben wir mit y bestätigt.
bcrypt ermöglicht es Rails, Passwörter als sichere Passwort-Hashes zu speichern, statt sie im Klartext in der Datenbank abzulegen.
2. Benutzermodell erstellen
Zunächst benötigen wir ein Modell für unsere Benutzer.
Dafür verwenden wir den Scaffold-Generator.
Öffne das Terminal im Verzeichnis unserer Rails-Anwendung und führe folgenden Befehl aus:
bin/rails generate b4um:scaffold User name:string email:string password_digest:string --required=email
Der Generator erstellt automatisch unser Benutzermodell und die dazugehörigen Rails-Komponenten.
Dabei verwenden wir drei Felder.
name
Speichert den Namen des Benutzers.
email
Speichert die E-Mail-Adresse, die wir später für die Anmeldung verwenden.
password_digest
Enthält den von bcrypt erzeugten Passwort-Hash.
Das Feld password_digest ist besonders wichtig.
Der b4um Scaffold-Generator erkennt dieses Feld und ergänzt die notwendige Unterstützung für has_secure_password.
Dadurch können wir mit den virtuellen Attributen password und password_confirmation arbeiten.
Das eigentliche Passwort wird nicht im Klartext gespeichert.
Mit der zusätzlichen Option
--required=email
legen wir fest, dass die E-Mail-Adresse ein Pflichtfeld sein soll.
Der Generator erstellt unter anderem folgende Dateien:
Nach erfolgreicher Installation können wir Benutzer registrieren, anmelden und abmelden.
Wie funktioniert die Anmeldung?
Wenn sich ein Benutzer anmeldet, überprüft Rails die angegebenen Zugangsdaten.
Dabei wird das eingegebene Passwort mit dem gespeicherten bcrypt-Hash verglichen.
Bei erfolgreicher Anmeldung wird die Benutzer-ID in der Session hinterlegt.
Über die Methode
current_user
kann unsere Anwendung anschließend den aktuell angemeldeten Benutzer ermitteln.
Genau diese Methode benötigen wir später für unsere persönliche Todo-Liste.
5. Login- und Logout-Routen überprüfen
Bevor wir die Anmeldung testen, überprüfen wir die erzeugten Routen.
Dazu führen wir folgenden Befehl aus:
bin/rails routes -g 'login|logout|users'
In unserer Testanwendung erhalten wir unter anderem folgende Routen:
GET /login sessions#new
POST /login sessions#create
DELETE /logout sessions#destroy
GET /users/new users#new
POST /users users#create
Damit stehen uns die benötigten Funktionen zur Verfügung.
Über /users/new können wir ein Benutzerkonto erstellen.
Über /login melden wir uns an.
Und über /logout können wir unsere Sitzung beenden.
Der b4um Generator ergänzt außerdem die Navigation um entsprechende Einträge.
Solange wir nicht angemeldet sind, sehen wir:
Home – Register – Login
Nach erfolgreicher Anmeldung verändert sich die Navigation zu:
Home – Profile – Logout
6. Erstes Benutzerkonto registrieren
Jetzt testen wir unsere Benutzerregistrierung.
Starte dazu den Rails-Server, falls er noch nicht läuft:
bin/rails server
Anschließend öffnen wir folgende Adresse im Browser:
http://localhost:3000/users/new
Das Registrierungsformular wird angezeigt.
Es enthält folgende Eingabefelder:
Name
E-Mail-Adresse
Passwort
Passwortbestätigung
Die Passwortfelder wurden durch den b4um Generator automatisch ergänzt.
Wir müssen sie nicht selbst erstellen.
Jetzt registrieren wir unseren ersten Benutzer.
Dafür geben wir einen Namen, eine E-Mail-Adresse und ein Passwort ein.
Das Passwort muss anschließend noch einmal bestätigt werden.
Nach erfolgreicher Registrierung werden wir zur Benutzerseite weitergeleitet.
Gleichzeitig sind wir bereits angemeldet.
In der Navigation erscheinen jetzt die Einträge Profile und Logout.
Der b4um Scaffold-Generator erstellt automatisch ein Registrierungsformular mit Passwort und Passwortbestätigung.
7. Login und Logout testen
Bevor wir unsere persönliche Todo-Liste erstellen, überprüfen wir die Benutzeranmeldung.
Klicke zunächst in der Navigation auf Logout.
Dadurch wird unsere aktuelle Sitzung beendet.
Anschließend öffnen wir die Login-Seite:
http://localhost:3000/login
Hier sehen wir unser automatisch generiertes Anmeldeformular.
Es enthält zwei Eingabefelder:
Email
Hier geben wir die E-Mail-Adresse unseres Benutzerkontos ein.
Password
Hier geben wir unser Passwort ein.
Nach einem Klick auf Login überprüft Rails unsere Zugangsdaten.
Bei erfolgreicher Anmeldung werden wir in unserer Testanwendung zur Startseite weitergeleitet.
Die Navigation zeigt wieder:
Home – Profile – Logout
Damit funktioniert unsere Authentifizierung.
Die Benutzeranmeldung mit E-Mail-Adresse und Passwort wird vollständig durch den b4um Authentication-Generator bereitgestellt.
8. Persönliche Todo-Liste erstellen
Jetzt kommen wir zum wichtigsten Teil dieses Tutorials.
Wir möchten jedem angemeldeten Benutzer eine eigene Todo-Liste zur Verfügung stellen.
Dafür verwenden wir erneut unseren Todo-Generator.
Diesmal ergänzen wir jedoch die Option --owner=User.
Führe folgenden Befehl aus:
bin/rails generate b4um:todo Task --owner=User
Der Generator erstellt eine neue Aufgabenverwaltung mit dem Modell Task.
Durch die Option
--owner=User
werden die Aufgaben automatisch unserem Benutzermodell zugeordnet.
Der Generator erstellt unter anderem folgende Dateien:
Außerdem wird das bestehende Benutzermodell erweitert.
In app/models/user.rb wird eine Beziehung zu unseren Aufgaben ergänzt:
has_many :tasks, dependent: :destroy
Dadurch kann jeder Benutzer mehrere Aufgaben besitzen.
Gleichzeitig gehört jede Aufgabe zu genau einem Benutzer.
Das ist die Grundlage unserer persönlichen Todo-Verwaltung.
Wichtig: Das Modell User muss bereits existieren, bevor wir den Todo-Generator mit --owner=User ausführen.
9. Datenbankmigration ausführen
Auch für unsere persönliche Todo-Liste müssen wir die Datenbank aktualisieren.
Dazu führen wir folgenden Befehl aus:
bin/rails db:migrate
Rails erstellt jetzt die Tabelle tasks.
Da wir die Option --owner=User verwendet haben, enthält die generierte Datenbankstruktur auch die Zuordnung zum Benutzer.
Dadurch können wir später eindeutig feststellen, wem eine Aufgabe gehört.
Nach erfolgreicher Migration ist unsere persönliche Todo-Liste einsatzbereit.
10. Persönliche Todo-Liste öffnen
Jetzt öffnen wir folgende Adresse:
http://localhost:3000/tasks
Da wir bereits angemeldet sind, wird unsere persönliche Todo-Liste angezeigt.
Die Benutzeroberfläche sieht genauso aus wie bei unserer öffentlichen Todo-Liste.
Wir erhalten wieder:
Eine Fortschrittsanzeige
Ein Eingabefeld für neue Aufgaben
Eine Liste offener Aufgaben
Eine Liste erledigter Aufgaben
Automatische Aufgabenzähler
Allerdings gibt es einen entscheidenden Unterschied.
Diese Aufgabenliste gehört ausschließlich unserem angemeldeten Benutzer.
Andere Benutzer erhalten ihre eigene Aufgabenverwaltung.
Zu Beginn ist unsere persönliche Todo-Liste noch leer.
Die Fortschrittsanzeige zeigt:
0 von 0 erledigt – 0 % abgeschlossen
Nach der Anmeldung erhält jeder Benutzer seine eigene persönliche Todo-Liste.
11. Persönliche Aufgaben erstellen
Jetzt erstellen wir einige Aufgaben für unseren ersten Benutzer.
In unserem Beispiel verwenden wir folgende Einträge:
Persönliche Todo-Liste einrichten
Benutzeranmeldung testen
Zugriffsschutz überprüfen
Zweiten Benutzer registrieren
Die Aufgaben erscheinen automatisch im Bereich Offene Aufgaben.
Wir markieren anschließend die ersten beiden Aufgaben als erledigt.
Dadurch erhalten wir folgenden Fortschritt:
2 von 4 erledigt – 50 % abgeschlossen
Die Fortschrittsanzeige wird automatisch aktualisiert.
Wie bereits bei unserer öffentlichen Todo-Liste übernehmen Turbo Streams und Stimulus die Aktualisierung der Benutzeroberfläche.
Auch hier müssen wir die Seite nicht vollständig neu laden.
Jeder Benutzer kann seine eigenen Aufgaben verwalten. Die Fortschrittsanzeige berücksichtigt ausschließlich seine persönliche Todo-Liste.
12. Zugriffsschutz überprüfen
Eine persönliche Todo-Liste sollte nur für angemeldete Benutzer erreichbar sein.
Deshalb müssen wir überprüfen, was passiert, wenn ein nicht angemeldeter Besucher versucht, unsere Aufgabenliste zu öffnen.
Zunächst melden wir uns über Logout ab.
Anschließend rufen wir erneut folgende Adresse auf:
http://localhost:3000/tasks
Unsere Anwendung erkennt jetzt, dass kein Benutzer angemeldet ist.
Statt die persönliche Aufgabenliste anzuzeigen, werden wir automatisch zur Login-Seite weitergeleitet.
Die Adresse ändert sich zu:
http://localhost:3000/login
Zusätzlich erscheint folgende Meldung:
Bitte melde dich an, um deine Aufgaben zu verwalten.
Damit funktioniert unser Zugriffsschutz.
Nicht angemeldete Besucher können unsere persönliche Todo-Liste nicht aufrufen.
Nicht angemeldete Besucher werden automatisch zur Login-Seite weitergeleitet und erhalten einen entsprechenden Hinweis.
13. Wie funktioniert der Zugriffsschutz?
Der b4um Todo-Generator ergänzt den generierten Controller um einen Zugriffsschutz, sobald wir die Option --ownerverwenden.
In unserer Anwendung befindet sich dieser Controller unter:
app/controllers/tasks_controller.rb
Dort wird überprüft, ob ein Benutzer angemeldet ist.
Der entsprechende Code sieht folgendermaßen aus:
before_action :require_todo_owner
Die Methode zur Überprüfung lautet:
def require_todo_owner
return if current_user
redirect_to login_path,
alert: "Bitte melde dich an, um deine Aufgaben zu verwalten."
end
Schauen wir uns die einzelnen Bestandteile an.
before_action :require_todo_owner
Rails führt die Methode vor den geschützten Controller-Aktionen aus.
return if current_user
Wenn ein Benutzer angemeldet ist, darf die Anfrage fortgesetzt werden.
redirect_to login_path
Ist kein Benutzer angemeldet, wird der Besucher zur Login-Seite weitergeleitet.
alert:
Zusätzlich wird eine Hinweismeldung angezeigt.
Diese Funktion ist seit Version 0.5.1 des b4um Generators enthalten.
In der vorherigen Version wurde bei nicht angemeldeten Benutzern noch der HTTP-Status 401 Unauthorizedzurückgegeben.
Die automatische Weiterleitung bietet eine deutlich angenehmere Benutzerführung.
14. Benutzerbezogene Aufgaben laden
Neben der Anmeldung müssen wir sicherstellen, dass Benutzer ausschließlich ihre eigenen Aufgaben sehen können.
Dafür verwendet der generierte Controller die Zuordnung zwischen Benutzer und Aufgabe.
Statt sämtliche Aufgaben aus der Datenbank zu laden, arbeitet die Anwendung mit der Aufgabenbeziehung des aktuell angemeldeten Benutzers.
Das Prinzip lautet:
current_user.tasks
Dadurch erhalten wir ausschließlich Aufgaben, die dem angemeldeten Benutzer gehören.
Auch beim Aktualisieren oder Löschen einer Aufgabe wird die benutzerbezogene Zuordnung berücksichtigt.
Das ist besonders wichtig.
Denn es reicht nicht aus, fremde Aufgaben lediglich in der Benutzeroberfläche auszublenden.
Der Zugriffsschutz muss auch auf Controller-Ebene funktionieren.
Andernfalls könnten Benutzer versuchen, fremde Aufgaben über manipulierte Anfragen aufzurufen oder zu verändern.
Der b4um Todo-Generator berücksichtigt diese Zuordnung automatisch, wenn wir --owner=User verwenden.
15. Zweiten Benutzer registrieren
Jetzt möchten wir überprüfen, ob unsere persönlichen Aufgaben tatsächlich voneinander getrennt sind.
Dafür erstellen wir ein zweites Benutzerkonto.
Melde dich zunächst vom ersten Benutzerkonto ab.
Anschließend öffnest du:
http://localhost:3000/users/new
Registriere jetzt einen zweiten Benutzer mit einer anderen E-Mail-Adresse.
Nach erfolgreicher Registrierung sind wir mit dem neuen Benutzerkonto angemeldet.
Jetzt öffnen wir wieder:
http://localhost:3000/tasks
Unsere persönliche Todo-Liste ist zunächst leer.
Die Aufgaben des ersten Benutzers werden nicht angezeigt.
Das ist genau das gewünschte Verhalten.
Jeder Benutzer erhält eine eigene Aufgabenverwaltung.
16. Aufgaben des zweiten Benutzers erstellen
Jetzt erstellen wir einige Aufgaben für unseren zweiten Benutzer.
In unserem Test verwenden wir:
Einkäufe erledigen
Urlaub planen
Eigene Todo-Liste testen
Anschließend markieren wir die dritte Aufgabe als erledigt.
Die Fortschrittsanzeige zeigt:
1 von 3 erledigt – 33 % abgeschlossen
Damit besitzt unser zweiter Benutzer eine eigene Todo-Liste.
Der zweite Benutzer erhält eine vollständig unabhängige Aufgabenliste mit eigener Fortschrittsanzeige.
17. Benutzer wechseln und Aufgaben vergleichen
Jetzt überprüfen wir, ob die Aufgaben des ersten Benutzers weiterhin vorhanden sind.
Dafür melden wir uns zunächst ab.
Anschließend melden wir uns mit dem ersten Benutzerkonto erneut an.
Danach öffnen wir:
http://localhost:3000/tasks
Unsere ursprünglichen Aufgaben erscheinen wieder.
Wir sehen erneut:
Offene Aufgaben:
Zweiten Benutzer registrieren
Zugriffsschutz überprüfen
Erledigte Aufgaben:
Benutzeranmeldung testen
Persönliche Todo-Liste einrichten
Auch die Fortschrittsanzeige ist unverändert.
Sie zeigt weiterhin:
2 von 4 erledigt – 50 % abgeschlossen
Die Aufgaben des zweiten Benutzers werden dagegen nicht angezeigt.
Damit haben wir bestätigt, dass die Benutzerkonten voneinander getrennte Aufgabenlisten besitzen.
Nach einem erneuten Login erscheinen ausschließlich die Aufgaben des jeweiligen Benutzerkontos. Alle bisherigen Daten bleiben erhalten.
18. Öffentliche und persönliche Todo-Listen kombinieren
Unsere Anwendung besitzt jetzt zwei unterschiedliche Todo-Listen.
Die erste haben wir im vorherigen Tutorial erstellt:
bin/rails generate b4um:todo PublicTask
Diese Aufgabenliste ist öffentlich erreichbar unter:
http://localhost:3000/public_tasks
Die zweite haben wir mit einer Benutzerzuordnung erstellt:
bin/rails generate b4um:todo Task --owner=User
Sie ist erreichbar unter:
http://localhost:3000/tasks
Der Unterschied liegt in der Option --owner.
Ohne diese Option erstellt der Generator eine Aufgabenliste ohne Benutzerzuordnung.
Mit --owner=User erhält jeder angemeldete Benutzer eine persönliche Aufgabenverwaltung.
Beide Varianten können innerhalb derselben Rails-Anwendung verwendet werden.
Die Aufgaben werden dabei in unterschiedlichen Datenbanktabellen gespeichert.
Unsere öffentlichen Aufgaben befinden sich in:
public_tasks
Die persönlichen Aufgaben befinden sich in:
tasks
Dadurch beeinflussen sich die beiden Aufgabenverwaltungen nicht gegenseitig.
19. Öffentliche Todo-Liste nach der Anmeldung testen
Jetzt überprüfen wir noch, ob unsere öffentliche Todo-Liste weiterhin funktioniert.
Öffne dazu:
http://localhost:3000/public_tasks
Dort sehen wir wieder die Aufgaben, die wir im ersten Tutorial erstellt haben.
Auch die Fortschrittsanzeige zeigt weiterhin den bisherigen Bearbeitungsstand.
Die öffentliche Todo-Liste wurde durch die Installation unseres Authentifizierungssystems und der persönlichen Aufgabenverwaltung nicht verändert.
Wir können sie weiterhin ohne Anmeldung aufrufen, sofern wir keinen zusätzlichen globalen Zugriffsschutz eingerichtet haben.
Damit haben wir bestätigt, dass beide Varianten parallel funktionieren.
Die öffentliche Todo-Liste funktioniert weiterhin unabhängig von der persönlichen Aufgabenverwaltung.
20. Alternative Login-Routen verwenden
Seit Version 0.5.1 unterstützt der b4um Todo-Generator außerdem die Option --login-path.
Damit können wir festlegen, zu welcher Login-Route nicht angemeldete Besucher weitergeleitet werden sollen.
Standardmäßig verwendet der Generator:
login_path
Das passt zu unserem b4um Authentication-Generator.
Andere Authentifizierungssysteme verwenden jedoch möglicherweise andere Routennamen.
Bei Devise lautet die Login-Route beispielsweise häufig:
new_user_session_path
In diesem Fall können wir den Todo-Generator folgendermaßen aufrufen:
Dadurch verwendet der generierte Controller die angegebene Login-Route.
Die Option ist besonders praktisch, wenn wir den b4um Todo-Generator in einer bereits bestehenden Rails-Anwendung verwenden möchten.
Wichtig: Die angegebene Login-Route und die Methode zur Ermittlung des angemeldeten Benutzers müssen in der Anwendung vorhanden sein.
Außerdem wird die Option beim Generieren des Controllers berücksichtigt. Eine bereits generierte Todo-Liste wird dadurch nicht nachträglich verändert.
21. Sicherheit und Benutzertrennung
Bei einer persönlichen Todo-Anwendung müssen wir einige wichtige Punkte beachten.
Passwörter
Durch bcrypt und has_secure_password werden Passwörter nicht im Klartext gespeichert.
Stattdessen enthält unsere Datenbank einen Passwort-Hash.
Benutzeranmeldung
Die Session ermöglicht es Rails, den aktuell angemeldeten Benutzer zu ermitteln.
Über current_user können wir anschließend auf das entsprechende Benutzerkonto zugreifen.
Zugriffsschutz
Nicht angemeldete Besucher werden zur Login-Seite weitergeleitet.
Dadurch können sie die persönliche Aufgabenverwaltung nicht verwenden.
Benutzerbezogene Aufgaben
Die Aufgaben werden über die Beziehung zum angemeldeten Benutzer geladen.
Dadurch können Benutzer nicht einfach die Aufgaben anderer Konten anzeigen oder bearbeiten.
Öffentliche Aufgaben
Die öffentliche Todo-Liste besitzt dagegen keinen automatisch generierten benutzerspezifischen Zugriffsschutz.
Sie sollte deshalb nur für Anwendungsfälle verwendet werden, bei denen ein gemeinsamer Zugriff ausdrücklich erwünscht ist.
Für produktive Anwendungen sollten wir außerdem die Registrierung, Session-Sicherheit und weitere Schutzmaßnahmen passend zum jeweiligen Einsatzgebiet überprüfen.
22. Fazit
Mit dem b4um Generator haben wir unsere öffentliche Todo-Anwendung um eine vollständige Benutzeranmeldung und persönliche Aufgabenlisten erweitert.
Dafür benötigten wir im Wesentlichen drei Generator-Befehle.
Benutzermodell erstellen:
bin/rails generate b4um:scaffold User name:string email:string password_digest:string --required=email
Authentifizierung installieren:
bin/rails generate b4um:authentication User
Persönliche Todo-Liste erstellen:
bin/rails generate b4um:todo Task --owner=User
Nach den erforderlichen Datenbankmigrationen konnten wir unsere Anwendung direkt verwenden.
Wir haben zwei Benutzerkonten registriert und überprüft, dass beide Benutzer unterschiedliche Aufgabenlisten erhalten.
Außerdem haben wir getestet, dass nicht angemeldete Besucher automatisch zur Login-Seite weitergeleitet werden.
Dank der Benutzerzuordnung können wir sicherstellen, dass Aufgaben ausschließlich über das zugehörige Benutzerkonto verwaltet werden.
Gleichzeitig funktioniert unsere öffentliche Todo-Liste weiterhin unabhängig davon.
Damit besitzen wir jetzt eine Rails-Anwendung mit zwei unterschiedlichen Todo-Systemen: einer öffentlichen Aufgabenverwaltung und persönlichen Todo-Listen für angemeldete Benutzer.
Und das alles, ohne die Authentifizierung oder die Aufgabenverwaltung vollständig selbst programmieren zu müssen.
Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren,
Funktionen für soziale Medien anbieten zu können und die Zugriffe auf
unsere Website zu analysieren.
Sie akzeptieren unsere Cookies, wenn Sie fortfahren diese Webseite zu
nutzen.
Datenschutzerklärung.
