Pubblicato: 12 maggio 2026
La modalità UI immediata per gli accessi è una funzionalità web progettata per semplificare i flussi di accesso. Questa funzionalità ti consente di offrire in modo proattivo passkey e password gestite direttamente ai tuoi utenti quando raggiungono un momento di accesso, ad esempio quando fanno clic su un pulsante Accedi o Checkout.
Abstract
La modalità UI immediata fornisce una modalità che non riesce immediatamente se non sono disponibili credenziali
in locale. Questo comportamento rispecchia le API preferImmediatelyAvailableCredentials
trovate su piattaforme mobile come Android e iOS. Quando esistono credenziali, il
browser mostra all'utente una finestra di dialogo di accesso immediato. In caso contrario, rifiuta
la promessa in modo silenzioso, consentendoti di fornire metodi di accesso alternativi, ad esempio un modulo di accesso, senza interrompere l'esperienza utente.
A partire da maggio 2026, Chrome è l'unico browser che supporta la modalità UI immediata.
Controlla i prerequisiti
Per utilizzare la modalità UI immediata, l'utente deve disporre di credenziali idonee disponibili localmente sul proprio dispositivo. Su Chrome, queste credenziali includono:
- Passkey salvate in un provider di passkey come Gestore delle password di Google, Windows Hello o Portachiavi iCloud.
- Password salvate in Gestore delle password di Google.
Se non esistono credenziali locali, l'API rifiuta la richiesta senza mostrare la finestra di dialogo di accesso immediato.
Rilevare il supporto delle funzionalità
Prima di chiamare la modalità UI immediata, verifica se il browser supporta la funzionalità
immediateGet utilizzando il metodo
PublicKeyCredential.getClientCapabilities(). Se non è supportato,
ripristina i metodi di accesso esistenti, come i moduli email e password, la verifica del numero
di telefono o gli accessi social.
async function checkImmediateAvailability() {
try {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.immediateGet) {
console.log("Immediate UI mode is supported.");
} else {
console.log("Immediate UI mode is NOT supported.");
}
} catch (error) {
console.error("Error checking client capabilities:", error);
}
}
Per un supporto più ampio dei browser, utilizza il polyfill disponibile nel repository GitHub di polyfill WebAuthn.
Richiedi credenziali
Per attivare il flusso di accesso immediato, chiama navigator.credentials.get() con il
campo uiMode impostato su 'immediate'.
Se includi password: true nella richiesta, gli utenti possono usufruire di questa
esperienza se il browser supporta le credenziali
della password.
// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
event.preventDefault();
try {
const cred = await navigator.credentials.get({
password: true,
publicKey: {
challenge: serverGeneratedChallenge,
rpId: 'example.com'
},
uiMode: 'immediate',
});
// Handle successful sign-in
} catch (error) {
if (error.name === 'NotAllowedError') {
// Provide a fallback sign-in experience
showFallbackUI();
}
}
});
Devi gestire NotAllowedError in un blocco catch per fornire un'esperienza di accesso di riserva.
Gestire i flussi di accesso
Puoi implementare la modalità UI immediata per due scenari principali.
Accedere con un pulsante
Fornisci un pulsante di accesso dedicato che offra un'esperienza pulita senza richieste impreviste.
- L'utente fa clic su un pulsante Accedi.
- Il tuo sito chiama
navigator.credentials.get()conuiMode: "immediate". - Il browser verifica le credenziali locali.
- Se il browser trova le credenziali, mostra immediatamente una finestra di dialogo di accesso in cui l'utente può selezionare un account.
- Se il browser non trova credenziali o l'utente chiude la finestra di dialogo di accesso immediato, viene generato un
NotAllowedError. - Se viene generato un
NotAllowedError, il tuo sito procede con la pagina di accesso standard.
Accedere prima di un pagamento
Offri le credenziali in modo proattivo prima che un utente esegua un'azione che trarrebbe vantaggio dall'autenticazione, ad esempio l'avvio di un flusso di pagamento in una vetrina online.
Nell'e-commerce, gli utenti ospiti spesso scelgono tra l'accesso a un account esistente o il pagamento come ospite. Fornire una finestra di dialogo di accesso immediato può semplificare la procedura di pagamento per i clienti di ritorno.
- L'utente avvia un'azione, ad esempio fa clic su un pulsante Procedi al pagamento durante un flusso di acquisto.
- Il tuo sito chiama
navigator.credentials.get()conuiMode: "immediate". - Se esistono credenziali, l'utente ne seleziona una per completare l'accesso.
- Se le credenziali non esistono, il browser genera un errore e non mostra la finestra di dialogo di accesso immediato. L'esperienza utente rimane invariata e puoi indirizzare l'utente alla schermata di pagamento esistente, che potrebbe fornire altre opzioni di accesso o un modulo di pagamento senza registrazione.
Rivedi le misure di privacy e sicurezza
Il browser implementa misure fondamentali per proteggere la privacy degli utenti:
- Requisito di attivazione dall'utente: per impedire il probing silenzioso, devi avviare la chiamata API con un'attivazione dall'utente, ad esempio un clic. La chiamata non consuma l'attivazione.
- Limitazioni della modalità di navigazione in incognito: le richieste nelle sessioni di navigazione in incognito o private
generano sempre un
NotAllowedError. - Nessuna lista consentita: le richieste con un elenco
allowCredentialsnon vuoto generano unNotAllowedErrorper impedire il monitoraggio tra sessioni. - Nessuna cancellazione programmatica: non puoi utilizzare il parametro
signalper chiudere programmaticamente la finestra di dialogo di accesso immediato.