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

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

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

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

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

Данные учетной записи

Вы можете помочь пользователям заполнить данные своей учетной записи, используя соответствующий атрибут 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.

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

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

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

Обеспечьте пользователям возможность обновлять свои пароли.

Упростите пользователям процесс обновления паролей.

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

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

Ресурсы