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 torneranno.

Per archiviare le credenziali utente dai 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'UI o vai alla pagina personalizzata.

Includi autocomplete nel modulo

Prima di proseguire, verifica se il modulo include gli attributi autocomplete. Ciò consente all'API di gestione delle credenziali di trovare id e password del modulo e costruisci un oggetto credenziali.

Ciò aiuta anche i browser che non supportano l'API Credential Management per 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, altrimenti generano una transizione di pagina:

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

Impedisce la transizione di una pagina puoi conservare le informazioni relative alle credenziali durante la verifica dell'autenticità.

Esegui l'autenticazione inviando una richiesta

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

Sul lato server, crea un endpoint (o semplicemente modificane uno esistente). che risponde con il codice HTTP 200 o 401, in modo che sia chiaro al browser se la password di registrazione/accesso/modifica è 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 memorizzare una credenziale, verifica innanzitutto se l'API è disponibile, quindi crea un'istanza PasswordCredential con l'elemento form come argomento in modo sincrono o asincrono. Chiama 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 approvata la richiesta, memorizza le informazioni sulla credenziale. (Non archiviare le informazioni sulle credenziali se la richiesta non è andata a buon fine poiché ciò confonde gli utenti di ritorno.)

Quando il browser Chrome ottiene informazioni sulle credenziali, compare una notifica che chiede di memorizzare una credenziale (o provider di federazione).

Aggiorna l'interfaccia utente

Se tutto è andato a buon fine, aggiorna la UI usando 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()

Feedback