Diese Seite wurde von der Cloud Translation API übersetzt.

Jetzt neu: Hinweise, Anfragen zu ähnlichen Ursprungsservern und JSON-Serialisierung für WebAuthn in Chrome

In Chrome 128 und 129 wurden spannende neue Funktionen für WebAuthn eingeführt – die zugrunde liegende API zum Erstellen passkey-basierter Authentifizierungssysteme.

Eiji Kitamura

Hinweise: Mithilfe von Hinweisen können vertrauende Seiten (Relying Parties, RPs) die WebAuthn-Benutzeroberfläche im Browser besser steuern. Sie sind besonders hilfreich für Unternehmensnutzer, die Sicherheitsschlüssel verwenden möchten.
Ähnliche Ursprungsanfragen: Mit ähnlichen Ursprungsanfragen können RPs Passkeys für mehrere Domains gültig machen. Wenn Sie mehrere Websites haben, können Sie Ihren Nutzern jetzt ermöglichen, ihren Passkey auf Ihren Websites wiederzuverwenden, um Probleme bei der Anmeldung zu vermeiden.
JSON-Serialisierung: Mit JSON-Serialisierungs-APIs können Sie den Frontend-Code eines RP vereinfachen, indem Sie Optionen und Anmeldedaten codieren und decodieren, die an die und von der WebAuthn API übergeben werden.

Hinweise

Mit hints können vertrauende Seiten (Relying Parties, RP) jetzt UI-Einstellungen für das Erstellen eines Passkeys oder die Authentifizierung mit einem Passkey angeben.

Bisher konnte ein RP den Authenticator einschränken, mit dem Nutzer einen Passkey erstellen oder sich authentifizieren können. Dazu musste er authenticatorSelection.authenticatorAttachment verwenden, um "platform" oder "cross-platform" anzugeben. Sie beschränken den Authenticator entsprechend auf einen Plattform-Authenticator oder einen Roaming-Authenticator. Mit hints kann diese Spezifikation flexibler sein.

Der RP kann optional hints in PublicKeyCredentialCreationOptions oder PublicKeyCredentialRequestOptions verwenden, um "security-key", "client-device" und "hybrid" in einer bevorzugten Reihenfolge in einem Array anzugeben.

Im folgenden Beispiel wird eine Anfrage zum Erstellen von Anmeldedaten mit der Präferenz für "cross-platform"-Authentifikatoren mit "security-key" als Hinweis gezeigt. Dadurch wird Chrome angewiesen, für Unternehmensnutzer eine Benutzeroberfläche zu zeigen, die auf Sicherheitsschlüssel ausgerichtet ist.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Wenn Sie „security-key“ als Hinweis angeben, zeigt der Browser ein Dialogfeld für Sicherheitsschlüssel an.

Wenn ein RP ein geräteübergreifendes Bestätigungsszenario priorisieren möchte, kann er eine Authentifizierungsanfrage senden, bei der "cross-platform"-Authentifikatoren mit "hybrid" als Hinweis bevorzugt werden.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Wenn Sie „hybrid“ als Hinweis angeben, zeigt der Browser ein geräteübergreifendes Anmeldedialogfeld an.

Mit ähnlichen Ursprungsanfragen können RPs Passkeys aus mehreren Domains verwenden können. Für die meisten Websites wird weiterhin empfohlen, eine zentralisierte Anmeldung zu erstellen und Föderationsprotokolle zu verwenden. Wenn Sie jedoch mehrere Domains haben und eine Verknüpfung nicht möglich ist, können verwandte Ursprünge eine Lösung sein.

Alle WebAuthn-Anfragen müssen eine Relying-Party-ID (RP-ID) angeben. Alle Passkeys sind mit einer einzelnen RP-ID verknüpft. Bisher konnte für einen Ursprung nur eine RP-ID basierend auf seiner Domain angegeben werden. In diesem Fall konnte www.example.co.uk also eine RP-ID von example.co.uk, aber nicht example.com angeben. Bei Anfragen mit zugehörigem Ursprung kann eine angegebene RP-ID durch Abrufen einer bekannten JSON-Datei unter /.well-known/webauthn aus der Zieldomain validiert werden. So könnte example.co.uk (und example.in, example.de usw.) dieselbe RP-ID von example.com verwenden, wenn example.com im folgenden Format angegeben wird:

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

Weitere Informationen zum Einrichten verwandter Ursprungsanfragen finden Sie unter Passkeys für alle Websites mit verwandten Ursprungsanfragen wiederverwenden.

JSON-Serialisierung

WebAuthn-Anfrage- und Antwortobjekte haben mehrere Felder, die rohe Binärdaten in einem ArrayBuffer enthalten, z. B. die Anmeldedaten-ID, die Nutzer-ID oder die Herausforderung. Wenn eine Website diese Daten über JSON mit ihrem Server austauschen möchte, müssen die Binärdaten zuerst codiert werden, z. B. mit Base64URL. Das erhöht die Komplexität für Entwickler, die Passkeys auf ihren Websites verwenden möchten.

WebAuthn bietet jetzt APIs zum Parsen von PublicKeyCredentialCreationOptions- und PublicKeyCredentialRequestOptions-WebAuthn-Anfrageobjekten direkt aus JSON und zum Serialisieren der PublicKeyCredential-Antwort direkt in JSON. Alle Felder mit ArrayBuffer-Werten, die rohe Binärdaten enthalten, werden automatisch in ihre Base64URL-codierten Werte umgewandelt oder daraus zurück. Diese APIs sind seit Chrome 129 verfügbar.

Bevor Sie einen Passkey erstellen, rufen Sie ein JSON-codiertes PublicKeyCredentialCreationOptions-Objekt vom Server ab und decodieren Sie es mit PublicKeyCredential.parseCreationOptionsFromJSON().

Unterstützte Browser

Quelle

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

Nachdem Sie einen Passkey erstellt haben, codieren Sie die Anmeldedaten mit toJSON(), damit sie an den Server gesendet werden können.

Unterstützte Browser

Quelle

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

Rufen Sie vor der Authentifizierung mit einem Passkey ein JSON-codiertes PublicKeyRequestCreationOptions vom Server ab und decodieren Sie es mit PublicKeyCredential.parseRequestOptionsFromJSON().

Unterstützte Browser

Quelle

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

Nachdem Sie sich mit einem Passkey authentifiziert haben, codieren Sie die resultierenden Anmeldedaten mit der toJSON()-Methode, damit sie an den Server gesendet werden können.

Unterstützte Browser

Quelle

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

Weitere Informationen

Weitere Informationen zu WebAuthn und Passkeys finden Sie in den folgenden Ressourcen:

Jetzt neu: Hinweise, Anfragen zu ähnlichen Ursprungsservern und JSON-Serialisierung für WebAuthn in Chrome

Hinweise

Anfragen mit ähnlichem Ursprung

JSON-Serialisierung

Weitere Informationen