NavigatorLogin — Schnittstelle · JavaScript-Referenz

Signatur

interface NavigatorLogin

Beschreibung

Das Interface NavigatorLogin gehört zur Federated Credential Management API (FedCM). Seine Instanz erreichst du über navigator.login. Es stellt die Methode setStatus() bereit. Damit meldet ein föderierter Identitätsanbieter (IdP) dem Browser, ob der Nutzer auf seiner Seite gerade angemeldet ("logged-in") oder abgemeldet ("logged-out") ist. Diesen Mechanismus nennt man auch Login Status API.

Der Browser speichert diesen Status für jeden IdP-Ursprung (Origin). Später fragt eine vertrauende Seite (Relying Party, RP) mit navigator.credentials.get({ identity: … }) nach einer Anmeldung. Ist der Status dann "logged-out", lehnt der Browser die Anfrage ab, ohne das Accounts-Endpoint des IdP anzufragen. So erfährt der IdP nichts über den Besuch, und das schützt die Privatsphäre. Ist der Status "logged-in", ruft der Browser die Kontenliste ab. Ist die Liste leer, kann er einen Dialog zur Anmeldung beim IdP anzeigen. Die Adresse dafür steht als login_url in der IdP-Konfigurationsdatei.

Rufe setStatus() auf dem Ursprung des IdP auf, also nicht auf der Relying Party. Das geschieht typischerweise direkt nach einer erfolgreichen Anmeldung bzw. Abmeldung. Statt JavaScript kannst du den Status auch über den HTTP-Antwort-Header Set-Login: logged-in bzw. Set-Login: logged-out setzen. Das eignet sich besonders für serverseitige Login-Abläufe.

Parameter

Name	Typ	Default	Beschreibung
$status Pflicht	"logged-in" \| "logged-out"		Einziger Parameter der Methode `NavigatorLogin.setStatus(status)`. Er gibt den neuen Anmeldestatus des Nutzers beim IdP an.

Beispiele

Status nach erfolgreicher Anmeldung setzen (IdP-Seite)

// Läuft auf https://idp.example nach dem Absenden des Login-Formulars
const anmelden = async (benutzer, passwort) => {
  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ benutzer, passwort }),
    credentials: 'include'
  });
  if (!res.ok) throw new Error('Anmeldung fehlgeschlagen');

  // Dem Browser mitteilen: Nutzer ist beim IdP angemeldet
  if ('login' in navigator) {
    await navigator.login.setStatus('logged-in');
    console.log('FedCM-Status: logged-in');
  }
};

anmelden('anna', 'geheim').catch(console.error);

FedCM-Status: logged-in

Status beim Abmelden zurücksetzen

const abmelden = async () => {
  await fetch('/api/logout', { method: 'POST', credentials: 'include' });

  // Künftige FedCM-Anfragen von RPs werden ohne Netzwerkzugriff abgelehnt
  await navigator.login?.setStatus('logged-out');
  console.log('FedCM-Status: logged-out');
};

document.querySelector('#logout')?.addEventListener('click', abmelden);

FedCM-Status: logged-out

Alternative: Status per HTTP-Header setzen (Node.js/Express)

import express from 'express';

const app = express();
app.use(express.json());

app.post('/api/login', (req, res) => {
  // ... Zugangsdaten prüfen, Session-Cookie setzen ...
  res.set('Set-Login', 'logged-in');
  res.json({ ok: true });
});

app.post('/api/logout', (req, res) => {
  res.set('Set-Login', 'logged-out');
  res.json({ ok: true });
});

app.listen(3000, () => console.log('IdP läuft auf Port 3000'));

IdP läuft auf Port 3000

Feature-Erkennung mit Fehlerbehandlung

const setzeLoginStatus = async (status) => {
  if (!navigator.login?.setStatus) {
    console.warn('Login Status API nicht verfügbar – Fallback nötig');
    return false;
  }
  try {
    await navigator.login.setStatus(status);
    return true;
  } catch (err) {
    console.error('setStatus fehlgeschlagen:', err.name);
    return false;
  }
};

setzeLoginStatus('logged-in').then((ok) => console.log('Erfolg:', ok));

Erfolg: true

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Schnittstelle gibt es derzeit nur in Chromium-Browsern (Chrome/Edge ab etwa Version 120). Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer vorher mit 'login' in navigator, ob sie verfügbar ist.
Die API steht nur in einem sicheren Kontext (HTTPS) zur Verfügung.
Rufe setStatus() auf dem Ursprung des IdP auf, und zwar im Hauptdokument oder in einem gleichursprünglichen (same-origin) iframe. Ruft eine Relying Party die Methode für einen fremden IdP auf, hat das keine Wirkung auf dessen Status.
Der Status ist nur ein Hinweis an den Browser und kein Sicherheitsmerkmal. Die eigentliche Authentifizierung läuft weiterhin über Cookies bzw. Sessions des IdP.
Vergisst der IdP beim Abmelden "logged-out" zu setzen, zeigt der Browser womöglich einen FedCM-Dialog mit einer leeren Kontenliste. Vergisst er umgekehrt nach dem Anmelden "logged-in", schlagen FedCM-Anfragen stillschweigend fehl.
Den HTTP-Header Set-Login wertet der Browser auch bei Antworten auf Unterressourcen aus, z. B. bei fetch-Aufrufen. Er ist oft robuster als der JavaScript-Aufruf.

Siehe auch

Navigator.login NavigatorLogin.setStatus() IdentityCredential CredentialsContainer.get() IdentityProvider Navigator