Tożsamość

Pomaganie użytkownikom w rejestracji

Formularz rejestracji jest często pierwszą interakcją z formularzem w Twojej witrynie. Dobrze zaprojektowany formularz rejestracji jest kluczowy, a bezpieczny formularz jest niezbędny.

Zapoznaj się z formularzem rejestracji, aby dowiedzieć się, jak możesz pomóc użytkownikom zarejestrować się w Twojej witrynie.

Ogranicz formularz rejestracji do minimum i wyświetlaj tylko wymagane elementy sterujące, aby utworzyć konto. Nie duplikuj elementów sterujących formularza, aby ułatwić użytkownikom podawanie prawidłowych danych konta. Zamiast tego wyślij e-maila z potwierdzeniem.

Szczegóły konta

Możesz pomóc użytkownikom w wypełnianiu szczegółów konta, używając odpowiedniego atrybutu autocomplete. Użyj autocomplete="email" w przypadku pola adresu e-mail i autocomplete="new-password" w przypadku pola nowego hasła.

Dowiedz się więcej o automatycznym wypełnianiu elementów sterujących.

Możesz też pomóc użytkownikom w wpisywaniu bezpiecznego hasła, oferując funkcję reveal-password<button>. Dowiedz się więcej o wzorcu ujawniania hasła.

Zabezpieczanie formularza rejestracji

Nigdy nie przechowuj ani nie przesyłaj haseł w postaci zwykłego tekstu. Pamiętaj, aby stosować ciągi zaburzające w hasłach i je haszować oraz nie próbuj wymyślać własnego algorytmu haszowania.

Oferuj uwierzytelnianie wielopoziomowe, zwłaszcza jeśli przechowujesz dane osobowe lub wrażliwe. Instrukcje wdrażania uwierzytelniania wielopoziomowego znajdziesz w artykułach Sprawdzone metody dotyczące haseł jednorazowych SMS i Włączanie silnego uwierzytelniania za pomocą WebAuthn.

Dbać o to, aby użytkownicy nie używali przejętych haseł. Możesz na przykład użyć interfejsu API z usługi Have I Been Pwned, aby wykrywać przejęte hasła i sugerować użytkownikom wpisanie innego nowego hasła lub ostrzegać ich, gdy ich hasło zostanie przejęte.

Pomoc użytkownikom w logowaniu się

Dowiedz się, jak utworzyć formularz logowania, aby użytkownicy mogli logować się w Twojej witrynie.

Wyraźnie informuj o tym, gdzie znajdują się przyciski rejestracji i logowania. Sprawdź, czy formularz jest użyteczny na urządzeniach dotykowych:

  • Rozmiar docelowego elementu dotykowego przycisków wynosi co najmniej 48 pikseli.
  • font-size elementów formularza jest wystarczająco duży (20px to odpowiednia wartość na urządzeniach mobilnych).
  • Pomiędzy elementami sterującymi formularza jest wystarczająco dużo miejsca (margin), a pola wprowadzania są wystarczająco duże (na urządzeniach mobilnych używaj co najmniej padding: 15px).

Pomaganie użytkownikom w wypełnianiu pól adresu e-mail i hasła

pomagać przeglądarkom i menedżerom haseł w automatycznym uzupełnianiu szczegółów konta; Użyj autocomplete="email" w polu adresu e-mail i autocomplete="current-password" w polu aktualnego hasła.

Aby ułatwić użytkownikom ręczne wypełnianie szczegółów konta, użyj w przypadku pola adresu e-mail elementu 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ć o nieprawidłowych wartościach, gdy użytkownik prześle formularz. Rozważ użycie weryfikacji w czasie rzeczywistym, aby pomagać użytkownikom w poprawianiu nieprawidłowych danych od razu po ich wpisaniu, zamiast czekać na przesłanie formularza.

Upewnij się, że użytkownicy widzą wpisane hasło

Tekst wpisany w polu <input type="password"> jest domyślnie ukryty, aby chronić prywatność użytkowników. Ułatw użytkownikom wpisywanie haseł, wyświetlając ikonę <button>, która umożliwia przełączanie widoczności wpisanego tekstu.

Dowiedz się więcej o wdrażaniu funkcji wyświetlania hasła.<button>

Zadbaj o to, aby formularze logowania i rejestracji były łatwe w użyciu

Regularnie testuj formularze logowania i rejestracji z udziałem prawdziwych użytkowników, aby mieć pewność, że uwierzytelnianie działa zgodnie z oczekiwaniami. Korzystaj z analityki i pomiarów rzeczywistych użytkowników (RUM), aby zbierać dane z terenu, oraz z narzędzi takich jak Lighthouse i PageSpeed Insights, aby samodzielnie przeprowadzać testy. Dowiedz się więcej o testowaniu pod kątem użyteczności i zbieraniu danych analitycznych.

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

Pomaganie użytkownikom w zmianie ustawień konta

Upewnij się, że użytkownicy mogą zmieniać wszystkie ustawienia konta, w tym adresy e-mail, hasła i nazwy użytkownika.

Zapewnij przejrzystość w zakresie przechowywanych danych i umożliw użytkownikom pobieranie wszystkich ich danych osobowych w dowolnym momencie. Umożliwiaj użytkownikom usuwanie kont, jeśli tego chcą. Funkcje zarządzania kontem, takie jak te, mogą być wymagane przez prawo w niektórych regionach.

Umożliwianie użytkownikom aktualizowania haseł

Ułatwianie użytkownikom aktualizowania haseł.

Poproś użytkowników o podanie bieżącego hasła przed jego zmianą i wyślij e-maila z informacją o zmianie hasła oraz opcją przywrócenia poprzedniego hasła i zablokowania konta.

Dodaj opcję prośby o nowe hasło i rozważ podanie .well-known adresu URL, pod którym można poprosić o nowe hasło.

Zasoby