<ph type="x-smartling-placeholder">
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:
- Fügen Sie
autocomplete
in das Formular ein. - Das Formular kann nicht gesendet werden.
- Authentifizieren Sie sich durch Senden einer Anfrage.
- Speichern Sie die Anmeldedaten.
- 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 mithilfe von AJAX die Anmeldedaten 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 weiß, 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 type="x-smartling-placeholder">![Anmeldedaten speichern](https://web.dev/static/articles/security-credential-management-save-forms/image/store-credential-f27fdeafeab5c.png?authuser=6&hl=de)
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()