Идентификация

Форма регистрации часто является первым взаимодействием с формой на вашем веб-сайте. Хороший дизайн формы регистрации имеет решающее значение, и безопасная форма имеет важное значение.

Давайте рассмотрим форму регистрации и то, как вы можете помочь пользователям зарегистрироваться на вашем веб-сайте.

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

Помогите пользователям заполнить данные своей учетной записи.

Вы можете помочь пользователям заполнить данные своей учетной записи, используя соответствующий атрибут autocomplete . Используйте autocomplete="email" для поля электронной почты и autocomplete="new-password" для поля нового пароля.

Узнайте больше об автозаполнении элементов управления вводом .

Вы также можете помочь пользователям ввести безопасный пароль, предложив <button> раскрывающего пароля.
Узнайте больше о шаблоне раскрытия пароля .

Убедитесь, что ваша регистрационная форма безопасна

Никогда не храните и не передавайте пароли в виде открытого текста. Обязательно солейте и хэшируйте пароли — и не пытайтесь изобрести собственный алгоритм хеширования .

Предлагайте многофакторную аутентификацию , особенно если вы храните личные или конфиденциальные данные. Рекомендации по SMS OTP и включение строгой аутентификации с помощью WebAuthn объясняют, как реализовать многофакторную аутентификацию.

Убедитесь, что пользователи не используют скомпрометированные пароли. Например, используйте API от Have I Been Pwned для обнаружения скомпрометированных паролей и предложите пользователям ввести другой новый пароль или предупредите их, если их пароль окажется скомпрометированным.

Помогите пользователям войти в систему

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

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

  • Целевой размер кнопок составляет не менее 48 пикселей.
  • font-size элементов формы достаточно большой ( 20px — это примерно на мобильном устройстве).
  • Между элементами управления формы достаточно места ( margin ), а входные данные достаточно велики (используйте padding: 15px на мобильных устройствах).

Помогите пользователям заполнить адрес электронной почты и пароль.

Помогите браузерам и менеджерам паролей автоматически заполнять данные учетной записи. Используйте autocomplete="email" для поля электронной почты и autocomplete="current-password" для поля текущего пароля.

Чтобы помочь пользователям вручную заполнить данные своей учетной записи, используйте type="email" в поле электронной почты, чтобы на мобильных устройствах отображалась соответствующая экранная клавиатура.

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

Убедитесь, что пользователи видят введенный ими пароль

Текст, который вы вводите для <input type="password"> по умолчанию скрыт, чтобы обеспечить конфиденциальность пользователей. Помогите пользователям ввести пароль, показав <button> для переключения видимости введенного текста.

Узнайте больше о реализации <button> раскрытия пароля .

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

Регулярно проверяйте свои формы входа и регистрации с реальными людьми, чтобы убедиться, что аутентификация работает должным образом. Используйте аналитику и измерение реальных пользователей (RUM) для сбора полевых данных, а также такие инструменты, как Lighthouse и PageSpeed ​​Insights , для самостоятельного проведения тестов. Узнайте больше о тестировании удобства использования и сборе аналитических данных .

Убедитесь, что ваши формы работают в разных браузерах и на разных платформах. Проверьте свою форму на экранах разных размеров, используя только клавиатуру или программу чтения с экрана, например VoiceOver на Mac или NVDA на Windows.

Помогите пользователям изменить настройки своей учетной записи

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

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

Убедитесь, что пользователи могут обновлять свои пароли

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

Запросите у пользователей текущий пароль перед его изменением и отправьте электронное письмо об изменении пароля с возможностью отменить и заблокировать учетную запись.

Добавьте возможность запроса нового пароля и рассмотрите возможность предоставления .well-known URL-адреса для запроса нового пароля.

Ресурсы