Rechtsanwälte, die sensible Rechnungsdaten verarbeiten, müssen Kunden einen sicheren Echtzeit-Zugriff auf Rechnungen bieten und gleichzeitig die strikte Einhaltung von Vorschriften wie HIPAA oder DSGVO einhalten. Traditionelle monolithische Plattformen sperren Sie oft in starre Vorlagen, begrenzte API-Endpunkte und herstellerspezifische Datenformate. Ein Headless-CMS wie Directus entkoppelt das Content-Repository von der Präsentationsschicht und bietet ein flexibles Backend-as-a-Service mit integrierter REST- und GraphQL-API, rollenbasierte Berechtigungen und eine intuitive Admin-Schnittstelle. Diese Architektur gibt Ihnen die vollständige Kontrolle über die Kundenerfahrung, ohne auf Sicherheit oder Erweiterbarkeit zu verzichten.

  • API-first design – Verbinden Sie ein beliebiges Frontend-Framework (React, Vue, Svelte oder eine native mobile App) mit derselben Datenquelle unter Verwendung von Standardprotokollen.
  • Granular Data Access – Kontrolliere genau, welche Felder und Datensätze jeder Kunde bis hin zu einzelnen Rechnungszeilenelementen mithilfe von Zeilenfiltern sieht.
  • Erweiterbarkeit – Verwenden Sie Directus Flows und benutzerdefinierte Endpunkte, um sie in Zahlungsgateways, Dokumentenerstellungstools und Buchhaltungssoftware zu integrieren, ohne serverseitigen Backend-Code zu schreiben.
  • Self-hosted oder Cloud – Bereitstellen auf Ihrer eigenen Infrastruktur, um die Anforderungen an die Datenresidenz zu erfüllen, oder Verwenden Sie Directus Cloud für verwaltete Betriebszeiten.

Die wichtigsten Vorteile eines Online-Client-Portals

Bevor wir uns mit der technischen Umsetzung befassen, sollten wir die spezifischen Vorteile eines dedizierten Portals für Rechtsanwälte und ihre Kunden erläutern, die sich direkt in einem geringeren Verwaltungsaufwand, einem verbesserten Cashflow und einem stärkeren Vertrauen der Kunden niederschlagen.

  • Accessibility – Kunden können Rechnungen von jedem Gerät mit Internetzugang anzeigen und so die Reibung von Post, E-Mail-Anhängen oder Telefonanrufen beseitigen. Ein responsives Design stellt sicher, dass mobile Anwälte Rechnungen unterwegs überprüfen können.
  • Sicherheit – Sensible Abrechnungsinformationen sind durch Verschlüsselung (TLS 1.3 für den Transit, AES‐256 im Ruhezustand) und starke Authentifizierungsprotokolle wie OAuth 2.0 oder SAML SSO geschützt. Directus protokolliert jede Datenänderung und bietet einen Audit-Trail für die Einhaltung.
  • Effizienz – Das Portal reduziert Telefonanrufe, E-Mails und Folgemaßnahmen im Zusammenhang mit Abrechnungsanfragen. Kunden können PDFs herunterladen, eine Gebühr anfechten oder Zahlungen tätigen, ohne sich an die Rezeption zu wenden, wodurch Mitarbeiter für höherwertige Arbeiten frei werden.
  • Transparenz – Echtzeit-Sichtbarkeit von Zeiteinträgen, Auszahlungen und Zahlungshistorie schafft Vertrauen und verringert die Wahrscheinlichkeit von Abrechnungsstreitigkeiten. Kunden sehen genau, wofür sie berechnet werden, wann Arbeiten stattgefunden haben und wie Zahlungen getätigt wurden.
  • Datenkontrolle – Kunden können ihre eigene Abrechnungshistorie für Steuer-, Prüfungs- oder Spesenabrechnungszwecke innerhalb eines konformen Rahmens exportieren.

Voraussetzungen und Architekturübersicht

