Anmeldedaten aus Google Formulare speichern

Meggin Kearney
Meggin Kearney

Anmeldedaten aus Anmeldeformularen speichern

Halten Sie Ihre Registrierungs- und Anmeldeformulare so einfach wie möglich.

Speichern Sie Anmeldedaten aus Anmeldeformularen, damit sich Nutzer nicht noch einmal anmelden müssen, wenn sie zurückkehren.

So speichern Sie Nutzeranmeldedaten aus Formularen:

  1. Fügen Sie autocomplete in das Formular ein.
  2. Verhindern Sie, dass das Formular gesendet wird.
  3. Authentifizieren Sie sich, indem Sie eine Anfrage senden.
  4. Speichern Sie die Anmeldedaten.
  5. Aktualisieren Sie die Benutzeroberfläche oder rufen Sie die personalisierte Seite auf.

autocomplete in das Formular aufnehmen

Prüfen Sie zuerst, ob Ihr Formular autocomplete-Attribute enthält. So kann die Credential Management API die id und password aus dem Formular finden und ein Anmeldedatenobjekt erstellen.

Dies hilft auch Browsern, die die Credential Management API nicht unterstützen, ihre Semantik zu verstehen. Weitere Informationen zu Autofill finden Sie in diesem Artikel von 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>

Senden des Formulars verhindern

Verhindern Sie, dass das Formular gesendet wird, wenn der Nutzer auf die Schaltfläche „Senden“ tippt, da dies andernfalls zu einem Seitenübergang führen würde:

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

Wenn Sie einen Seitenübergang verhindern, können Sie die Anmeldedaten beibehalten, während Sie ihre Authentizität prüfen.

Durch Senden einer Anfrage authentifizieren

Übermitteln Sie Anmeldedaten mit AJAX an Ihren Server, um den Nutzer zu authentifizieren.

Erstellen Sie auf Serverseite einen Endpunkt (oder ändern Sie einfach einen vorhandenen Endpunkt), der mit dem HTTP-Code 200 oder 401 antwortet, damit dem Browser klar ist, ob die Registrierung/Anmeldung/Passwortänderung erfolgreich war oder nicht.

Beispiel:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

Anmeldedaten speichern

Prüfen Sie zum Speichern von Anmeldedaten, ob die API verfügbar ist, und instanziieren Sie dann entweder synchron oder asynchron eine PasswordCredential mit dem Formularelement als Argument. Rufen Sie navigator.credentials.store() auf. Wenn die API nicht verfügbar ist, können Sie die Profilinformationen einfach zum nächsten Schritt weiterleiten.

Beispiel für synchron:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Asynchrones Beispiel:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Sobald die Anfrage erfolgreich ist, speichern Sie die Anmeldedaten. (Speichern Sie die Anmeldedaten nicht, wenn die Anfrage fehlgeschlagen ist, da dies wiederkehrende Nutzer verwirren könnte.)

Wenn im Chrome-Browser Anmeldedateninformationen abgerufen werden, wird eine Benachrichtigung angezeigt, in der Sie aufgefordert werden, Anmeldedaten (oder Föderationsanbieter) zu speichern.

Anmeldedaten speichern
Benachrichtigung für einen automatisch angemeldeten Nutzer

Benutzeroberfläche aktualisieren

Wenn alles gut funktioniert hat, aktualisieren Sie die Benutzeroberfläche mithilfe der Profilinformationen oder rufen Sie die personalisierte Seite auf.

     }).then(profile => {
       if (profile) {
         updateUI(profile);
       }
     }).catch(error => {
       showError('Sign-in Failed');
     });
    });

Vollständiges Codebeispiel

// 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');
    });
});

Browserkompatibilität

PasswordCredential

Unterstützte Browser

  • 51
  • 79
  • x
  • x

Quelle

Unterstützte Browser

  • 51
  • 79
  • 60
  • 13

Quelle

Feedback