Формы регистрации и входа должны быть максимально простыми.
Сохраняйте учетные данные из форм входа, чтобы пользователям не приходилось входить снова, когда они вернутся.
Чтобы сохранить учетные данные пользователя из форм:
- Включите
autocompleteв форме. - Запретить отправку формы.
- Авторизуйтесь, отправив запрос.
- Сохраните учетные данные.
- Обновите пользовательский интерфейс или перейдите на персонализированную страницу.
Включите autocomplete в форме
Прежде чем двигаться дальше, проверьте, содержит ли ваша форма атрибуты autocomplete . Это помогает API управления учетными данными найти id и password из формы и создать объект учетных данных.
Это также помогает браузерам, не поддерживающим API управления учетными данными, понять его семантику. Узнайте больше об автозаполнении в этой статье Джейсона Григсби .
<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>
Запретить отправку формы
Когда пользователь нажимает кнопку отправки, запретите отправку формы, что в противном случае привело бы к переходу страницы:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
Предотвратив переход страницы, вы можете сохранить учетные данные, одновременно проверяя их подлинность.
Аутентификация путем отправки запроса
Чтобы аутентифицировать пользователя, доставьте учетные данные на свой сервер с помощью AJAX.
На стороне сервера создайте конечную точку (или просто измените существующую конечную точку), которая отвечает HTTP-кодом 200 или 401, чтобы браузеру было ясно, успешна ли регистрация/вход/изменение пароля.
Например:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
Сохраните учетные данные
Чтобы сохранить учетные данные, сначала проверьте, доступен ли API, а затем создайте экземпляр PasswordCredential с элементом формы в качестве аргумента синхронно или асинхронно. Вызовите navigator.credentials.store() . Если API недоступен, вы можете просто переслать информацию профиля на следующий шаг.
Синхронный пример:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
Асинхронный пример:
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
После успешного выполнения запроса сохраните учетные данные. (Не сохраняйте учетные данные, если запрос не выполнен, поскольку это сбивает с толку возвращающихся пользователей.)
Когда браузер Chrome получает учетные данные, появляется уведомление с просьбой сохранить учетные данные (или поставщика федерации).
Обновите пользовательский интерфейс
Если все прошло успешно, обновите интерфейс, используя информацию профиля, или перейдите на персонализированную страницу.
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
Полный пример кода
// 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');
});
});