Um ein legales Abrechnungsportal mit Directus zu implementieren, benötigen Sie eine laufende Directus-Instanz (selbst gehostet über Docker oder Directus Cloud) und ein modernes Frontend-Framework.

  • Directus Backend – hostet Datensammlungen, Berechtigungen, Flows und Datei-Assets.
  • Frontend Application – eine einseitige App oder eine servergerenderte Site (Vue + Nuxt 3, React + Next.js), die sich über Directus authentifiziert und Daten über das SDK abruft.
  • Zahlungsgateway – Stripe, PayPal oder Braintree für die Verarbeitung von Kreditkarten- oder ACH-Zahlungen, die vom Frontend oder über Directus Flows aufgerufen werden.
  • Dokumentenspeicherung – PDF-Rechnungen und rechtliche Dokumente, die als Directus-Assets verwaltet werden und über den Dateiendpunkt mit Berechtigungsprüfungen bereitgestellt werden.

Wenn Sie Directus noch nicht bereitgestellt haben, lesen Sie den offiziellen Directus-Schnellstart-Leitfaden, um in wenigen Minuten zum Laufen zu kommen.

Schrittweise Umsetzung mit Directus

Die folgenden Abschnitte durchlaufen den End-to-End-Prozess, von der Modellierung von Daten bis hin zum Live-Betrieb mit einem kompatiblen, skalierbaren Portal.

1. Modellieren Sie Ihre Datensammlungen

Erstellen Sie im Directus Data Studio die Kernsammlungen, verwenden Sie die Directus-Schnittstelle für relationale Felder, Validierungsregeln und Berechtigungen auf Feldebene.

  • Clients – speichert Clientprofile: Name, E-Mail, Telefon, Firmenlogo, bevorzugte Kommunikationsmethode und eine UUID für die Authentifizierungszuordnung.
  • Rechnungen – jede Rechnung gehört einem Kunden. Felder enthalten Rechnungsnummer (einzigartig), Ausgabedatum, Fälligkeitsdatum, Zwischensumme, Steuer (mit Steuersatz), Gesamtwert, Status (Entwurf, gesendet, bezahlt, überfällig, teilweise bezahlt) und ein JSON-Feld für Zeilenpositionen (Beschreibung, Stunden, Rate, Betrag).
  • Zahlungen – verknüpft mit einer Rechnung und einem Kunden. Felder: Zahlungsdatum, Betrag, Transaktions-ID, Zahlungsmethode (Kreditkarte, Wire, Scheck, ACH) und eine Directus file-Beziehung für Quittungen oder Bestätigungen.
  • Dokumente – speichert PDF-Kopien von Rechnungen, Verpflichtungsschreiben und anderen rechtlichen Dokumenten. Verknüpfen Sie jedes Dokument mit einem Kunden oder einer Rechnung unter Verwendung einer Beziehung von vielen zu einem.

Definieren Sie notwendige relationale Felder: viele zu eins von Rechnungen zu Kunden, eins zu vielen von Rechnungen zu Zahlungen. Verwenden Sie die eingebaute Feldvalidierung von Directus, um die erforderlichen Felder zu erzwingen (z. B. eine Nicht-Null-Client-Referenz, ein gültiges E-Mail-Format für Kunden-E-Mail). Erwägen Sie für das Feld JSON-Zeilenelemente, eine separate Sammlung für Zeilenelemente zu erstellen, wenn Sie sie einzeln abfragen müssen; ein JSON-Feld ist für reine Anzeigeszenarien einfacher.

2. Rollen und granulare Berechtigungen konfigurieren

Sicherheit ist für die gesetzliche Abrechnung nicht verhandelbar. Erstellen Sie in Directus Settings → Rollen & Berechtigungen drei Rollen und wenden Sie Element-Level-Filter an, um die Kundenisolierung zu erzwingen.

  • Administrator – Vollzugriff auf alle Sammlungen, Abläufe und Systemeinstellungen.
  • Personal (Partner/Anwalt) – kann Rechnungen lesen und aktualisieren, die ihren Kunden zugewiesen sind, Kundenprofile verwalten und Zahlungen anzeigen. Löschen von Aktionen einschränken, um einen versehentlichen Datenverlust zu vermeiden. Einen Filter anwenden, damit Mitarbeiter nur Rechnungen sehen, bei denen die zugewiesene Mitarbeiter-ID des Kunden mit dem aktuellen Benutzer übereinstimmt.
  • Client – kann nur Rechnungen lesen, die mit ihrem eigenen Kundendatensatz verknüpft sind, ihr eigenes Profil lesen und Zahlungen erstellen (d.h. eine Zahlung gegen eine Rechnung einleiten).

Um die Client-Isolation zu implementieren, verwenden Sie Directus-Elementberechtigungen mit benutzerdefinierten Filtern. Legen Sie für die Client-Rolle in der Rechnungssammlung einen Filter wie fest, wobei angenommen wird, dass die authentifizierte Benutzer-ID der Client-ID entspricht.

Zusätzlich den Feldzugriff mit Feldberechtigungen einschränken: Kunden sollten Rechnungsnummer, Datum, Gesamtwert, Zeilenelemente (Beschreibungen, Stunden, Rate, Betrag) und Zahlungsstatus sehen; interne Notizen, Markup-Prozentsätze oder Kostenpreise ausblenden; Mitarbeiter benötigen möglicherweise Zugriff auf diese versteckten Felder zur Überprüfung.

3. Erstellen Sie das Frontend-Interface mit Authentifizierung

Directus bedient kein vorgefertigtes öffentliches Portal, sondern muss die Benutzeroberfläche mit Kundenseite erstellen. Wählen Sie ein Framework, das zu Ihrem Team passt. Vue 3 mit Nuxt 3 oder React mit Next.js sind gängige Optionen für ihre SSR-Fähigkeiten und umfangreichen Komponenten-Ökosysteme.

  • Authentication – Implementieren Sie Directus’ Endpunkt mit E-Mail und Passwort. Speichern Sie die zurückgegebene JWT sicher in einem HTTP-Cookie oder Session-Token. Für Unternehmen integrieren Sie einen Drittanbieter-Identitätsanbieter (Okta, Azure AD) über OAuth 2.0 und ordnen Sie den authentifizierten Benutzer einem Directus-Benutzer mit einem benutzerdefinierten Fluss zu.
  • Dashboard-Ansicht – Zeigen Sie überfällige Rechnungen, Zahlungserinnerungen und aktuelle Aktivitäten. Verwenden Sie das Directus SDK mit Filtern wie und einem Datumsbereich.
  • Rechnungsdetailseite – Rendern Sie eine formatierte HTML-Version der Rechnung mit den JSON-Zeilenelementen. Fügen Sie eine eingebettete Schaltfläche “Jetzt bezahlen” hinzu, die den Zahlungsfluss auslöst. Anzeigen Sie optional eine PDF-Vorschau über ein iframe oder einen Link zum Herunterladen des PDF-Assets.
  • Dokumenten-Repository – Ermöglichen Sie es Clients, signierte PDFs direkt über den Datei-Asset-Endpunkt von Directus () mit entsprechenden Berechtigungsprüfungen herunterzuladen.

Nutzen Sie Open-Source-Starter aus dem Directus-Beispiel-Repository, um Ihre Entwicklung zu starten. Der Nuxt 3-Starter enthält Authentifizierungs- und CRUD-Muster, die Sie für die Abrechnung anpassen können.

4. Integration der Zahlungsabwicklung über Directus Flows

