Salva le credenziali da Moduli

Eiji Kitamura

Meggin Kearney

Fai in modo che i moduli di registrazione e di accesso siano il più semplici possibile.

Salva le credenziali dai moduli di accesso in modo che gli utenti non debbano accedere di nuovo quando tornano.

Per memorizzare le credenziali utente dai moduli:

1. Includi autocomplete nel modulo.
2. Impedisci l'invio del modulo.
3. Effettua l'autenticazione inviando una richiesta.
4. Archivia la credenziale.
5. Aggiorna l'interfaccia utente o vai alla pagina personalizzata.

Includi autocomplete nel modulo

Prima di procedere, controlla se il tuo modulo include attributi autocomplete. In questo modo l'API Credential Management può trovare id e password nel modulo e creare un oggetto credenziale.

Ciò consente inoltre ai browser che non supportano l'API Credential Management di 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 causerebbe una transizione di pagina:

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

Se impedisci la transizione di una pagina, puoi conservare le informazioni sulle credenziali durante la verifica della sua autenticità.

Eseguire l'autenticazione inviando una richiesta

Per autenticare l'utente, invia le informazioni sulle credenziali al tuo server utilizzando AJAX.

Sul lato server, crea un endpoint (o semplicemente modificane uno esistente) che risponda con il codice HTTP 200 o 401, in modo che sia chiaro al browser se la registrazione/l'accesso/la modifica della password è andata a buon fine 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, verifica innanzitutto se l'API è disponibile, quindi crea un'istanza PasswordCredential con l'elemento 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);
}

Una volta che la richiesta ha esito positivo, memorizza le informazioni sulle credenziali. Non memorizzare 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 le informazioni sulle credenziali, viene visualizzata una notifica che chiede di archiviare le credenziali (o provider della federazione).

Aggiornare l'interfaccia utente

Se tutto è andato a buon fine, aggiorna la UI utilizzando le informazioni del profilo o passa 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()

Feedback