Tożsamość

Pomaganie użytkownikom w rejestracji

Formularz rejestracyjny jest często pierwszą interakcją z formularzem w Twojej witrynie. Niezbędny jest dobry projekt formularza rejestracyjnego oraz bezpieczny formularz.

Przyjrzyjmy się formularzowi rejestracji i zobaczmy, jak możesz pomóc użytkownikom zarejestrować się w witrynie.

Ogranicz formularz rejestracyjny do minimum i wyświetlaj tylko elementy sterujące, które są wymagane do utworzenia konta. Nie powtarzaj dodatkowych elementów sterujących formularza, aby ułatwić użytkownikom uzyskanie prawidłowych informacji o ich kontach. Zamiast tego wyślij e-maila z potwierdzeniem.

Pomóż użytkownikom wpisać dane konta

Możesz pomóc użytkownikom w uzupełnieniu danych konta, używając odpowiedniego atrybutu autocomplete. Wpisz autocomplete="email" w polu adresu e-mail i autocomplete="new-password" w polu nowego hasła.

Dowiedz się więcej o autouzupełnianiu danych wejściowych.

Możesz też ułatwić użytkownikom wpisywanie bezpiecznego hasła, udostępniając im <button>.
Dowiedz się więcej o wzorcu ujawniania hasła.

Upewnij się, że formularz rejestracyjny jest bezpieczny

Nigdy nie przechowuj ani nie przesyłaj haseł w postaci zwykłego tekstu. Pamiętaj o zaburzaniu haseł i szyfrowaniu i nie próbuj wymyślać własnego algorytmu szyfrowania.

Zaoferuj uwierzytelnianie wielopoziomowe, zwłaszcza jeśli przechowujesz dane osobowe lub poufne. Z artykułów na temat sprawdzonych metod korzystania z haseł jednorazowych SMS-ów i włączania silnego uwierzytelniania za pomocą WebAuthn dowiesz się, jak wdrożyć uwierzytelnianie wielopoziomowe.

Zadbaj o to, aby użytkownicy nie używali przejętych haseł. Na przykład użyj interfejsu API w narzędziu Uzyskaj dostęp do hasła, aby wykryć przejęte hasła i zasugerować wpisanie innego nowego hasła lub ostrzeżesz użytkowników, jeśli ich hasło zostanie przejęte.

Pomaganie użytkownikom w logowaniu

Zobaczmy, jak utworzyć formularz logowania, aby ułatwić użytkownikom logowanie się w Twojej witrynie.

Zadbaj o to, aby lokalizacja przycisków rejestracji i logowania była oczywista. Upewnij się, że formularz jest obsługiwany na urządzeniach dotykowych:

Rozmiar elementu docelowego kliknięcia przycisków to co najmniej 48 pikseli.
font-size elementów formularza jest wystarczająco duży (20px to mniej więcej na urządzeniu mobilnym).
Między elementami sterującymi formularza jest wystarczająco dużo miejsca (margin), a dane wejściowe są wystarczająco duże (użyj co najmniej padding: 15px na urządzeniu mobilnym).

Pomóż użytkownikom wpisać adres e-mail i hasło

Pomóż przeglądarkom i menedżerom haseł w autouzupełnianiu danych konta. Wpisz autocomplete="email" jako pole adresu e-mail, a autocomplete="current-password" jako pole bieżącego hasła.

Aby ułatwić użytkownikom ręczne wpisanie danych konta, w polu adresu e-mail wpisz type="email", aby wyświetlać odpowiednią klawiaturę ekranową na urządzeniach mobilnych.

Użyj atrybutu required w polu adresu e-mail i hasła, aby ostrzegać Cię o nieprawidłowych wartościach, gdy użytkownik przesyła formularz. Zamiast czekać na przesłanie formularza, możesz skorzystać z weryfikacji w czasie rzeczywistym, aby ułatwić użytkownikom poprawianie nieprawidłowych danych zaraz po ich wprowadzeniu.

Sprawdź, czy użytkownicy widzą wpisane hasło

Tekst wpisany w domenie <input type="password"> jest domyślnie zasłonięty ze względu na ochronę prywatności użytkowników. Pomóż użytkownikom wpisywać hasło, wyświetlając ikonę <button> umożliwiającą przełączanie widoczności wpisanego tekstu.

Dowiedz się więcej o implementowaniu funkcji ujawniania hasła <button>.

Upewnij się, że możesz używać formularzy logowania i rejestracji

Regularnie testuj formularze logowania i rejestracji we współpracy z innymi użytkownikami, aby mieć pewność, że uwierzytelnianie działa zgodnie z oczekiwaniami. Korzystaj z analityki i pomiarów rzeczywistych użytkowników (RUM), aby zbierać dane terenowe, i korzystaj z narzędzi takich jak Lighthouse i PageSpeed Insights do samodzielnego przeprowadzania testów. Dowiedz się więcej o testowaniu pod kątem łatwości obsługi i zbieraniu danych analitycznych.

Upewnij się, że formularze działają w różnych przeglądarkach i na różnych platformach. Przetestuj formularz na różnych ekranach, używając tylko klawiatury lub czytnika ekranu, takiego jak VoiceOver na komputerze Mac lub NVDA w systemie Windows.

Pomaganie użytkownikom w zmienianiu ustawień konta

Użytkownicy powinni mieć możliwość zmiany wszystkich ustawień konta, w tym adresów e-mail, haseł i nazw użytkowników.

Jasno określ, jakie dane przechowujesz, i ułatw użytkownikom pobieranie wszystkich ich danych w dowolnym momencie. Upewnij się, że użytkownicy mogą usunąć swoje konta, jeśli tego chcą. W niektórych regionach takie funkcje zarządzania kontem mogą być wymagane przez prawo.

Zapewnienie użytkownikom możliwości aktualizowania swoich haseł

Ułatw użytkownikom aktualizację hasła.

Przed zmianą hasła poproś użytkowników o podanie aktualnego hasła i wyślij e-maila z informacją o zmianie hasła, z którego będzie można cofnąć i zablokować konto.

Dodaj opcję wysyłania prośby o nowe hasło i podaj adres URL .well-known, aby poprosić o nowe hasło.