Mantieni i moduli di registrazione e accesso il più semplici possibile.
Salva le credenziali dai moduli di accesso così gli utenti non dovranno accedere di nuovo quando tornano.
Per archiviare le credenziali utente nei moduli:
- Includi
autocomplete
nel modulo. - Impedisci l'invio del modulo.
- Esegui l'autenticazione inviando una richiesta.
- Archivia la credenziale.
- Aggiorna l'interfaccia utente o vai alla pagina personalizzata.
Includi autocomplete
nel modulo
Prima di procedere,
controlla se il modulo include gli attributi autocomplete
.
Ciò consente all'API Credential Management di trovare id
e password
nel modulo e creare un oggetto credenziali.
Ciò aiuta anche i browser che non supportano l'API Credential Management a comprenderne la semantica. Scopri di più sulla compilazione automatica in questo articolo di Jason Grigsby.
<form id="signup" method="post">
<input name="email" type="text" autocomplete="username email" />
<input name="display-name" type="text" autocomplete="name" />
<input name="password" type="password" autocomplete="new-password" />
<input type="submit" value="Sign Up!" />
</form>
Impedire l'invio del modulo
Quando l'utente preme il pulsante Invia, impedisci l'invio del modulo, che altrimenti comporterebbe una transizione di pagina:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
Evitando una transizione di pagina, puoi conservare le informazioni sulle credenziali verificando al contempo la loro autenticità.
Esegui l'autenticazione inviando una richiesta
Per autenticare l'utente, fornisci le informazioni sulle credenziali al tuo server utilizzando AJAX.
Sul lato server, crea un endpoint (o semplicemente modifica un endpoint esistente) che risponda con il codice HTTP 200 o 401, in modo che il browser sia chiaro se la password di registrazione, accesso e modifica della password è riuscita o meno.
Ad esempio:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
Archivia la credenziale
Per archiviare una credenziale, controlla innanzitutto se l'API è disponibile, quindi crea un'istanza di PasswordCredential
con l'elemento del modulo come argomento in modo sincrono o asincrono.
Chiama il numero
navigator.credentials.store()
.
Se l'API non è disponibile,
puoi semplicemente inoltrare le informazioni del profilo al passaggio successivo.
Esempio sincrono:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
Esempio asincrono:
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
Quando la richiesta ha esito positivo, archivia le informazioni sulle credenziali. Non archiviare le informazioni sulle credenziali se la richiesta non è andata a buon fine, poiché ciò potrebbe confondere gli utenti di ritorno.
Quando il browser Chrome ottiene informazioni sulle credenziali, viene visualizzata una notifica in cui viene chiesto di archiviare una credenziale (o un provider di federazione).
Aggiorna l'interfaccia utente
Se è tutto a posto, aggiorna la UI utilizzando le informazioni del profilo o vai alla pagina personalizzata.
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
Esempio di codice completo
// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
// Stop submitting form by itself
e.preventDefault();
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
})
.then((res) => {
if (res.status == 200) {
return Promise.resolve();
} else {
return Promise.reject('Sign-in failed');
}
})
.then((profile) => {
// Instantiate PasswordCredential with the form
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
})
.then((profile) => {
// Successful sign-in
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
// Sign-in failed
showError('Sign-in Failed');
});
});
Compatibilità del browser
PasswordCredential
navigator.credentials.store()