CredentialsContainer: get() Methode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

Die get() Methode des CredentialsContainer Interfaces gibt ein Promise zurück, das mit einem einzelnen Credential erfüllt wird, welches dann verwendet werden kann, um einen Benutzer auf einer Website zu authentifizieren.

Die Methode akzeptiert ein einzelnes optionales options Argument, das Folgendes enthalten kann:

  • Eine mediation Eigenschaft, die angibt, wie und ob der Benutzer gebeten werden sollte, an der Operation teilzunehmen. Dies steuert zum Beispiel, ob die Seite einen Benutzer stillschweigend mit einem gespeicherten Credential anmelden kann.
  • Eine signal Eigenschaft, die es ermöglicht, die Operation mit einem AbortController abzubrechen.
  • Eine oder mehrere Eigenschaften — password, federated, identity, otp, publicKey — die die Arten von Credentials angeben, die angefordert werden. Wenn gesetzt, enthalten die Werte dieser Eigenschaften alle Parameter, die der Browser benötigt, um ein passendes Credential des angeforderten Typs zu finden.

Die API erfüllt immer mit einem einzigen Credential oder null. Wenn mehrere Credentials verfügbar sind und Benutzermediation erlaubt ist, wird der Browser den Benutzer bitten, ein einzelnes Credential auszuwählen.

Syntax

js
get()
get(options)

Parameter

options Optional

Ein Objekt, das Optionen für die Anfrage enthält. Es kann die folgenden Eigenschaften enthalten:

mediation Optional

Ein String, der angibt, ob der Benutzer bei jedem Besuch einer Client-App zur Anmeldung aufgefordert wird. Der Wert kann einer der folgenden sein:

"conditional"

Entdeckte Credentials werden dem Benutzer in einem nicht-modalen Dialogfeld zusammen mit einem Hinweis auf den Ursprung präsentiert, der nach Credentials fragt. In der Praxis bedeutet dies, verfügbare Credentials automatisch auszufüllen; siehe Anmeldung mit einem Passkey durch Formular-Autofill für weitere Details zur Verwendung; PublicKeyCredential.isConditionalMediationAvailable() liefert ebenfalls einige nützliche Informationen.

"optional"

Wenn Credentials für eine gegebene Operation ohne Benutzermediation übergeben werden können, werden sie es, was eine automatische Wiederanmeldung ohne Benutzermediation ermöglicht. Wenn Benutzermediation erforderlich ist, wird der Benutzeragent den Benutzer zur Authentifizierung auffordern. Dieser Wert ist für Situationen gedacht, in denen Sie hinreichendes Vertrauen haben, dass ein Benutzer nicht überrascht oder verwirrt über das Auftauchen eines Anmeldedialogs ist – zum Beispiel auf einer Website, die Benutzer nicht automatisch anmeldet, wenn ein Benutzer gerade einen "Login/Signup"-Button geklickt hat.

"required"

Der Benutzer wird immer zur Authentifizierung aufgefordert, selbst wenn das stille Zugreifen verhindern (siehe CredentialsContainer.preventSilentAccess()) auf false gesetzt ist. Dieser Wert ist für Situationen gedacht, in denen Sie die Benutzer-Authentifizierung erzwingen wollen – zum Beispiel, wenn Sie wollen, dass ein Benutzer bei einer sensiblen Operation (wie der Bestätigung einer Kreditkartenzahlung) erneut authentifiziert wird oder wenn Benutzer gewechselt werden.

"silent"

Der Benutzer wird nicht zur Authentifizierung aufgefordert. Der Benutzeragent wird den Benutzer automatisch wieder authentifizieren und anmelden, wenn möglich. Wenn eine Zustimmung erforderlich ist, wird das Promise mit null erfüllt. Dieser Wert ist für Situationen gedacht, in denen Sie wollen, dass ein Benutzer beim Besuch einer Web-App automatisch angemeldet wird, wenn möglich, aber wenn nicht, wollen Sie ihm keinen verwirrenden Anmeldedialog anzeigen. Stattdessen wollen Sie darauf warten, dass er explizit auf einen "Login/Signup"-Button klickt.

Der Standardwert ist "optional".

Hinweis: Im Falle einer federated authentication (FedCM API) Anfrage kann ein mediation-Wert von optional oder silent zu einem Versuch der automatischen Wiederanmeldung führen. Ob dies erfolgt ist, wird dem Identitätsanbieter (IdP) über den is_auto_selected Parameter mitgeteilt, der während der Validierung an den id_assertion_endpoint des IdP gesendet wird, sowie der verlassenden Partei (RP) über die IdentityCredential.isAutoSelected Eigenschaft. Dies ist nützlich für Leistungsevaluierungen, Sicherheitsanforderungen (der IdP könnte wünschen, automatische Wiederanfragen abzulehnen und immer Benutzermediation zu verlangen) sowie für die allgemeine Benutzererfahrung (ein IdP oder RP könnte wünschen, unterschiedliche UX für Auto- und Nicht-Auto-Login-Erfahrungen zu zeigen).

