IdentityProvider.getUserInfo() — Methode · JavaScript-Referenz

Signatur

IdentityProvider.getUserInfo(config)

Beschreibung

IdentityProvider.getUserInfo() gehört zur Federated Credential Management API (FedCM). Ein Identitätsanbieter (IdP), dessen Inhalt als <iframe> auf der Website eines Dienstanbieters (Relying Party, RP) eingebettet ist, kann damit Informationen über Benutzer abrufen, die sich bereits früher über FedCM bei genau dieser RP angemeldet haben. Typischer Einsatz ist ein personalisierter Knopf wie „Weiter als Max Mustermann“ mit Profilbild.

Intern ruft der Browser den im Konfigurationsdokument (configURL) angegebenen accounts_endpoint auf. Zurückgegeben werden nur Konten, bei denen die clientId der RP im Feld approved_clients steht. Das Promise erfüllt sich mit einem Array von Objekten mit email, name, givenName und picture. Das zuletzt verwendete Konto steht dabei vorn.

Die Methode ist statisch, du rufst sie also direkt auf IdentityProvider auf. Sie funktioniert nur in einem iframe, dessen Ursprung mit dem Ursprung der configURL übereinstimmt. Außerdem muss der Benutzer beim IdP angemeldet sein. Die eigentliche Anmeldung läuft danach weiter über navigator.credentials.get() mit der Option identity.

Parameter

Name	Typ	Beschreibung
$config Pflicht	Object	Konfigurationsobjekt mit den folgenden Eigenschaften.
$config.configURL Pflicht	string	URL des FedCM-Konfigurationsdokuments des IdP (z. B. `https://idp.example/fedcm.json`). Muss denselben Ursprung wie das aufrufende iframe haben.
$config.clientId Pflicht	string	Die Client-ID, die der IdP der RP zugewiesen hat. Sie wird mit `approved_clients` der Konten abgeglichen.

Rückgabewert

Typ

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

Beschreibung

Promise, das sich mit einem Array von Benutzerinformationen erfüllt (zuletzt verwendetes Konto zuerst). Es wird abgelehnt, zum Beispiel mit NetworkError, InvalidStateError oder NotAllowedError, wenn die Voraussetzungen fehlen oder keine verbundenen Konten existieren.

Beispiele

Personalisierten Anmeldeknopf im IdP-iframe anzeigen

// Läuft im iframe von https://idp.example, eingebettet auf der RP-Seite
const zeigeWillkommen = async () => {
  const button = document.querySelector('#login');
  try {
    const users = await IdentityProvider.getUserInfo({
      configURL: 'https://idp.example/fedcm.json',
      clientId: 'rp-client-123'
    });

    if (users.length > 0) {
      const { givenName, name, picture } = users[0];
      button.textContent = `Weiter als ${givenName || name}`;
      const img = document.createElement('img');
      img.src = picture;
      img.alt = '';
      button.prepend(img);
    }
  } catch (err) {
    // Kein verbundenes Konto oder Voraussetzungen nicht erfüllt
    console.warn('getUserInfo fehlgeschlagen:', err.name);
    button.textContent = 'Mit IdP anmelden';
  }
};

zeigeWillkommen();

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

Feature-Erkennung und Ausgabe aller verbundenen Konten

const ladeKonten = async () => {
  if (typeof IdentityProvider === 'undefined' ||
      typeof IdentityProvider.getUserInfo !== 'function') {
    console.log('FedCM getUserInfo wird nicht unterstützt');
    return [];
  }
  const konten = await IdentityProvider.getUserInfo({
    configURL: 'https://idp.example/fedcm.json',
    clientId: 'rp-client-123'
  });
  konten.forEach(({ name, email }) => console.log(`${name} <${email}>`));
  return konten;
};

ladeKonten().catch(err => console.error(err.name, err.message));

Max Mustermann <max@example.com>

RP bettet das IdP-iframe mit passender Berechtigung ein

// Auf der Seite der Relying Party
const iframe = document.createElement('iframe');
iframe.src = 'https://idp.example/button.html';
// Erlaubt FedCM-Aufrufe im Cross-Origin-iframe
iframe.allow = 'identity-credentials-get';
document.querySelector('#idp-slot').append(iframe);

// Wichtig · Fallstricke

Nur in Chromium-Browsern (ab Chrome 116) verfügbar, nicht in Firefox und Safari. Prüfe die Unterstützung immer vorher und sieh einen Standard-Anmeldeknopf als Ausweichlösung vor.
Der Aufruf gelingt nur, wenn alle Voraussetzungen erfüllt sind: Aufruf aus einem iframe mit demselben Ursprung wie configURL, eingebettet in eine RP-Seite; der Benutzer ist beim IdP angemeldet; das Konto hat die RP über FedCM schon früher freigegeben (approved_clients). Andernfalls wird das Promise abgelehnt. Behandle das nicht als Fehler, sondern zeige einfach einen neutralen Knopf.
Ein Aufruf im Hauptdokument des IdP selbst (Top-Level) wird abgelehnt.
Das Feld approved_clients muss im Accounts-Endpunkt korrekt gepflegt sein. Fehlt es, liefert die Methode keine Konten.
Datenschutz: Die Daten stammen aus dem Accounts-Endpunkt des IdP. Gib nur aus, was der Benutzer erwartet, und nutze die Methode nicht zum Verfolgen (Tracking) von Benutzern.
Nur in sicheren Kontexten (HTTPS) verfügbar.

Siehe auch

IdentityProvider IdentityCredential CredentialsContainer.get() Navigator.credentials IdentityCredential.disconnect() PositionSensorVRDevice.resetSensor()