Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

IdentityProvider: `getUserInfo()` statische Methode

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die getUserInfo() statische Methode der IdentityProvider Schnittstelle liefert Informationen über einen Benutzer, der angemeldet ist, welche verwendet werden können, um eine personalisierte Willkommensnachricht und Anmeldebutton bereitzustellen. Diese Methode muss aus einem IdP Ursprung <iframe> aufgerufen werden, sodass relying party (RP) Skripte nicht auf die Daten zugreifen können. Dies muss geschehen, nachdem ein Benutzer sich bei einer RP-Site angemeldet hat.

Dieses Muster ist bereits auf Websites, die Identitätsföderation für die Anmeldung nutzen, üblich, aber getUserInfo() bietet einen Weg, dies ohne die Abhängigkeit von Drittanbieter-Cookies zu erreichen.

Syntax

js
IdentityProvider.getUserInfo(config)

Parameter

config

Ein Konfigurationsobjekt, das die folgenden Eigenschaften enthalten kann:

configURL

Die URL der Konfigurationsdatei des Identitätsanbieters, von dem Sie Benutzerinformationen erhalten möchten.

clientId

Die von der IdP ausgegebene Client-Kennung der RP.

Rückgabewert

Ein Promise, das mit einem Array von Objekten erfüllt wird, wobei jedes Objekt Informationen über ein separates Benutzerkonto enthält. Jedes Objekt enthält die folgenden Eigenschaften:

email

Ein String, der die E-Mail-Adresse des Benutzers darstellt.

name

Ein String, der den vollständigen Namen des Benutzers darstellt.

givenName

Ein String, der den Vornamen (Spitz- oder abgekürzten Namen) des Benutzers darstellt.

picture

Ein String, der die URL des Profilbilds des Benutzers darstellt.

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn die angegebene configURL ungültig ist oder wenn der Ursprung des eingebetteten Dokuments nicht mit der configURL übereinstimmt.

NetworkError DOMException

Wird ausgelöst, wenn der Browser nicht in der Lage ist, eine Verbindung zur IdP herzustellen oder wenn getUserInfo() aus dem obersten Dokument aufgerufen wird.

NotAllowedError DOMException

Wird ausgelöst, wenn das einbettende <iframe> keine identity-credentials-get Permissions-Policy gesetzt hat, um die Verwendung von getUserInfo() zu erlauben, oder wenn die FedCM-API global durch eine Richtlinie im obersten Dokument deaktiviert ist.

Beschreibung

Wenn getUserInfo() aufgerufen wird, sendet der Browser eine Anfrage an den angegebenen IdP Kontenlisten-Endpunkt für die Benutzerinformationen nur unter den folgenden Bedingungen:

  • Der Benutzer hat sich zuvor mit der FedCM beim RP mit dem IdP im gleichen Browser angemeldet und die Daten wurden nicht gelöscht.
  • Der Benutzer ist im gleichen Browser beim IdP angemeldet.

getUserInfo() muss innerhalb eines eingebetteten <iframe> aufgerufen werden, und der Ursprung der eingebetteten Seite muss mit der configURL des IdP übereinstimmen. Darüber hinaus muss die eingebettete HTML die Nutzung explizit über die identity-credentials-get Permissions-Policy erlauben:

html
<iframe
  src="https://idp.example/signin"
  allow="identity-credentials-get"></iframe>

Beispiele

Grundlegende Verwendung von IdentityProvider.getUserInfo()

Das folgende Beispiel zeigt, wie die IdentityProvider.getUserInfo()-Methode genutzt werden kann, um Informationen über einen bereits angemeldeten Benutzer von einem bestimmten IdP zurückzugeben.

js
// Iframe displaying a page from the https://idp.example origin
const userInfo = await IdentityProvider.getUserInfo({
  configURL: "https://idp.example/fedcm.json",
  clientId: "client1234",
});

// IdentityProvider.getUserInfo() returns an array of user information.
if (userInfo.length > 0) {
  // Returning accounts should be first, so the first account received
  // is guaranteed to be a returning account
  const name = userInfo[0].name;
  const givenName = userInfo[0].given_name;
  const displayName = givenName || name;
  const picture = userInfo[0].picture;
  const email = userInfo[0].email;

  // …

  // Render the personalized sign-in button using the information above
}

Spezifikationen

Specification
Federated Credential Management API
# dom-identityprovider-getuserinfo

Browser-Kompatibilität

Siehe auch