Salva le credenziali da Moduli

Meggin Kearney
Meggin Kearney

Salva le credenziali dai moduli di accesso

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:

  1. Includi autocomplete nel modulo.
  2. Impedisci l'invio del modulo.
  3. Esegui 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 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).

archivia credenziale
Notifica per un utente che ha eseguito l'accesso automatico

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

Supporto dei browser

  • 51
  • 79
  • x
  • x

Fonte

Supporto dei browser

  • 51
  • 79
  • 60
  • 13

Fonte

Feedback