Сохранение учетных данных из форм

Меггин Кирни
Meggin Kearney

Сохранение учетных данных из форм входа

Формы регистрации и входа должны быть максимально простыми.

Сохраняйте учетные данные из форм входа, чтобы пользователям не приходилось входить снова, когда они вернутся.

Чтобы сохранить учетные данные пользователя из форм:

  1. Включите autocomplete в форме.
  2. Запретить отправку формы.
  3. Авторизуйтесь, отправив запрос.
  4. Сохраните учетные данные.
  5. Обновите пользовательский интерфейс или перейдите на персонализированную страницу.

Включите 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');
    });
});

Совместимость с браузером

PasswordCredential

Поддержка браузера

  • Хром: 51.
  • Край: 79.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Источник

Поддержка браузера

  • Хром: 51.
  • Край: 79.
  • Фаерфокс: 60.
  • Сафари: 13.

Источник

Обратная связь