Prova dell'origine: mediazione immediata di WebAuthn per un accesso senza problemi

José Luis Zapata

Data di pubblicazione: 19 ago 2025

La mediazione immediata di WebAuthn è una nuova funzionalità web progettata per semplificare i flussi di accesso degli utenti. Questa prova dell'origine fornisce una panoramica della funzionalità, dei suoi vantaggi e dei dettagli di implementazione, invitandoti a partecipare e contribuire a plasmare il futuro dell'autenticazione web.

Sfondo

L'autenticazione sul web spesso introduce attrito, complicando l'accesso degli utenti. I flussi WebAuthn esistenti, sebbene potenti, hanno difficoltà con i pulsanti "Accedi", soprattutto quando le credenziali non sono immediatamente disponibili, il che porta a fallback dei moduli standard.

Questa nuova funzionalità introduce un flusso di accesso semplice, simile alle API preferImmediatelyAvailableCredentials sui dispositivi mobili. Semplifica l'accesso, spesso prima dei moduli di accesso standard, riducendo le difficoltà e migliorando l'esperienza utente.

Come funziona

La mediazione immediata di WebAuthn consente un'esperienza di accesso più diretta ed efficiente. Consente al browser di offrire immediatamente le credenziali disponibili o di segnalare immediatamente la loro assenza senza richiedere l'autenticazione cross-device o con token di sicurezza, il che semplifica l'implementazione per gli sviluppatori.

Il tipo di mediazione immediate

Stiamo introducendo un tipo di mediazione immediate per le richieste navigator.credentials.get(). Quando questa opzione è impostata, la promessa viene rifiutata con NotAllowedError se non vengono trovate credenziali disponibili localmente. Se sono presenti credenziali, il browser gestisce la procedura di autenticazione come di consueto.

Questa flessibilità consente ai siti di adattare il flusso di accesso, fornendo metodi alternativi quando le credenziali immediate non sono disponibili.

È importante sottolineare che i browser possono comunque restituire NotAllowedError per tutelare la privacy e la sicurezza degli utenti, evitando problemi come l'impronta digitale o il monitoraggio.

Rilevamento delle funzionalità

Puoi rilevare se è disponibile la mediazione immediata utilizzando PublicKeyCredential.getClientCapabilities(). Gli sviluppatori possono verificare la funzionalità immediateGet nell'oggetto capabilities restituito.

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

Nota:per favorire un supporto più ampio dei browser, è disponibile un polyfill per getClientCapabilities() nel repository GitHub di WebAuthn Polyfills.

Esempio di implementazione

Per utilizzare l'API, chiama navigator.credentials.get() con mediation: 'immediate'. Ti consigliamo di includere password: true nella richiesta, in quanto la maggior parte degli utenti probabilmente ha una password salvata oggi e può trarre immediatamente vantaggio da questa esperienza.

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

Gli sviluppatori devono gestire NotAllowedError in un blocco catch per fornire un'esperienza di accesso di riserva ottimale.

Un flusso passo passo per la mediazione immediata

La mediazione immediata di WebAuthn supporta due casi d'uso principali per semplificare l'accesso degli utenti: l'attivazione di un pulsante dedicato "Accedi con passkey" che sopprime le opzioni di fallback indesiderate e la facilitazione di un flusso di accesso dinamico che offre le credenziali in modo proattivo prima di un'azione critica per l'utente.

Caso d'uso 1: accesso esplicito con il pulsante di accesso

Questo scenario si concentra sulla fornitura di un pulsante di accesso dedicato, garantendo un'esperienza utente pulita senza prompt imprevisti o passaggi attraverso una pagina di accesso.