signal Optional

Ein AbortSignal Objektinstanz, die es erlaubt, eine laufende get() Operation abzubrechen. Eine abgebrochene Operation kann normal abgeschlossen werden (normalerweise, wenn der Abbruch nach Abschluss der Operation empfangen wurde) oder mit einem AbortError DOMException abgewiesen werden.

password Optional

Diese Option fordert den Browser auf, ein gespeichertes Passwort als ein PasswordCredential Objekt abzurufen. Es ist ein boolescher Wert.

identity Optional

Diese Option fordert den Browser auf, ein federated identity credential als ein IdentityCredential Objekt unter Verwendung der Federated Credential Management API abzurufen.

Der Wert dieser Option ist ein IdentityCredentialRequestOptions Objekt, das Details der spezifischen Identitätsanbieter enthält, die die Website verwenden möchte.

federated Optional

Diese Option fordert den Browser auf, ein federated identity credential als ein FederatedCredential Objekt abzurufen. Dieses Interface ist jetzt veraltet, und Entwickler sollten bevorzugt die identity Option verwenden, wenn sie verfügbar ist.

Der Wert dieser Option ist ein Objekt mit den folgenden Eigenschaften:

protocols

Ein Array von Strings, die die Protokolle der angeforderten Credentials der föderierten Identitätsanbieter repräsentieren (zum Beispiel "openidconnect").

providers

Ein Array von Strings, die die Anbieter der föderierten Identitäts-Credentials repräsentieren (zum Beispiel "https://www.facebook.com" oder "https://accounts.google.com").

otp Optional

Diese Option fordert den Browser auf, ein Einmal-Passwort (OTP) als ein OTPCredential Objekt abzurufen.

Der Wert dieser Option ist ein Array von Strings, das nur den Stringwert "sms" enthalten kann.

publicKey Optional

Diese Option fordert den Browser auf, eine Behauptung, die mit der Web Authentication API signiert wurde als ein PublicKeyCredential abzurufen.

Der Wert dieser Option ist ein PublicKeyCredentialRequestOptions Objekt.

Rückgabewert

Ein Promise, das mit einer der folgenden Unterklassen von Credential aufgelöst wird:

Wenn konditionale Mediation in dem get() Aufruf spezifiziert war, wird das Browser-UI-Dialog angezeigt und das Promise bleibt schwebend, bis der Benutzer ein Konto auswählt, mit dem er sich anmelden möchte, aus den verfügbaren Auto-Fill-Vorschlägen:

  • Wenn der Benutzer dann eine Geste außerhalb des Browser-UI-Dialogs macht, schließt es sich, ohne das Promise aufzulösen oder abzulehnen und ohne eine Benutzersichtbare Fehlermeldung zu verursachen.
  • Wenn der Benutzer ein Credential auswählt, wird das relevante PublicKeyCredential dem Anrufer zurückgegeben.

Wenn ein einzelnes Credential nicht eindeutig ermittelt werden kann, wird das Promise mit null aufgelöst.

Ausnahmen

AbortError DOMException

Die Anfrage wurde durch einen Aufruf der abort() Methode des AbortController, der mit der signal Option dieser Methode verbunden ist, abgebrochen.

IdentityCredentialError DOMException

Beim Anfordern eines IdentityCredential ist die Anfrage an den ID Assertion Endpoint nicht fähig, die Authentifizierung zu validieren, und lehnt mit einer Fehlermeldung ab, die Informationen über den Grund enthält.

NetworkError DOMException

Beim Anfordern eines IdentityCredential hat der Identitätsanbieter (IdP) nicht innerhalb von 60 Sekunden geantwortet, die bereitgestellten Credentials waren nicht gültig/gefunden, oder der Anmeldestatus des Browsers für den IdP ist auf "abgemeldet" gesetzt (siehe Loginstatus mit der Login Status API aktualisieren für weitere Informationen zum FedCM-Anmeldestatus). Im letzteren Fall kann es eine gewisse Verzögerung bei der Ablehnung geben, um den IdP-Anmeldestatus nicht an die RP weiterzugeben.

NotAllowedError DOMException

In einer der folgenden Situationen ausgelöst:

SecurityError DOMException

Die aufrufende Domain ist keine gültige Domain.

Beispiele

Abrufen eines federierten Identitätscredentials

