Diese Seite wurde von der Cloud Translation API übersetzt.

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

Mit Chrome 128 und 129 werden spannende neue Funktionen für WebAuthn eingeführt, zugrunde liegende API nutzen, um Passkey-basierte Authentifizierungssysteme zu entwickeln.

Eiji Kitamura

Hinweise: Mithilfe von Hinweisen können sich verlassende Parteien (RPs) eine bessere Kontrolle über WebAuthn verschaffen. Benutzeroberfläche im Browser. Sie sind besonders hilfreich für Unternehmensnutzer, die um Sicherheitsschlüssel nutzen zu können.
Ähnliche Ursprungsanfragen: mit zugehörigem Ursprung -Anfragen können RPs Passkeys für mehrere Domains gültig machen. Wenn Sie mehrere können Sie Ihren Nutzern jetzt ermöglichen, ihren Passkey auf allen Probleme bei der Anmeldung eliminieren.
JSON-Serialisierung: Mit JSON-Serialisierungs-APIs können Sie den Frontend-Code eines RP durch Codierungs- und Decodierungsoptionen vereinfachen. Anmeldedaten, die an die und von der WebAuthn API übergeben werden.

Hinweise

Mit hints können vertrauende Parteien (RP) nun UI-Einstellungen zum Erstellen eines oder die Authentifizierung mit einem Passkey durchführen.

Wenn ein RP den Authenticator bisher einschränken wollte, den der Nutzer verwenden konnte, einen Passkey erstellen oder zur Authentifizierung authenticatorSelection.authenticatorAttachment zur Angabe von "platform" oder "cross-platform" Sie beschränken den Authenticator jeweils auf eine Plattform Authenticator oder ein Roaming Authenticator. Mit hints kann diese Spezifikation flexibler sein.

Die RP kann das optionale hints-Objekt im PublicKeyCredentialCreationOptions- oder PublicKeyCredentialRequestOptions zur Angabe von "security-key", "client-device" und "hybrid" in einer bevorzugten Reihenfolge in einem Array.

Im Folgenden finden Sie ein Beispiel für eine Anfrage zum Erstellen von Anmeldedaten, "cross-platform" Authenticator mit "security-key" als Hinweis. Dadurch wissen Sie, Chrome zeigt eine Benutzeroberfläche für Unternehmensnutzer an, die auf Sicherheitsschlüssel ausgerichtet ist.

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

Durch Angabe von „security-key“ zeigt der Browser ein Dialogfeld mit einem Fokus auf dem Sicherheitsschlüssel an.

Wenn ein RP ein Szenario für die geräteübergreifende Überprüfung priorisieren möchte, kann er Authentifizierungsanfrage senden, die "cross-platform" Authenticator bevorzugt mit "hybrid" als Hinweis.

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

Durch Angabe von „hybrid“ zeigt der Browser ein Dialogfeld für die geräteübergreifende Anmeldung an. — Durch Angabe von „hybrid“ Hinweis: Im Browser wird ein Dialogfeld für die geräteübergreifende Anmeldung angezeigt.

Mit verwandtem Ursprung können RPs Passkeys von mehreren Domains aus nutzbar machen Zentrale Anmeldung erstellen Erfahrung und die Verwendung von Föderationsprotokollen bleibt die empfohlene Lösung für auf den meisten Websites. Wenn Sie jedoch mehrere Domains und Föderationen haben, könnten ähnliche Ursprünge eine Lösung sein.

Für alle WebAuthn-Anfragen müssen eine ID der vertrauenden Partei (RP ID) und alle Passkeys angegeben werden mit einer einzelnen RP-ID verknüpft sind. Bisher konnte ein Ursprung nur angeben, eine RP-ID basierend auf seiner Domain. In diesem Fall könnte www.example.co.uk angeben, die RP-ID example.co.uk, aber nicht example.com. Mit verwandtem Ursprung Bei Anfragen kann eine beanspruchte RP-ID durch Abrufen einer bekannten JSON-Datei validiert werden befindet sich unter /.well-known/webauthn von der Zieldomain aus. Also: example.co.uk (und example.in, example.de usw.) könnten alle folgende RP-ID verwenden: example.com, wenn example.com sie im folgenden Format angibt:

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 Wiederverwendung von Passkeys zulassen Websites mit verwandtem Ursprung Anfragen.

JSON-Serialisierung

WebAuthn-Anfrage- und -Antwortobjekte haben mehrere Felder, die Rohdaten enthalten. Binärdaten in einem ArrayBuffer, wie z. B. die Anmeldedaten-ID, User-ID oder die Identitätsbestätigung Wenn eine Website JSON verwenden möchte, um diese Daten mit ihrem Server auszutauschen, wird das Binärprogramm -Daten müssen zuerst codiert werden, z. B. mit Base64URL. Dadurch werden unnötige für Entwickler, die Passkeys auf ihren Websites verwenden möchten.

WebAuthn bietet jetzt APIs zum Parsen PublicKeyCredentialCreationOptions und PublicKeyCredentialRequestOptions WebAuthn fordert Objekte direkt aus JSON an und serialisiert die PublicKeyCredential Antwort direkt in JSON. Alle Felder mit ArrayBuffer-Werten, die Rohbinärwerte enthalten Daten werden automatisch von ihren Base64URL-codierten Werten oder in ihre Base64URL-codierten Werte konvertiert. Diese APIs sind ab Chrome 129 verfügbar.

Rufen Sie vor dem Erstellen eines Passkeys einen JSON-codierten PublicKeyCredentialCreationOptions-Objekt vom Server und decodieren Sie es mithilfe von PublicKeyCredential.parseCreationOptionsFromJSON().

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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 er an den Server gesendet werden kann.

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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 und decodieren Sie es mit PublicKeyCredential.parseRequestOptionsFromJSON().

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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
  });
  ...

Codieren Sie nach der Authentifizierung mit einem Passkey die resultierenden Anmeldedaten mit toJSON(), damit sie an den Server gesendet werden kann.

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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

Ähnliche Ursprungsanfragen

JSON-Serialisierung

Weitere Informationen