Introduzione di suggerimenti, richieste di origini correlate e serializzazione JSON per WebAuthn in Chrome

Chrome 128 e 129 introducono nuove entusiasmanti funzionalità per WebAuthn, l'API sottostante per creare sistemi di autenticazione basati su passkey.

Eiji Kitamura

• 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'
    }
  }
});

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

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:

• Passkey | Chrome per gli sviluppatori
• Introduzione alla passkey lato server implementazione
• passkeys.dev