Login-Bereich erstellen
Ein Anmeldeformular, das jeder bedienen kann
Benutzerfeld, Passwortfeld, Anmeldeknopf: drei Stellen im Login.
Login-Architektur
Das Formular ist nur die Eingangstür
Ein belastbarer Login verbindet zugängliche Eingabe, serverseitige Prüfung, Sitzung und Berechtigung.
Drei Wege durch denselben Login-Bereich
Die Vertrauensgrenze liegt am Server. Sichtbar angemeldet zu sein ersetzt dort keine Berechtigungsprüfung.
autocomplete erlaubt Passwortmanagern beide Felder zuzuordnen.Set-CookieSecure; HttpOnly; SameSite=Lax; Path=/GET /projekte/42Eine gültige Sitzung nennt die Identität.403 sendenZugänglicher Eingang
Das Passwort muss nicht aus dem Gedächtnis kommen
WCAG 2.2 erlaubt Benutzername und Passwort, wenn Browser oder Passwortmanager die Felder ausfüllen können. Kopieren und Einfügen darf nicht blockiert werden.
autocomplete="current-password"Implementierungsvertrag
Browser und Server teilen die Arbeit sauber auf
Das HTML beschreibt Eingabe und Fehler. Der Server prüft, rotiert, begrenzt und entscheidet.
<h1>Anmelden</h1>
<form action="/anmelden" method="post">
<p id="login-error" role="alert">
E-Mail-Adresse oder Passwort stimmt nicht.
</p>
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email"
autocomplete="username" required
aria-describedby="login-error">
<label for="password">Passwort</label>
<input id="password" name="password" type="password"
autocomplete="current-password" required
aria-describedby="login-error">
<a href="/passwort-vergessen">Passwort vergessen?</a>
<button type="submit">Anmelden</button>
</form>Rendern Sie den Fehlerabsatz nur nach einem fehlgeschlagenen Versuch.
POST /anmelden
konto = findeKonto(email)
hash = konto?.passwortHash ?? DUMMY_HASH
gültig = prüfePasswort(passwort, hash)
wenn !konto oder !gültig:
antworte mit demselben neutralen Fehler
lösche alte Sitzungskennung
sitzung = erzeugeSitzung(konto.id)
Set-Cookie: __Host-session=<zufällig>;
Secure; HttpOnly; SameSite=Lax; Path=/
JEDE GESCHÜTZTE ANFRAGE
sitzung = liesUndPrüfeCookie()
wenn !sitzung: antworte 401
wenn !darfZugreifen(sitzung.konto, ressource):
antworte 403
liefere ressourceSameSite ergänzt den CSRF-Schutz; es ersetzt kein passendes CSRF-Token für zustandsändernde Anfragen.
Sitzungsende
Abmelden ist eine Serveraktion
Prüfprotokoll
Vier Belege statt „funktioniert bei mir“
- Tastatur
- Felder, Recovery-Link und Anmelden in verständlicher Reihenfolge; jeder Fokus sichtbar.
- Hilfsmittel
- Labels werden angesagt, Autofill und Einfügen funktionieren, Fehler erscheint als Meldung.
- Sitzung
- Kennung wechselt beim Login; Cookie trägt Secure, HttpOnly, SameSite und Path.
- Zugriff
- Fremde Objekt-ID und abgelaufene Sitzung liefern 403 beziehungsweise 401, auch bei direkter URL.
Aus dem Prüfbericht
Drei Befunde im Anmeldeformular
Kritisch Benutzername und Passwort ohne Beschriftung Regel label
Ein Platzhalter verschwindet beim Tippen und ist kein Name. Ein label mit for verbindet den sichtbaren Text mit dem Login-Feld.
Kritisch Der Knopf zum Anzeigen des Passworts Regel button-name
Ein Augensymbol ohne Wort bleibt namenlos. Ein aria-label sagt, dass der Knopf das eingegebene Passwort sichtbar macht.
Kritisch Der Eingabezweck ist frei erfunden Regel autocomplete-valid
Nur die standardisierten Werte helfen beim Ausfüllen. Für eine Anmeldung sind das username und current-password.
Zum Mitnehmen
Das Anmeldeformular, korrigiert
Zwei Beschriftungen, zwei gültige Eingabezwecke, ein Name am Knopf.
Korrektur in 3 Schritten ansehen
Die beiden Felder beschriften
Ein label mit for auf die id macht den sichtbaren Text zum Namen des Felds. Der Platzhalter bleibt allenfalls ein Beispiel.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="text" name="user" placeholder="Benutzername"> <input type="password" name="pass" placeholder="Passwort">Nachher
<label for="user">Benutzername</label> <input id="user" type="text" name="user"> <label for="pass">Passwort</label> <input id="pass" type="password" name="pass">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Passwort“. Springt der Cursor ins Feld, sitzt die Verbindung.
Den Eingabezweck gültig setzen
username und current-password sind die standardisierten Werte für eine Anmeldung. Erfundene Werte helfen beim Ausfüllen nicht.
KorrekturvergleichSchritt 2 · HTML Vorher
<input id="user" type="text" name="user" autocomplete="loginname"> <input id="pass" type="password" name="pass" autocomplete="passwort">Nachher
<input id="user" type="text" name="user" autocomplete="username"> <input id="pass" type="password" name="pass" autocomplete="current-password">Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie das Formular mit gespeicherten Zugangsdaten. Der Browser bietet beide Werte an.
Den Knopf am Passwortfeld benennen
Das Symbol bleibt für Vorleseprogramme verborgen. Ein aria-label nennt die Aktion, die der Knopf am Passwortfeld auslöst.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="button" class="reveal"> <span aria-hidden="true">👁</span> </button>Nachher
<button type="button" class="reveal" aria-label="Passwort anzeigen"> <span aria-hidden="true">👁</span> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf den Knopf. Ein Vorleseprogramm sagt „Passwort anzeigen, Schaltfläche“.