Funzionalità del client WebAuthn

WebAuthn è lo standard moderno alla base delle passkey. Invece di basarsi sulle password tradizionali, sfrutta la crittografia a chiave pubblica, consentendo agli utenti di autenticarsi con le passkey, che possono includere dati biometrici (come impronte digitali o riconoscimento facciale) o chiavi di sicurezza fisiche. Questo cambiamento non solo aumenta la sicurezza, ma migliora anche l'esperienza utente eliminando la necessità di gestire le password.

Lo standard WebAuthn Level 3 introduce nuove funzionalità del client (recuperabili tramite l'API del browser getClientCapabilities()), volte a fornire a sviluppatori e piattaforme maggiore controllo e flessibilità nell'implementazione delle passkey. Questi aggiornamenti apportano miglioramenti che semplificano il processo di integrazione delle passkey su dispositivi, browser e piattaforme, garantendo un percorso utente più fluido e coerente.

In questo post del blog, risponderemo alle seguenti domande:

1. Cosa sono le funzionalità del client WebAuthn?
2. Quali funzionalità del client WebAuthn esistono?
3. In che modo le funzionalità del client WebAuthn migliorano le implementazioni delle passkey?
4. Perché le funzionalità del client WebAuthn sono importanti sia per gli sviluppatori che per i product manager?

Alla fine di questo articolo, vedremo come queste funzionalità ci aiutano a creare flussi di autenticazione fluidi e sicuri, in linea con le aspettative degli utenti moderni.

Le funzionalità del client WebAuthn sono un insieme di caratteristiche che consentono a browser e piattaforme di comunicare quali tipi di funzionalità WebAuthn supportano. In parole semplici, agiscono come un "elenco di funzionalità" che permette ai siti web di sapere quali metodi e impostazioni di autenticazione sono disponibili sul dispositivo di un utente. Questo consente agli sviluppatori di personalizzare i flussi di autenticazione in base alle capacità del client, garantendo un'esperienza utente più fluida e sicura.

Ad esempio, se un browser segnala di supportare l'autenticazione biometrica (come il Touch ID), gli sviluppatori possono progettare i loro flussi di accesso per offrire agli utenti l'opzione di accedere con un'impronta digitale. Al contrario, se il browser non supporta determinate funzionalità, gli sviluppatori possono fornire opzioni di fallback, come una password o un OTP via SMS.

Lo standard WebAuthn di livello 3 introduce diverse nuove funzionalità del client che rendono le implementazioni delle passkey più versatili e facili da usare. Il primo supporto per la chiamata API getClientCapabilities() è stato introdotto in Safari 17.4.

Per rilevare il supporto nel browser, il seguente snippet può essere utile:

// Check if PublicKeyCredential is supported in the current browser
if (typeof PublicKeyCredential === "undefined") {
    console.log("PublicKeyCredential is not supported in this browser.");
}
 
// Check if getClientCapabilities method exists on PublicKeyCredential
if (typeof PublicKeyCredential.getClientCapabilities === "function") {
    try {
        let capabilities = await PublicKeyCredential.getClientCapabilities();
        console.log(capabilities);
    } catch (error) {
        console.error("Error getting client capabilities:", error);
    }
} else {
    console.log("getClientCapabilities is not supported in this browser");
}

getClientCapabilities() consente a siti web e app di interrogare il client (ad esempio, browser o dispositivo) per determinare quali funzionalità WebAuthn supporta. Comprendendo le capacità del client, gli sviluppatori possono ottimizzare i flussi di autenticazione per sfruttare le funzionalità disponibili, come l'autenticazione biometrica, e fornire metodi alternativi se alcune funzionalità sono assenti.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

Diamo un'occhiata più da vicino alle funzionalità del client WebAuthn e a come influenzano l'integrazione delle passkey:

conditionalCreate abilita la creazione automatica di passkey in base a condizioni specifiche. Un'applicazione potrebbe usare questa funzionalità per creare automaticamente una passkey durante la compilazione automatica della password se il gestore di password ha il supporto corrispondente. Questa funzione aiuta a promuovere l'adozione delle passkey e il loro uso successivo, facendo passare automaticamente gli utenti dalle password alle passkey.

Simile a conditionalCreate, conditionalGet attiva automaticamente gli accessi con passkey. Questo è utile in scenari in cui si desidera abilitare la migliore UX per le passkey, rendendo l'accesso non solo senza password ma anche senza nome utente (gli utenti devono solo cliccare sulla passkey selezionata in una finestra modale/menu a discesa per autenticarsi). Utilizzando questa funzionalità, gli sviluppatori possono garantire che l'autenticazione con passkey avvenga solo quando appropriato, riducendo al minimo le richieste non necessarie e migliorando l'esperienza utente.

hybridTransport garantisce che le passkey possano essere utilizzate su dispositivi diversi, abilitando un'autenticazione cross-device fluida (tramite codici QR e Bluetooth). Ad esempio, un utente potrebbe usare una passkey memorizzata sul proprio smartphone per accedere a un servizio sul proprio computer desktop. Questa funzionalità consente agli utenti di autenticarsi in modo sicuro senza dover trasferire manualmente le passkey o fare affidamento su metodi di accesso convenzionali per ogni dispositivo, promuovendo un'esperienza di autenticazione unificata.

Gli autenticatori di piattaforma, come Windows Hello, Face ID o Touch ID, sono integrati direttamente nei dispositivi e offrono un'esperienza con passkey più rapida, fluida e sicura, consentendo agli utenti di autenticarsi con dati biometrici o altri metodi nativi del dispositivo (ad esempio, un PIN o una sequenza).

Become part of our Passkeys Community for updates & support.

Join

userVerifyingPlatformAuthenticator garantisce che l'autenticazione con passkey includa la verifica dell'utente, come una scansione attiva dell'impronta digitale o il riconoscimento facciale, fornendo un ulteriore livello di sicurezza.

La funzionalità relatedOrigins consente un'autenticazione fluida tra diversi domini di proprietà della stessa organizzazione (ad esempio, amazon.com e amazon.de). Ad esempio, se un'azienda gestisce più domini o ha diversi sottodomini, gli utenti possono accedere una sola volta e accedere a tutte le proprietà senza doversi ri-autenticare su ciascuna di esse. Questa funzionalità semplifica l'esperienza utente, riducendo l'attrito, ed è particolarmente preziosa per le aziende in ambienti internazionali o con piattaforme multi-servizio.

Il metodo signalAllAcceptedCredentials(options) fornisce l'elenco completo dei WebAuthn credential ID per un dato utente. Le Relying Party di WebAuthn dovrebbero usare questo metodo al posto di signalUnknownCredential() quando l'utente è autenticato, poiché non c'è rischio di fuga di dati sulla privacy. Questo metodo offre una panoramica completa delle credenziali a chiave pubblica di un utente, incluse eventuali modifiche recenti che potrebbero non essere state aggiornate sugli autenticatori attualmente connessi.

Diamo un'occhiata a un esempio. Un utente (userId: A) ha 2 passkey con Credential ID che, codificati in Base64URL, corrispondono a X e Y. Successivamente, l'utente elimina la passkey X nelle impostazioni dell'account del servizio web (example.com) (quindi la chiave pubblica viene eliminata). Ora, eseguiamo il seguente snippet:

PublicKeyCredential.signalAllAcceptedCredentials({
    rpId: "example.com",
    userId: "A", // WebAuthn User Handle, Base64URL.
    allAcceptedCredentialIds: ["Y"],
});

Se l'autenticatore è disponibile al momento dell'esecuzione del codice sopra, allora l'autenticatore elimina o nasconde la passkey X dalle future cerimonie di autenticazione. Tuttavia, l'autenticatore potrebbe non essere collegato al momento dell'esecuzione, quindi si raccomanda alle relying party di eseguire periodicamente questo codice, ad esempio ad ogni accesso.

Le passkey non presenti in allAcceptedCredentialIds verranno rimosse o nascoste, potenzialmente in modo irreversibile. È quindi importante che le relying party prestino attenzione a non rimuovere mai dalla lista i WebAuthn credential ID validi. Se un credential ID valido è stato accidentalmente rimosso, la relying party dovrebbe includerlo immediatamente in un'altra chiamata a signalAllAcceptedCredentials(options) il prima possibile per "scoprire" la passkey. Se la passkey non è nascosta ma rimossa, c'è poco da fare per risolvere il problema.

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

Il metodo signalCurrentUserDetails(options) segnala il nome corrente dell'utente e il suo WebAuthn Display Name. Quando signalCurrentUserDetails(options) viene chiamato, il client segue una serie di passaggi definiti per eseguire questa azione.

Vediamo un esempio. Un utente con WebAuthn User ID A aggiorna il proprio nome nelle impostazioni dell'account di un sito web (example.com). A questo punto, la relying party può eseguire il seguente codice:

PublicKeyCredential.signalCurrentUserDetails({
    rpId: "example.com",
    userId: "A", // user ID, Base64URL.
    name: "New user name",
    displayName: "New display name",
});

L'autenticatore aggiornerebbe quindi i metadati della passkey salvata localmente. Il grande vantaggio è che nelle future richieste di Conditional UI / compilazione automatica della passkey, il menu di selezione / a discesa della Conditional UI mostrerà il nome e il WebAuthn Display Name aggiornati.

Il metodo signalUnknownCredential(options) segnala che un Credential ID WebAuthn non è riconosciuto dalla Relying Party di WebAuthn, ad esempio se la passkey è stata eliminata dall'utente. A differenza di signalAllAcceptedCredentials(options), questo metodo non richiede di fornire l'elenco completo degli ID delle credenziali accettate e lo User Handle WebAuthn, prevenendo così potenziali fughe di dati sulla privacy a chiamanti non autenticati.

Vediamo un esempio. Un utente elimina una passkey con credential ID X nelle impostazioni dell'account di un sito web (example.com) (quindi la chiave pubblica viene eliminata). Tuttavia, la chiave privata è ancora disponibile sul dispositivo dell'utente. Ciò significa che nelle future richieste di accesso con Conditional UI / compilazione automatica della passkey (con un elenco allowCredentials vuoto), la passkey può ancora essere selezionata. Il tentativo di accesso fallirà, poiché la chiave pubblica è già stata eliminata, quindi la relying party dovrebbe eseguire:

PublicKeyCredential.signalUnknownCredential({
    rpId: "example.com",
    credentialId: "X", // credential ID the user just tried, Base64URL
});

L'autenticatore eliminerebbe o nasconderebbe quindi la passkey con credential ID X dalle future cerimonie di autenticazione.

Poiché lo standard WebAuthn di livello 3 è ancora in fase di bozza, l'adozione di queste nuove funzionalità del client non è ancora completamente diffusa. I diversi browser hanno implementato gradualmente queste funzionalità, ma il supporto varia. Di seguito è riportata una panoramica aggiornata della disponibilità nei principali browser citati sopra:

Il ritmo di adozione probabilmente accelererà man mano che il livello 3 maturerà e più browser rilasceranno queste funzionalità. Se volete vedere quanti utenti possono già usufruire di getClientCapabilities(), potete controllare i dati reali utilizzando il Passkeys Analyzer gratuito. Tenete d'occhio le note di rilascio dei browser e la documentazione pertinente per pianificare una compatibilità più ampia man mano che si evolve.

Are your users passkey-ready?

Test Passkey-Readiness

Come sviluppatori, potreste chiedervi cosa significhi per voi questo nuovo rilevamento delle funzionalità del client WebAuthn e come dovreste usarlo nella vostra app. Di seguito, trovate alcune raccomandazioni per il loro utilizzo.

Tuttavia, tenete presente che non tutti i browser supportano ancora la chiamata API getClientCapabilities() (a novembre 2024). È disponibile un polyfill qui, che può essere utilizzato finché tutti i browser non si saranno adeguati.

Usate getClientCapabilities() all'inizio del vostro codice per rilevare le funzionalità supportate dal client all'avvio del caricamento della pagina / del flusso di autenticazione. Questo vi permetterà di personalizzare l'esperienza in modo dinamico, fornendo le funzionalità delle passkey che funzionano sul dispositivo/browser, ad esempio spingendo per l'autenticazione di piattaforma quando supportata o offrendo metodi alternativi (ad esempio, OTP via SMS o chiavi di sicurezza hardware) in caso contrario.

Se aggiungete le passkey a un sito web/app che attualmente utilizza le password, la funzione conditionalCreate può essere un vero e proprio acceleratore per l'adozione delle passkey. In background, durante una compilazione automatica della password con un gestore di credenziali adatto (solo Password di Apple a ottobre 2024), viene generata automaticamente una passkey che sarà preferita nelle future compilazioni automatiche.

Per avere non solo un'alta adozione delle passkey, ma anche un alto utilizzo per il login con passkey, provate a verificare se il dispositivo/browser può usare la Conditional UI / Compilazione automatica della passkey controllando conditionalGet. In questo modo, spingerete gli utenti a usare la passkey creata per gli accessi, poiché viene suggerita proattivamente dal sistema operativo/browser e richiede ancora meno sforzo della compilazione automatica di una password.

Utilizzate hybridTransport per abilitare l'autenticazione cross-device (tramite codice QR e Bluetooth), consentendo agli utenti di accedere senza problemi dal proprio smartphone, anche se stanno accedendo al vostro servizio da un computer desktop.

Le funzionalità del client WebAuthn rappresentano un significativo passo avanti nell'affrontare le attuali lacune delle passkey. In questo post del blog, abbiamo affrontato le domande chiave sulle funzionalità del client WebAuthn:

1. Cosa sono le funzionalità del client WebAuthn? Abbiamo spiegato come queste caratteristiche consentano a browser e piattaforme di segnalare il loro supporto for funzionalità specifiche, dando agli sviluppatori un maggiore controllo sui flussi di autenticazione.
2. Quali funzionalità del client WebAuthn esistono? Abbiamo fornito una panoramica delle nuove funzionalità introdotte nello standard di livello 3, tra cui getClientCapabilities, conditionalCreate, hybridTransport e altre.
3. In che modo le funzionalità del client WebAuthn migliorano le implementazioni delle passkey? Abbiamo discusso di come queste funzionalità semplifichino l'integrazione, migliorino l'uso cross-device e aumentino la sicurezza.
4. Perché le funzionalità del client WebAuthn sono importanti per gli sviluppatori? Queste funzionalità aiutano a creare esperienze di autenticazione fluide e sicure in linea con le aspettative degli utenti moderni, rendendo l'implementazione più semplice ed efficace.

Vi incoraggiamo a esplorare le nuove funzionalità di WebAuthn Level 3 e a rimanere aggiornati sulla loro adozione nei vari browser. Se state cercando di implementare le passkey e di sfruttare queste funzionalità avanzate, contattateci per una guida e un supporto esperti.