Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Anmeldedaten aus Formularen speichern

Eiji Kitamura

Meggin Kearney

Anmeldedaten aus Anmeldeformularen speichern

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

Anmeldedaten aus Anmeldeformularen speichern, damit sich Nutzer bei der Rückkehr nicht noch einmal anmelden müssen.

So speichern Sie Nutzeranmeldedaten aus Formularen:

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

`autocomplete` in das Formular einfügen

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

So können auch Browser, die die Credential Management API nicht unterstützen, die Semantik verstehen. Weitere Informationen zum automatischen Ausfüllen 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

Wenn der Nutzer auf die Schaltfläche zum Senden klickt, wird das Senden des Formulars verhindert, was sonst 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 überprüfen.

Durch Senden einer Anfrage authentifizieren

Um den Nutzer zu authentifizieren, senden Sie die Anmeldedaten per AJAX an Ihren Server.

Erstelle auf der Serverseite einen Endpunkt (oder ändere einfach einen vorhandenen Endpunkt), der mit dem HTTP-Code 200 oder 401 antwortet, damit der Browser weiß, ob die Registrierung, Anmeldung oder Passwortänderung erfolgreich war.

Beispiel:

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

Anmeldedaten speichern

Wenn Sie einen Berechtigungsnachweis speichern möchten, prüfen Sie zuerst, ob die API verfügbar ist. Instanziieren Sie dann ein PasswordCredential mit dem Formularelement als Argument, entweder synchron oder asynchron. Rufen Sie navigator.credentials.store() auf. Wenn die API nicht verfügbar ist, können Sie die Profilinformationen einfach an den nächsten Schritt weiterleiten.

Synchrones Beispiel:

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 verwirrt.)

Wenn der Chrome-Browser Anmeldedaten erhält, wird eine Benachrichtigung eingeblendet, in der Sie gefragt werden, ob Sie die Anmeldedaten (oder den Verbundanbieter) speichern möchten.

Benutzeroberfläche aktualisieren

Wenn alles geklappt hat, aktualisieren Sie die Benutzeroberfläche mit den 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');
    });
});

Browser-Kompatibilität

`PasswordCredential`

Browser Support

Source

`navigator.credentials.store()`