1. L'utente avvia l'accesso:l'utente fa clic su un pulsante "Accedi". La relying party chiama poi navigator.credentials.get() con mediation: "immediate".
2. Richieste del browser per la selezione delle credenziali (se disponibili): il browser verifica la presenza di passkey disponibili localmente o di password richieste. Se ne trova, mostra immediatamente una UI modale in cui l'utente può scegliere un account. Gli account vengono classificati in base al timestamp dell'ultimo utilizzo e poi in ordine alfabetico. Nota: se vengono trovate sia password che passkey di più gestori delle password per lo stesso account, il browser dà la priorità alle passkey. Quando esistono più passkey per lo stesso account di diversi fornitori, viene data la priorità all'ultima passkey utilizzata.
3. Accesso riuscito:l'utente seleziona la passkey dall'interfaccia utente del browser. Se il browser richiede la verifica, chiede all'utente di verificare la propria identità utilizzando il metodo configurato in precedenza (ad esempio un PIN, l'input biometrico o una sequenza). L'accesso viene completato correttamente.
4. Percorso di fallback: nessuna passkey o chiusura da parte dell'utente:se non sono disponibili passkey locali o password richieste per il sito oppure se l'utente chiude la UI del browser, il browser genera un NotAllowedError per la relying party e non mostra alcuna UI per le opzioni cross-device o del token di sicurezza. La relying party può quindi procedere con la sua pagina di accesso standard o offrire meccanismi di autenticazione alternativi.

Caso d'uso 2: flusso di accesso implicito prima di un'azione dell'utente

Questo scenario consente un'esperienza di accesso proattiva, offrendo passkey e password prima che un utente esegua un'azione che richiede uno stato autenticato, ad esempio il pagamento.

1. L'utente avvia un'azione che richiede l'accesso:l'utente fa clic su un pulsante per un'azione che richiede l'accesso (ad esempio, un pulsante "Checkout"). La relying party chiama quindi navigator.credentials.get() con mediation: "immediate".

2. Richieste del browser per la selezione delle credenziali (se disponibili): il browser verifica la presenza di passkey o password disponibili localmente. Se li trova, mostra immediatamente una UI modale in cui l'utente può scegliere un account. Gli account sono classificati in base al timestamp dell'ultimo utilizzo, poi in ordine alfabetico e vengono deduplicati per mostrare una sola voce per account. Nota: quando vengono trovate sia password che passkey di più gestori delle password per lo stesso account, il browser dà la priorità alle passkey. Quando esistono più passkey per lo stesso account di provider diversi, viene data la priorità all'ultima passkey utilizzata.

3. Accesso riuscito:l'utente seleziona una credenziale dall'interfaccia utente del browser. Se il browser richiede la verifica, chiede all'utente di verificare la propria identità utilizzando il metodo configurato in precedenza (ad esempio un PIN, un input biometrico o una sequenza). L'accesso viene completato correttamente.

4. Percorso di fallback: nessuna credenziale o chiusura da parte dell'utente:se non sono disponibili credenziali locali per il sito o se l'utente chiude la UI del browser, il browser genera un NotAllowedError per la relying party e non mostra alcuna UI. L'esperienza di accesso dell'utente rimane invariata rispetto a oggi. La relying party può quindi chiedere all'utente ulteriori dettagli (ad esempio, l'indirizzo email) o mostrare meccanismi di autenticazione alternativi, come un modulo per la password, la verifica tramite SMS o una richiesta modale WebAuthn che supporta autenticatori cross-device.

Vantaggi

L'intermediazione immediata di WebAuthn offre diversi vantaggi chiave per sviluppatori e utenti:

• Accesso senza problemi: offre un'esperienza di accesso più fluida e senza problemi per gli utenti che hanno passkey o password immediatamente disponibili salvate nel browser o nel gestore delle password.
• Accesso intelligente:l'API consente un flusso di accesso quando l'utente vuole svolgere attività che richiedono l'accesso. che si adattano in modo intelligente allo stato delle credenziali dell'utente. Offre l'autenticazione immediata, quando possibile, evitando reindirizzamenti non necessari e semplificando il flusso.
• Gestione delle credenziali migliorata: quando più gestori delle password offrono credenziali per lo stesso account, il browser seleziona in modo intelligente l'opzione più appropriata, semplificando la gestione delle credenziali per gli utenti.
• Riduzione della confusione degli utenti:presentando direttamente le credenziali note, la funzionalità riduce al minimo la confusione degli utenti spesso associata a più opzioni di accesso o moduli standard.
• Fallback senza interruzioni:garantisce un fallback senza interruzioni alle pagine di accesso standard per gli utenti senza credenziali immediate, il che significa che la loro esperienza rimane invariata rispetto ai flussi attuali.

