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ü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'
}
}
});
<ph type="x-smartling-placeholder">![Durch Angabe von „security-key“ zeigt der Browser ein Dialogfeld mit einem Fokus auf dem Sicherheitsschlüssel an.](https://developer.chrome.com/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=de)
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'
}
}
});
<ph type="x-smartling-placeholder">![Durch Angabe von „hybrid“ zeigt der Browser ein Dialogfeld für die geräteübergreifende Anmeldung an.](https://developer.chrome.com/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=de)
Ähnliche Ursprungsanfragen
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">
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">
...
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">
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">
...
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: