IdentityProvider — Schnittstelle · JavaScript-Referenz

Signatur

interface IdentityProvider

Beschreibung

Das Interface IdentityProvider gehört zur Federated Credential Management API (FedCM). Mit dieser API melden sich Nutzer bei einer vertrauenden Website (Relying Party, RP) über einen Identitätsanbieter (IdP) an, ohne dass der Browser Drittanbieter-Cookies oder Umleitungen braucht. Das Interface wird nicht instanziiert: Es hat keinen Konstruktor und stellt nur statische Methoden bereit, die vor allem aus Code aufgerufen werden, der zum IdP gehört.

Die wichtigsten Methoden sind:

IdentityProvider.getUserInfo(config) – liefert Informationen über Konten, mit denen sich der Nutzer bei dieser RP bereits über den IdP angemeldet hat. So kann ein IdP-<iframe> auf der RP-Seite einen personalisierten Anmeldeknopf anzeigen, etwa „Weiter als Max“.
IdentityProvider.close() – teilt dem Browser mit, dass der Anmeldevorgang im Anmelde-Popup des IdP beendet ist, und schließt das Fenster.
IdentityProvider.resolve(token, options) – wird in der Fortsetzungsseite (Continuation API, continue_on) aufgerufen, um den Anmeldevorgang mit einem Token abzuschließen. Dieses Token erhält die RP dann als Ergebnis von navigator.credentials.get().

Die eigentliche Anmeldung startet die RP über navigator.credentials.get({ identity: … }). IdentityProvider ergänzt diesen Ablauf um die Seite des IdP. Alle Methoden stehen nur in sicheren Kontexten (HTTPS) zur Verfügung. Außerdem müssen sie von einem Ursprung aus aufgerufen werden, der zum configURL des IdP passt.

Parameter

Name	Typ	Default	Beschreibung
$config Pflicht	{ configURL: string, clientId: string }		Parameter von `getUserInfo()`: `configURL` ist die URL der IdP-Konfigurationsdatei. Sie muss denselben Ursprung haben wie das aufrufende Dokument. `clientId` ist die Client-ID, die der IdP der RP zugewiesen hat.
$token Pflicht	string		Parameter von `resolve()`: das Token, das an die RP zurückgegeben wird.
$options	{ accountId?: string }	{}	Parameter von `resolve()`: optionale Konto-ID, mit der der Browser das gewählte Konto zuordnet.

Rückgabewert

Typ

Promise<Array<{ email: string, name: string, givenName: string, picture: string }>> | Promise<undefined> | void

Beschreibung

getUserInfo() gibt ein Promise zurück, das mit einem Array von Kontoinformationen erfüllt wird. resolve() gibt ein Promise zurück, das mit undefined erfüllt wird. close() gibt nichts zurück (undefined).

Beispiele

Personalisierten Anmeldeknopf im IdP-iframe anzeigen

// Läuft in einem iframe von https://idp.example, eingebettet auf der RP-Seite
const zeigeAnmeldeknopf = async () => {
  const button = document.querySelector('#login');
  if (!('IdentityProvider' in window)) return;
  try {
    const konten = await IdentityProvider.getUserInfo({
      configURL: 'https://idp.example/fedcm.json',
      clientId: 'rp-client-123'
    });
    if (konten.length > 0) {
      const [konto] = konten;
      button.textContent = `Weiter als ${konto.givenName}`;
    }
  } catch (err) {
    // z. B. NetworkError, wenn der Nutzer noch nie über den IdP angemeldet war
    console.warn('Keine Kontoinformationen:', err.name);
  }
};

zeigeAnmeldeknopf();

Button-Text z. B.: "Weiter als Max"

Anmeldung von der RP-Seite aus starten

// Läuft auf https://rp.example
const anmelden = async () => {
  const credential = await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: 'https://idp.example/fedcm.json',
        clientId: 'rp-client-123',
        nonce: crypto.randomUUID()
      }]
    }
  });
  console.log('Token vom IdP:', credential.token);
};

document.querySelector('#fedcm-login').addEventListener('click', anmelden);

Token vom IdP: eyJhbGciOi...

Fortsetzungsseite: Anmeldung mit resolve() abschließen

// Seite, die über continue_on im IdP-Popup geöffnet wurde
document.querySelector('#erlauben').addEventListener('click', async () => {
  const res = await fetch('/api/issue-token', { method: 'POST', credentials: 'include' });
  const { token, accountId } = await res.json();
  // Token an die RP übergeben; der Browser schließt das Popup
  await IdentityProvider.resolve(token, { accountId });
});

// Nach einem Login im Anmelde-Popup (login_url) stattdessen:
// IdentityProvider.close();

// Wichtig · Fallstricke

Kompatibilität: FedCM gibt es derzeit nur in Chromium-basierten Browsern. getUserInfo() ist ab Chrome 116 verfügbar, resolve() kam mit der Continuation API deutlich später hinzu. Firefox und Safari unterstützen die API nicht. Prüfe vor jeder Nutzung per Feature-Detection, z. B. mit 'IdentityProvider' in window.
Ursprung: getUserInfo() funktioniert nur, wenn das aufrufende Dokument, meist ein IdP-iframe, denselben Ursprung wie configURL hat. Andernfalls wird das Promise abgelehnt.
getUserInfo() liefert nur Daten, wenn sich der Nutzer bereits früher per FedCM bei dieser RP angemeldet hat und beim IdP noch angemeldet ist. Ohne eine solche Verbindung wird das Promise mit einem Fehler abgelehnt. Behandle deshalb immer den Fehlerfall.
Eine Permissions-Policy (identity-credentials-get) kann den Aufruf in eingebetteten Frames blockieren. Die RP muss den iframe dafür ausdrücklich freigeben, z. B. mit allow=\"identity-credentials-get\".
Das Interface hat keinen Konstruktor. new IdentityProvider() wirft einen TypeError.
Sicherheit: Die zurückgegebenen Nutzerdaten sind personenbezogen. Gib sie nicht ohne Grund an die einbettende Seite weiter, zum Beispiel per postMessage.

Siehe auch

IdentityCredential CredentialsContainer.get() IdentityProvider.getUserInfo() IdentityProvider.close() NavigatorLogin