Privacy e sicurezza

La mediazione immediata di WebAuthn consente ai siti di identificare la presenza di credenziali immediatamente disponibili prima che un utente autorizzi esplicitamente un tentativo di accesso. Per salvaguardare la privacy degli utenti e prevenire potenziali abusi, implementiamo diverse misure fondamentali:

• Requisito di gesto dell'utente:la chiamata API richiede un gesto dell'utente (qualsiasi attivazione temporanea dell'utente). In questo modo, i siti hanno difficoltà a eseguire il probing e l'impronta silenziosi.
• Sessioni di navigazione in incognito e private:nelle sessioni di navigazione in incognito o private, qualsiasi richiesta di mediazione immediata genera NotAllowedError.
• Limitazioni relative agli elenchi allowCredentials: le richieste che utilizzano elenchi allowCredentials generano NotAllowedError. In questo modo, i siti non possono dedurre la cronologia delle interazioni degli utenti o monitorarli nel corso delle sessioni.
• Annullamento:l'impostazione del parametro signal in una richiesta con mediazione immediata non è valida. Ciò impedisce ai siti di chiudere programmaticamente qualsiasi UI del browser.

Prova

Ti invitiamo a sperimentare la mediazione immediata di WebAuthn.

Stato in Chrome

Questa funzionalità sta avanzando nel ciclo di sviluppo di Chromium:

• Computer:prova per sviluppatori in Chrome 136, con una prova dell'origine da Chrome 139 a 141.
• Android: Dev Trial in Chrome 140.

Per i test locali

Per testare la mediazione immediata di WebAuthn in locale:

1. Scarica Chrome 139:scarica e apri l'ultima versione di Chrome sul tuo computer.
2. Attiva il flag di mediazione immediata:vai a chrome://flags/#web-authentication-immediate-get nella barra degli indirizzi e attiva il flag "Web Authentication Immediate Get".
3. Prepara le credenziali:assicurati di avere passkey e password utilizzabili salvate:
   • Password salvate in Gestore delle password di Google.
   • Passkey salvate in Gestore delle password di Google (richiede l'accesso e la sincronizzazione di Chrome con un Account Google), Windows Hello o Portachiavi iCloud.

Per i test pubblici (prova dell'origine)

Per testare la mediazione immediata di WebAuthn con la prova dell'origine in un ambiente pubblico:

1. Registrati:visita la pagina delle prove dell'origine di Chrome e registrati per la prova "WebAuthn immediate mediation".
2. Aggiungi token alle intestazioni HTTP: includi il token di prova dell'origine fornito nelle intestazioni HTTP del tuo sito: HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

Nota:puoi anche fornire i token in modo programmatico con JavaScript.

Scenari di test

Forniamo un'implementazione di riferimento e ti invitiamo a creare il tuo prototipo per testare vari scenari.

• Demo di riferimento:puoi provare l'implementazione di riferimento all'indirizzo https://deephand.github.io/webauthn-immediate-demo/.
  • Implementa un prototipo: quando implementi un prototipo sul tuo sito, assicurati di effettuare la chiamata navigator.credentials.get() con mediation: 'immediate' dopo un clic dell'utente (ad esempio, un pulsante "Accedi" o qualsiasi interazione che richiede l'accesso dell'utente).
• Flusso 1: accesso senza password o passkey:se non hai passkey o password disponibili per il sito, facendo clic su "Accedi" si apre direttamente la pagina di accesso standard, senza che venga visualizzata l'interfaccia utente del browser.
• Flusso 2: accedi con una passkey locale disponibile immediatamente:se hai una passkey salvata per il sito, facendo clic su "Accedi" dovrebbe essere visualizzata l'interfaccia utente di mediazione immediata, che offre la passkey per la selezione.
• Flusso 3: accedi con una passkey o una password locale:se hai salvato sia passkey che password, attiva l'opzione "Richiedi password" (impostando password: true nel codice). Se fai clic su "Accedi", dovresti visualizzare sia l'opzione della passkey sia quella della password nell'interfaccia utente di Immediate Mediation.