Помогите пользователям зарегистрироваться
Форма регистрации часто является первым взаимодействием с формой на вашем веб-сайте. Хороший дизайн формы регистрации имеет решающее значение, и безопасная форма имеет важное значение.
Давайте рассмотрим форму регистрации и то, как вы можете помочь пользователям зарегистрироваться на вашем веб-сайте.
Сохраняйте форму регистрации минимальной и показывайте только те элементы управления, которые необходимы для создания учетной записи. Не дублируйте элементы управления формой, чтобы помочь пользователям правильно указать данные своей учетной записи. Вместо этого отправьте электронное письмо с подтверждением.
Помогите пользователям заполнить данные своей учетной записи.
Вы можете помочь пользователям заполнить данные своей учетной записи, используя соответствующий атрибут 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-адреса для запроса нового пароля.