Vertrauenswürdige Parteien können get() mit der identity Option aufrufen, um eine Anfrage zur Anmeldung der Benutzer bei der vertrauenswürdigen Partei über einen Identitätsanbieter (IdP) mittels Identitätsföderation zu stellen. Eine typische Anfrage sieht so aus:

js
async function signIn() {
  const identityCredential = await navigator.credentials.get({
    identity: {
      providers: [
        {
          configURL: "https://accounts.idp.example/config.json",
          clientId: "********",
          nonce: "******",
        },
      ],
    },
  });
}

Sehen Sie sich Federated Credential Management (FedCM) API für weitere Details darüber an, wie dies funktioniert. Dieser Aufruf beginnt den Anmeldeablauf, der in FedCM-Anmeldeablauf beschrieben ist.

Ein ähnlicher Aufruf, der die context und loginHint Erweiterungen beinhaltet, würde so aussehen:

js
async function signIn() {
  const identityCredential = await navigator.credentials.get({
    identity: {
      context: "signup",
      providers: [
        {
          configURL: "https://accounts.idp.example/config.json",
          clientId: "********",
          nonce: "******",
          loginHint: "user1@example.com",
        },
      ],
    },
  });
}

Wenn der IdP nicht in der Lage ist, eine Anfrage an den ID Assertion Endpoint zu validieren, wird er das Promise, das aus CredentialsContainer.get() zurückgegeben wird, ablehnen:

js
async function signIn() {
  try {
    const identityCredential = await navigator.credentials.get({
      identity: {
        providers: [
          {
            configURL: "https://accounts.idp.example/config.json",
            clientId: "********",
            nonce: "******",
          },
        ],
      },
    });
  } catch (e) {
    // Handle the error in some way, for example provide information
    // to help the user succeed in a future sign-in attempt
    console.error(e);
  }
}

Abrufen eines öffentlichen Schlüsselcredentials

Der folgende Ausschnitt zeigt einen typischen get() Aufruf mit der WebAuthn publicKey Option:

js
const publicKey = {
  challenge: new Uint8Array([139, 66, 181, 87, 7, 203, ...]),
  rpId: "acme.com",
  allowCredentials: [{
    type: "public-key",
    id: new Uint8Array([64, 66, 25, 78, 168, 226, 174, ...])
  }],
  userVerification: "required",
}

navigator.credentials.get({ publicKey })

Ein erfolgreicher get() Aufruf gibt ein Promise zurück, das mit einem PublicKeyCredential Objektinstanz aufgelöst wird, das ein über WebAuthn create() zuvor erstelltes öffentliches Schlüsselcredential darstellt, das nun verwendet wurde, um einen Benutzer zu authentifizieren. Seine PublicKeyCredential.response Eigenschaft enthält ein AuthenticatorAssertionResponse Objekt, das Zugriff auf mehrere nützliche Informationsstücke bietet, darunter die Authenticator-Daten, Unterschrift und Benutzerkennung.

js
navigator.credentials.get({ publicKey }).then((publicKeyCredential) => {
  const response = publicKeyCredential.response;

  // Access authenticator data ArrayBuffer
  const authenticatorData = response.authenticatorData;

  // Access client JSON
  const clientJSON = response.clientDataJSON;

  // Access signature ArrayBuffer
  const signature = response.signature;

  // Access userHandle ArrayBuffer
  const userHandle = response.userHandle;
});

Einige dieser Daten müssen auf dem Server gespeichert werden — zum Beispiel die signature, um den Nachweis zu erbringen, dass der Authenticator den echten privaten Schlüssel besitzt, der zur Erstellung des Credentials verwendet wurde, und die userHandle, um den Benutzer mit dem Credential, dem Anmeldeversuch und anderen Daten zu verknüpfen.

Siehe Authentifizieren eines Benutzers für mehr Informationen darüber, wie der gesamte Ablauf funktioniert.

Abrufen eines Einmal-Passworts

Der folgende Code löst den Berechtigungsfluss des Browsers aus, wenn eine SMS-Nachricht eintrifft. Wird die Berechtigung erteilt, wird das Promise mit einem OTPCredential Objekt aufgelöst. Der darin enthaltene code Wert wird dann als Wert eines <input> Formularelements gesetzt, das anschließend übermittelt wird.

js
navigator.credentials
  .get({
    otp: { transport: ["sms"] },
    signal: ac.signal,
  })
  .then((otp) => {
    input.value = otp.code;
    if (form) form.submit();
  })
  .catch((err) => {
    console.error(err);
  });

Spezifikationen

Specification
Credential Management Level 1
# dom-credentialscontainer-get

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
get
identity option
Experimental
identity.context
Experimental
Error API
ExperimentalNon-standard
identity.providers.loginHint
Experimental
otp option
Experimental
publicKey option
get() extensions
appid extension
largeBlob extension
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.