Ein Portal, das Rechnungen anzeigt, ohne Zahlungen zuzulassen, verpasst eine wichtige Gelegenheit für eine schnellere Einnahmenerhebung.

  • Erstellen Sie eine Stripe Checkout Session – Verwenden Sie einen Directus Flow, der von einem benutzerdefinierten Endpunkt ausgelöst wird. Der Flow erhält die Rechnungs-ID, holt die Rechnungssumme und die Client-E-Mail von Directus ab und ruft Stripe's API auf, um eine Checkout Session zu erstellen. Geben Sie die Session-URL zum Umleiten an das Frontend zurück.
  • Handle webhooks – Konfigurieren Sie Stripe, um Zahlungserfolgsereignisse an einen Directus Flow-Webhook zu senden. Bei erfolgreicher Zahlung aktualisiert der Flow den Rechnungsstatus auf “bezahlt” und fügt einen neuen Zahlungsdatensatz in Directus mit der Transaktions-ID, dem Betrag und der Methode ein.
  • Minimal-Zahlungsdaten speichern – Speichern Sie niemals rohe Kreditkartennummern. Geben Sie nur die Transaktions-ID, die letzten vier Ziffern und den Zahlungsmethodetyp auf.
  • Verhindern Sie Doppelzahlungen – Überprüfen Sie den Rechnungsstatus, bevor Sie eine Checkout-Sitzung erstellen. Verwenden Sie einen eindeutigen idempotency-Schlüssel pro Anfrage, um doppelte Gebühren zu vermeiden, wenn der Kunde die Zahlungsseite aktualisiert.

Directus Flows kann diesen gesamten Prozess orchestrieren, ohne benutzerdefinierten Backend-Code zu schreiben. Siehe die Dokumentation von Directus Flows für schrittweise Anleitungen zum Erstellen von Operationen, Webhooks und benutzerdefinierten Endpunkten.

5. Automatisieren von PDF-Generierung und Dokumentenanhängen

Viele Anwaltskanzleien benötigen offizielle PDF-Rechnungen für die Aufbewahrung von Aufzeichnungen und Gerichtsakten. Automatisieren Sie die PDF-Erstellung, wenn sich der Status einer Rechnung in „versendet ändert.

  • Trigger a Directus Flow – Fügen Sie in der Invoices-Sammlung einen Ereignis-Hook für “Update” hinzu, wo sich der Status auf gesendet ändert. Der Flow ruft einen externen PDF-Generierungsdienst auf (z. B. Puppeteer auf einer Cloud-Funktion, DocRaptor oder einen internen HTML-zu-PDF-Konverter).
  • Speichern Sie das PDF – Konvertieren Sie die Rechnung HTML (gerendert von den JSON-Zeilenelementen) in PDF, speichern Sie dann die Datei in Directus mit dem Endpunkt.
  • Erlauben Sie Clientzugriff – Zeigen Sie im Frontend eine Download-Taste für das PDF an. Verwenden Sie Directus’ Dateiendpunkt mit Berechtigungsprüfungen, um sicherzustellen, dass nur der Besitzerclient herunterladen kann.

6. Sicherheit und Compliance gründlich testen

Bevor Sie online gehen, überprüfen Sie, ob das Portal die gesetzlichen und regulatorischen Standards erfüllt.

  • Datenverschlüsselung – Sicherstellen von TLS 1.2 oder höher für die gesamte API-Kommunikation. Directus kann für AES‐256 im Ruhezustand konfiguriert werden, wenn es auf verschlüsselten Laufwerken selbst gehostet wird.
  • Zugriffskontrollvalidierung – Testen Sie, ob Client A nicht auf die Daten von Client B zugreifen kann, indem Sie URLs oder API-Aufrufe manipulieren.
  • Penetrationstests – Führen Sie OWASP ZAP oder Burp Suite aus, um nach XSS-, CSRF- und SQL-Injection-Schwachstellen zu suchen. Da Directus Eingaben über seine API deaktiviert, muss Ihr Frontend auch den vom Benutzer bereitgestellten Werten entkommen.
  • Ratenbegrenzung und Brute-Force-Schutz – Konfigurieren Sie einen Reverse-Proxy (Nginx, Cloudflare), um Anmeldeversuche pro IP zu begrenzen. Directus selbst unterstützt die Ratenbegrenzung über die Middleware-Konfiguration.
  • GDPR/HIPAA-Anforderungen – Implementieren Sie Workflows zur Datenlöschung, Anonymisierung und Zugriffsprotokolle. Directus bietet einen Audit-Trail out of the box; ergänzen Sie ihn bei Bedarf mit einem Zustimmungsmanagement-Modul.

