Anmeldedaten aus Google Formulare speichern

Eiji Kitamura

Meggin Kearney

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

Anmeldedaten aus Anmeldeformularen speichern sodass Nutzer sich bei ihrer Rückkehr nicht noch einmal anmelden müssen.

So speichern Sie Nutzeranmeldedaten aus Formularen:

1. Fügen Sie autocomplete in das Formular ein.
2. Das Formular kann nicht gesendet werden.
3. Authentifizieren Sie sich durch Senden einer Anfrage.
4. Speichern Sie die Anmeldedaten.
5. Aktualisieren Sie die Benutzeroberfläche oder gehen Sie zur personalisierten Seite.

autocomplete in das Formular einfügen

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

Das hilft auch Browsern, die die Credential Management API nicht unterstützen. um seine Semantik zu verstehen. Weitere Informationen zu Autofill 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 die Nutzenden auf die Schaltfläche „Senden“ klicken, verhindern Sie, dass das Formular gesendet wird. Andernfalls zu einem Seitenübergang führen:

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

Wenn ein Seitenübergang verhindert wird, können Sie die Anmeldedaten beibehalten und gleichzeitig ihre Authentizität überprüfen.

Durch Senden einer Anfrage authentifizieren

Übermitteln Sie zur Authentifizierung des Nutzers die Anmeldedaten mithilfe von AJAX an Ihren Server.

Erstellen Sie auf der Serverseite einen Endpunkt (oder ändern Sie einfach einen vorhandenen Endpunkt). die mit HTTP-Code 200 oder 401 antwortet, sodass der Browser erkennt, Ob das Anmelde-/Anmelde-/Passwort Passwort erfolgreich geändert wurde

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 zuerst, ob die API verfügbar ist. und instanziieren Sie dann eine PasswordCredential mit dem Formularelement als Argument entweder synchron oder asynchron. Anruf navigator.credentials.store() Wenn die API nicht verfügbar ist, können Sie die Profilinformationen einfach an den nächsten Schritt weiterleiten.

Beispiel für synchronen Traffic:

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 war, speichern Sie die Anmeldedaten. (Speichern Sie die Anmeldedaten nicht, wenn die Anfrage fehlgeschlagen ist. da dies wiederkehrende Nutzende verwirrt.)

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

</ph>

Benutzeroberfläche aktualisieren

Wenn alles gut gelaufen ist, 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

navigator.credentials.store()

Feedback