Salva le credenziali dai moduli

Eiji Kitamura

Meggin Kearney

Salva le credenziali dai moduli di accesso

Mantieni i moduli di registrazione e di accesso il più semplici possibile.

Salva le credenziali dai moduli di accesso, così gli utenti non dovranno accedere di nuovo quando tornano.

Per memorizzare 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 la UI o vai alla pagina personalizzata.

Includi autocomplete nel modulo

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

In questo modo, anche i browser che non supportano l'API Credential Management possono 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 di invio, impedisci l'invio del modulo, che altrimenti comporterebbe una transizione di pagina:

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

Impedendo una transizione di pagina, puoi conservare le informazioni sulle credenziali mentre ne verifichi l'autenticità.

Autenticati inviando una richiesta

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

Sul lato server, crea un endpoint (o modifica semplicemente un endpoint esistente) che risponda con il codice HTTP 200 o 401, in modo che sia chiaro al browser se la registrazione, l'accesso o la modifica della password sono andati 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 memorizzare una credenziale, verifica innanzitutto se l'API è disponibile, quindi crea un'istanza di PasswordCredential con l'elemento del modulo 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 che la richiesta è andata a buon fine, memorizza le informazioni sulle credenziali. (Non memorizzare le informazioni sulle credenziali se la richiesta non è andata a buon fine, per non confondere gli utenti di ritorno.)

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

Notifica per un utente che ha eseguito l'accesso automatico

Aggiorna l'interfaccia utente

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

Browser Support

• 51
• 79
• x
• x

Source

navigator.credentials.store()

Browser Support

• 51
• 79
• 60
• 13

Source

Feedback