Erweiterte Anpassungen für ein Produktionsportal

Sobald das Basisportal ausgeführt wird, sollten Sie diese Verbesserungen in Betracht ziehen, um die Kundenerfahrung und die betriebliche Effizienz zu verbessern.

  • Mehrsprachige Unterstützung – Verwenden Sie die Field Translation-Funktion von Directus, um Rechnungstext in mehreren Sprachen zu speichern.
  • Benachrichtigungen und Warnungen – Konfigurieren Sie Directus Flows, um E-Mail- oder SMS-Erinnerungen für überfällige Rechnungen, Zahlungsbestätigungen und Zahlungsausfälle zu senden.
  • Analyse und Reporting – Erstellen Sie ein Mitarbeiter-Dashboard, das Umsatztrends, Alterungsberichten und Zahlungsmethodennutzung visualisiert. Verwenden Sie Directus Insights-Modul oder Feed-Daten zu einem BI-Tool wie Metabase.
  • Streitmanagement – Ermöglichen Sie es den Kunden, einen Posten zu markieren oder einen Streit direkt vom Portal aus zu erheben. Speichern Sie Streitigkeiten in einer separaten Directus-Sammlung und weisen Sie sie dem Personal zur Lösung zu.

Best Practices für laufende Wartung und Skalierbarkeit

Ein Kundenportal ist kein Set-and-Forget-Tool, sondern bietet kontinuierliche Verbesserungen, die das Erlebnis sicher, schnell und nützlich halten.

  • Directus aktualisiert – Directus veröffentlicht häufige Sicherheitspatches und Funktionsverbesserungen.
  • Bieten Sie klare Benutzerunterstützung – Fügen Sie ein Hilfecenter in das Portal ein (FAQ-Bereich powered by Directus) und bieten Sie eine direkte Support-E-Mail oder einen Live-Chat an. Erstellen Sie kurze Video-Tutorials für allgemeine Aufgaben wie das Anzeigen von Rechnungen und das Bezahlen.
  • Monitor Access Logs – Directus protokolliert automatisch alle Datenänderungen. Richten Sie Benachrichtigungen für wiederholte fehlgeschlagene Anmeldeversuche oder ungewöhnliche Zugriffsmuster ein (z. B. ein Client, der 500 Rechnungen in einer Minute herunterlädt).
  • Gather Client Feedback – Umfragen Sie Clients nach der Bereitstellung zu Benutzerfreundlichkeit, mobiler Reaktionsfähigkeit und Funktionslücken.
  • Plan für Skalierbarkeit – Aktivieren Sie für Firmen mit Tausenden von Kunden Directus’ eingebauten Cache für leselastige Endpunkte. Verwenden Sie ein CDN, um statische Assets wie PDF-Vorschau zu bedienen, und betrachten Sie die Datenbankindexierung in häufig abgefragten Feldern wie Rechnungsstatus und Kunden-ID.

Schlussfolgerung

Die Implementierung eines Kundenportals zur Online-Ansicht von Gesetzesabrechnungen erfordert kein massives benutzerdefiniertes Entwicklungsprojekt mehr. Durch die Kombination des flexiblen Backends von Directus mit einem speziell dafür vorgesehenen Frontend können Sie eine sichere, transparente und effiziente Erfahrung liefern, die den Verwaltungsaufwand reduziert und die Kundenbeziehungen stärkt. Beginnen Sie mit der Modellierung Ihrer Daten und der Definition strenger Berechtigungen, fügen Sie dann iterativ Zahlungsintegration, Dokumentenmanagement und fortschrittliche Automatisierung hinzu. Regelmäßige Wartungs- und Kundenfeedbackschleifen stellen sicher, dass das Portal auch in den kommenden Jahren ein wertvolles Gut bleibt. Mit der hier beschriebenen Architektur kann Ihr Unternehmen sich zuversichtlich auf ein modernes, kundenzentriertes Abrechnungssystem zubewegen.