In-Place Editing mit Login schützen

Inhalte öffentlich anzeigen und In-Place Editing nur für angemeldete Benutzer freigeben.

In-Place Editing absichern

In den ersten beiden Tutorials haben wir unser Product Schritt für Schritt um In-Place Editing erweitert. Neben einfachen Feldern können inzwischen auch Rich Text, Bilder und Galerien direkt auf der Show-Seite bearbeitet werden.

Bei einer öffentlich erreichbaren Anwendung sollen Besucher die Inhalte zwar sehen können, Änderungen dürfen aber nicht für jeden möglich sein.

Dafür verbinden wir In-Place Editing jetzt mit der Authentifizierung des b4um Generators.

Das Ziel:

index und show bleiben öffentlich erreichbar.
Besucher können alle Product-Inhalte ansehen.
In-Place Editing steht nur angemeldeten Benutzern zur Verfügung.
new, create, edit, update und destroy werden geschützt.

bcrypt als Voraussetzung

Die b4um Authentifizierung verwendet Rails has_secure_password und benötigt deshalb bcrypt.

Wenn bei der Installation des b4um Generators nach bcrypt gefragt wurde, sollte diese Option aktiviert sein.

bin/rails generate b4um:install

Für die Authentifizierung benötigen wir außerdem ein Modell mit einer password_digest-Spalte.

User erstellen

Wir erstellen einen normalen b4um Scaffold für User:

bin/rails generate b4um:scaffold User \
  name:string \
  email:string \
  password_digest:string

Der b4um Generator erkennt password_digest und ergänzt das Modell automatisch um:

class User < ApplicationRecord
  has_secure_password
end

Im Formular wird dabei nicht der verschlüsselte password_digest bearbeitet. Stattdessen stehen die beiden normalen Passwortfelder zur Verfügung:

password
password_confirmation

Anschließend führen wir die Migration aus:

bin/rails db:migrate

Authentifizierung einrichten und Products schützen

Jetzt richten wir die eigentliche Anmeldung ein.

Gleichzeitig teilen wir dem Generator mit, dass unser ProductsController geschützt werden soll:

bin/rails generate b4um:authentication User --protect=Products

Der Authentication-Generator erstellt unter anderem die Session-Verwaltung, Login und Logout sowie die benötigten Helper.

Da Products über --protect angegeben wurde, ergänzt der Generator außerdem den Controller um:

before_action :require_login, except: [:index, :show]

Das ist ein wichtiger Unterschied: Die Sicherheit basiert nicht darauf, dass wir lediglich Bearbeitungsbuttons verstecken.

Der Controller selbst verhindert nicht autorisierte Änderungen.

index und show bleiben dagegen ausdrücklich öffentlich.

In-Place Editing wird automatisch berücksichtigt

Da unser Product bereits In-Place Editing verwendet, erkennt der Authentication-Generator auch diese Integration.

Der In-Place-Helper verwendet anschließend den Loginstatus:

module B4umInPlaceHelper
  def b4um_in_place_editing_allowed?
    logged_in?
  end
end

Damit kann dieselbe Product-Show-Seite zwei unterschiedliche Zustände besitzen.

Ausgeloggte Besucher sehen die Inhalte, können sie aber nicht bearbeiten. Nach erfolgreicher Anmeldung werden die In-Place-Funktionen freigeschaltet.

Wir müssen unsere bereits erzeugten In-Place-Felder dafür nicht erneut generieren.

Ausgeloggt: öffentlich ansehen

Rufen wir die Product-Show-Seite ohne Anmeldung auf, bleiben sämtliche Inhalte sichtbar.

In unserem Beispiel sind das unter anderem:

MacBook Air M4
1.299,50
Aktiv
Neu
Description
Bild
Galerie

Auch Bilder und die Lightbox können weiterhin betrachtet werden. Das Öffnen eines Bildes ist schließlich keine Bearbeitung.

Was dagegen verschwindet, sind die Bearbeitungsfunktionen:

keine In-Place-Bearbeitungsstifte
keine In-Place-Hover-Bearbeitung
kein Edit
kein Destroy

Back bleibt weiterhin verfügbar.

Eingeloggt: direkt bearbeiten

Nach erfolgreicher Anmeldung ändert sich die Product-Seite.

Die Inhalte selbst bleiben dieselben, aber die Bearbeitungsfunktionen stehen wieder zur Verfügung.

Bei unseren erweiterten In-Place-Feldern erscheinen beispielsweise die Bearbeitungsstifte wieder. Auch die normalen Aktionen Edit und Destroy werden wieder angezeigt.

In der Navigation erkennen wir ebenfalls den angemeldeten Zustand:

Home
Products
Profile
Logout

Damit benötigt die Anwendung keine separate öffentliche Product-Seite und keine zweite Ansicht für Administratoren. Dieselbe Show-Seite passt ihre Bearbeitungsmöglichkeiten an den Loginstatus an.

Anzeige und Sicherheit sind zwei verschiedene Dinge

Das Ausblenden der Bearbeitungselemente verbessert die Benutzeroberfläche, ist aber nicht die eigentliche Zugriffskontrolle.

Entscheidend ist weiterhin:

before_action :require_login, except: [:index, :show]

Selbst wenn jemand versucht, eine geschützte Aktion direkt aufzurufen, greift die Authentifizierung im Controller.

Die Benutzeroberfläche bildet diese Berechtigung lediglich passend ab: Wer nicht bearbeiten darf, bekommt auch keine Bearbeitungsfunktionen angeboten.

Das ist besonders für In-Place Editing wichtig, weil Bearbeitungsfunktionen ansonsten direkt auf einer öffentlich sichtbaren Show-Seite erscheinen würden.

Weitere Controller schützen

--protect ist nicht auf einen einzelnen Controller beschränkt.

Sollen beispielsweise zusätzlich Articles und Comments geschützt werden, können mehrere Controller angegeben werden:

bin/rails generate b4um:authentication User \
  --protect=Products,Articles,Comments

Die angegebenen Controller müssen bereits vorhanden sein.

Auch später können weitere Controller geschützt werden. Der Authentication-Generator kann erneut ausgeführt werden, ohne die bereits vorhandenen Authentication-Helper, Routen und Navigationselemente zu duplizieren.

Das Ergebnis

Unsere Product-Seite kann jetzt öffentlich verwendet werden, ohne die In-Place-Bearbeitung ebenfalls öffentlich freizugeben.

Ausgeloggt können Besucher die Inhalte ansehen, Rich Text lesen sowie Bilder und Galerien betrachten.

Eingeloggt stehen zusätzlich die In-Place-Editoren und die geschützten Product-Aktionen zur Verfügung.

Damit haben wir die drei Teile unserer In-Place-Serie abgeschlossen:

Teil 1: In-Place Editing mit dem b4um Generator
Text, Decimal, Boolean, Select und Radio.

Teil 2: In-Place Editing Pro – Trix, Bilder und Galerien
Action Text, Active Storage, Galerie und Lightbox.

Teil 3: In-Place Editing mit Login schützen
Öffentliche Inhalte mit geschützter Bearbeitung.

Meld dich an und schreibe ein Kommentar