Chrome 128 e 129 introducono nuove entusiasmanti funzionalità per WebAuthn, l'API sottostante per creare sistemi di autenticazione basati su passkey.
- Suggerimenti: i suggerimenti offrono alle parti coinvolte (RP) un maggiore controllo su WebAuthn UI nel browser. Sono particolarmente utili per gli utenti aziendali che vogliono per utilizzare i token di sicurezza.
- Richieste di origini correlate: con l'origine correlata. richieste, le parti soggette a limitazioni possono rendere le passkey valide su più domini. Se possiedi più account puoi consentire agli utenti di riutilizzare la passkey sui tuoi siti, eliminando le difficoltà legate all'accesso.
- Serializzazione JSON: le API di serializzazione JSON consentono di semplificare il codice frontend di una parte soggetta a limitazioni mediante opzioni di codifica e decodifica. passate da e verso l'API WebAuthn.
Suggerimenti
Con hints
, le parti coinvolte ora possono specificare le preferenze UI per la creazione di una
tramite una passkey o l'autenticazione con una passkey.
In precedenza, quando una parte soggetta a limitazioni voleva limitare l'autenticatore che l'utente può usare,
creare una passkey o usare l'autenticazione, potrebbero usare
authenticatorSelection.authenticatorAttachment
per specificare "platform"
o
"cross-platform"
. Limitano rispettivamente l'autenticatore a una piattaforma
autenticatore
o un roaming
di autenticazione.
Con hints
, questa specifica può essere più flessibile.
La parte soggetta a limitazioni può usare il campo facoltativo hints
nel campo PublicKeyCredentialCreationOptions
o
PublicKeyCredentialRequestOptions
per specificare "security-key"
,
"client-device"
e "hybrid"
in ordine di preferenza in un array.
Di seguito è riportato un esempio di richiesta di creazione di credenziali che preferisce
"cross-platform"
di autenticazione con "security-key"
come suggerimento. Questo indica
Chrome per mostrare una UI basata su token di sicurezza per gli utenti aziendali.
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
hints: ['security-key'],
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![specificando "security-key" come suggerimento, il browser mostra una finestra di dialogo incentrata sul token di sicurezza.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=it)
Quando un RP vuole dare la priorità a uno scenario di verifica cross-device, può
invia una richiesta di autenticazione che preferisce "cross-platform"
di autenticazione
con "hybrid"
come suggerimento.
const credential = await navigator.credentials.create({
publicKey: {
challenge: *****,
residentKey: true,
hints: ['hybrid']
authenticatorSelection: {
authenticatorAttachment: 'cross-platform'
}
}
});
![Specificando "ibrido" come suggerimento, il browser mostra una finestra di dialogo incentrata sull'accesso cross-device.](https://developer.chrome.google.cn/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=it)
Richieste di origine correlate
Con origine correlata richieste, le parti soggette a limitazioni possono rendere le passkey utilizzabili da più domini. Creazione di un accesso centralizzato esperienza e l'utilizzo di protocolli di federazione rimane la soluzione consigliata sulla maggior parte dei siti. Tuttavia, se possiedi più domini e la federazione non è possibile, diverse origini correlate può essere una soluzione.
Tutte le richieste WebAuthn devono specificare un ID componente di base (ID RP) e tutte le passkey
sono associate a un singolo ID parte soggetta a limitazioni. Tradizionalmente, un'origine poteva specificare solo
un ID parte soggetta a limitazioni in base al suo dominio, quindi in questo caso www.example.co.uk
potrebbe specificare
un ID parte soggetta a limitazioni di example.co.uk
, ma non example.com
. Con origine correlata
Richieste: un ID parte soggetta a limitazioni dichiarata può essere convalidato recuperando un file JSON noto.
si trova all'indirizzo /.well-known/webauthn
dal dominio di destinazione. Quindi example.co.uk
(e example.in
, example.de
e così via) potrebbero utilizzare tutti un ID parte soggetta a limitazioni di
example.com
se example.com
li specifica nel seguente formato:
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"
]
}
Per scoprire come configurare le richieste di origini correlate, vedi Consentire il riutilizzo delle passkey nei tuoi siti con origine correlata Richieste.
Serializzazione JSON
Gli oggetti di richiesta e risposta WebAuthn hanno più campi che contengono dati non elaborati dati binari in un Arraybu, come l'ID credenziali, l'ID utente o il challenge. Se un sito web vuole utilizzare JSON per scambiare questi dati con il proprio server, i dati devono prima essere codificati, ad esempio con Base64URL. Ciò aggiunge inutili per gli sviluppatori che vogliono iniziare a utilizzare le passkey sui propri siti web.
WebAuthn ora offre API per analizzare
PublicKeyCredentialCreationOptions
e
PublicKeyCredentialRequestOptions
WebAuthn richiede gli oggetti direttamente da JSON e serializzare
PublicKeyCredential
la risposta direttamente in JSON. Tutti i campi con valori ArrayBuffer che contengono file binario non elaborato
vengono convertiti automaticamente da o ai relativi valori codificati in Base64URL.
Queste API sono disponibili a partire dalla versione 129 di Chrome.
Prima di creare una passkey, recupera un file JSON codificato
PublicKeyCredentialCreationOptions
dal server e decodificarlo utilizzando
PublicKeyCredential.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,
});
...
Dopo aver creato una passkey, codifica la credenziale risultante utilizzando toJSON()
in modo da
affinché possa essere inviato al server.
...
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);
...
Prima di eseguire l'autenticazione con una passkey, recupera un file JSON codificato
PublicKeyRequestCreationOptions
dal server e decodificarlo utilizzando
PublicKeyCredential.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
});
...
Dopo l'autenticazione con una passkey, codifica la credenziale risultante utilizzando
toJSON()
in modo da poter essere inviato al server.
...
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);
...
Scopri di più
Per scoprire di più su WebAuthn e sulle passkey, consulta le seguenti risorse: