Jetzt neu: Hinweise, Anfragen zu ähnlichen Ursprungsservern und JSON-Serialisierung für WebAuthn in Chrome  |  Blog  |  Chrome for Developers (2024)

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

• 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ürUnternehmensnutzer, dieum 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 mehrerekönnen Sie Ihren Nutzern jetzt ermöglichen, ihren Passkey auf allenProbleme 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 einesoder 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 AuthentifizierungauthenticatorSelection.authenticatorAttachment zur Angabe von "platform" oder"cross-platform" Sie beschränken den Authenticator jeweils auf eine PlattformAuthenticatoroder ein RoamingAuthenticator.Mit hints kann diese Spezifikation flexibler sein.

Die RP kann das optionale hints-Objekt im PublicKeyCredentialCreationOptions- oderPublicKeyCredentialRequestOptions 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' } }});

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

</ph>

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

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

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

</ph>

Mit verwandtem Ursprung können RPsPasskeys von mehreren Domains aus nutzbar machen Zentrale Anmeldung erstellenErfahrung und die Verwendung von Föderationsprotokollenbleibt die empfohlene Lösung fürauf den meisten Websites. Wenn Sie jedoch mehrere Domainsund 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 werdenmit 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 UrsprungBei Anfragen kann eine beanspruchte RP-ID durch Abrufen einer bekannten JSON-Datei validiert werdenbefindet 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 zulassenWebsites mit verwandtem UrsprungAnfragen.

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ätigungWenn 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ötigefür Entwickler, die Passkeys auf ihren Websites verwenden möchten.

WebAuthn bietet jetzt APIs zum ParsenPublicKeyCredentialCreationOptionsundPublicKeyCredentialRequestOptionsWebAuthn fordert Objekte direkt aus JSON an und serialisiert diePublicKeyCredentialAntwort direkt in JSON. Alle Felder mit ArrayBuffer-Werten, die Rohbinärwerte enthaltenDaten 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-codiertenPublicKeyCredentialCreationOptions-Objekt vom Server und decodieren Sie es mithilfe vonPublicKeyCredential.parseCreationOptionsFromJSON().

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.

 ... 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-codiertesPublicKeyRequestCreationOptions vom Server und decodieren Sie es mitPublicKeyCredential.parseRequestOptionsFromJSON().

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 mittoJSON(), damit sie an den Server gesendet werden kann.

 ... 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:

• Passkeys | Chrome für Entwickler
• Einführung in serverseitige PasskeysImplementierung
• passkeys.dev