Navigator.login — Eigenschaft · JavaScript-Referenz

Signatur

readonly Navigator.login

Beschreibung

navigator.login gibt ein NavigatorLogin-Objekt zurück. Es gehört zur Login Status API, einem Teil der Federated Credential Management API (FedCM). Über die Methode navigator.login.setStatus() teilt ein föderierter Identitätsanbieter (z. B. ein Dienst für „Anmelden mit …“) dem Browser mit, ob gerade ein Benutzer bei ihm angemeldet ist ("logged-in") oder nicht ("logged-out").

Der Browser speichert diesen Status pro IdP-Ursprung. Bei einem späteren Aufruf von navigator.credentials.get({ identity: … }) auf einer vertrauenden Website (Relying Party, RP) weiß der Browser dann ohne Netzwerkanfrage, ob er Konten beim IdP abrufen kann. Ist der Status "logged-out", kann er stattdessen direkt einen Anmeldedialog anbieten, der die im IdP-Konfigurationsfile angegebene login_url öffnet. Dadurch entstehen keine unnötigen, datenschutzrelevanten Anfragen an den IdP.

Verwenden Sie die Eigenschaft nur auf den Seiten des Identitätsanbieters, typischerweise direkt nach erfolgreicher Anmeldung bzw. Abmeldung. Alternativ kann der Server den Status über den HTTP-Antwort-Header Set-Login: logged-in bzw. Set-Login: logged-out setzen. Mit der JavaScript-Variante arbeitet man, wenn die Anmeldung clientseitig abgeschlossen wird, etwa in Single-Page-Anwendungen oder in einem Anmelde-Popup.

Rückgabewert

Typ

NavigatorLogin

Beschreibung

Das NavigatorLogin-Objekt des aktuellen Browserkontexts. Seine einzige Methode ist setStatus(status). Sie nimmt "logged-in" oder "logged-out" entgegen und liefert ein Promise<undefined>. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Unterstützung prüfen

// Feature-Erkennung, bevor die Login Status API genutzt wird
const hasLoginStatusApi = 'login' in navigator && typeof navigator.login?.setStatus === 'function';

console.log(hasLoginStatusApi
  ? 'Login Status API verfügbar'
  : 'Login Status API nicht verfügbar – Fallback über Set-Login-Header');

Login Status API verfügbar (in Chromium 120+) Login Status API nicht verfügbar – Fallback über Set-Login-Header (z. B. Firefox)

Status nach Anmeldung und Abmeldung beim IdP setzen

// Läuft auf der Website des Identitätsanbieters, z. B. https://idp.example
const updateLoginStatus = async (status) => {
  if (!navigator.login) return;
  try {
    await navigator.login.setStatus(status);
    console.log(`FedCM-Status gesetzt: ${status}`);
  } catch (err) {
    console.warn('setStatus fehlgeschlagen:', err.name);
  }
};

const signIn = async (email, password) => {
  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
    credentials: 'include'
  });
  if (res.ok) await updateLoginStatus('logged-in');
  return res.ok;
};

const signOut = async () => {
  await fetch('/api/logout', { method: 'POST', credentials: 'include' });
  await updateLoginStatus('logged-out');
};

FedCM-Status gesetzt: logged-in

Anmelde-Popup des IdP schließen (FedCM-Flow)

// Seite hinter der login_url des IdP-Konfigurationsfiles.
// Der Browser öffnet sie, wenn der Status "logged-out" war.
const form = document.querySelector('#login-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const res = await fetch('/api/login', {
    method: 'POST',
    body: new FormData(form),
    credentials: 'include'
  });

  if (res.ok) {
    await navigator.login.setStatus('logged-in');
    // Dem Browser mitteilen, dass der Anmeldedialog fertig ist.
    // Danach setzt er den FedCM-Flow auf der RP fort.
    IdentityProvider.close?.();
  }
});

// Wichtig · Fallstricke

Experimentell: Bisher nur in Chromium-basierten Browsern (ab etwa Version 120). Firefox und Safari unterstützen die Eigenschaft nicht. Prüfen Sie daher immer mit 'login' in navigator, bevor Sie sie verwenden.
Nur im sicheren Kontext: Die Eigenschaft steht ausschließlich unter HTTPS bzw. localhost zur Verfügung.
Nur der IdP selbst: Der Status gilt immer für den Ursprung, der setStatus() aufruft. Eine vertrauende Website (RP) kann damit nicht den Status eines fremden IdP setzen. Aus ursprungsfremden iframes schlägt der Aufruf fehl.
Der Status ist nur ein Hinweis für den Browser und kein Authentifizierungsnachweis. Sicherheitsentscheidungen müssen weiterhin serverseitig über Sitzung bzw. Token getroffen werden.
Vergessen Sie den Aufruf mit "logged-out" bei der Abmeldung nicht. Sonst versucht der Browser weiter, Konten abzurufen, und zeigt fehlerhafte Dialoge an. Gleiches gilt, wenn die Sitzung serverseitig abläuft: Setzen Sie den Status dann per Set-Login-Header zurück.
Der gleichwertige HTTP-Header Set-Login: logged-in | logged-out ist oft robuster, weil er ohne JavaScript und direkt mit der Sitzungsänderung auf dem Server wirkt.

Siehe auch

Navigator.credentials NavigationTransition.committed Navigator.locks Navigator.plugins Navigator.gpu