Odwiedzający wchodzi na Twoją stronę i klika "Zaloguj się". Oczekuje płynnego logowania. Zamiast tego trafia na formularz, który go frustruje. Wymagania dotyczące hasła są ukryte do momentu wysłania. Pole hasła jest małe i trudne do wypełnienia. Nie ma opcji "Pokaż hasło", więc nie może sprawdzić, co wpisał. Myli się w haśle. Klika "Nie pamiętam hasła" i trafia na zagmatwany proces resetu. Po kilku minutach rezygnuje i nigdy nie wraca.
Formularze logowania i resetu hasła to kluczowe punkty styku. Stoją między wracającym odwiedzającym a jego kontem. Jeśli doświadczenie jest kiepskie, ludzie nie tylko wychodzą. Uznają, że Twoja strona nie jest godna zaufania. Ten rozdział pokazuje, jak zbudować formularze logowania i resetu hasła, które są bezpieczne, intuicyjne i szanują czas użytkownika.
Jakich pól potrzebuje formularz logowania?
Formularz logowania potrzebuje dokładnie trzech rzeczy. Po pierwsze, sposobu, by zidentyfikować osobę. Po drugie, sposobu, by zweryfikować jej tożsamość. Po trzecie, sposobu, by pozostać zalogowanym. To minimum trzech pól.
Pole e-mail
Użyj adresu e-mail, a nie nazwy użytkownika. E-mail jest prostszy. Użytkownicy zapominają nazwy użytkownika. Nie zapominają swojego adresu e-mail. Niech to pole przyjmuje adres e-mail i ma jasną etykietę "Adres e-mail". Użyj HTML `type="email"`, aby klawiatury mobilne pokazywały znak @, a walidacja e-maila działała automatycznie. W atrybucie HTML dodaj `autocomplete="username"`, aby przeglądarki i menedżery haseł wiedziały, że tu trafia identyfikator logowania, i mogły go uzupełnić dla użytkowników z zapisanymi danymi.
Pole hasła
Użyj `type="password"`, aby tekst był ukryty. Dodaj `id="current-password"` i `autocomplete="current-password"`, aby menedżery haseł mogły rozpoznać to pole i uzupełnić zapisane hasła. Pozwól na wklejanie. Eksperci od bezpieczeństwa zgodnie twierdzą, że wyłączenie wklejania w polach hasła nie zapobiega atakom. Tylko frustruje osoby korzystające z menedżerów haseł.
Zrób pole hasła szerokie na co najmniej 10 znaków. Małe pole wydaje się ciasne. Użytkownicy wątpią, czy ich długie hasło się zmieści. Szersze pole buduje pewność i zmniejsza liczbę błędów przy wysyłaniu.
Przełącznik pokazywania hasła
Dodaj przełącznik "Pokaż hasło" lub "Odsłoń hasło" (zwykle ikona oka lub pole wyboru). Po włączeniu pole hasła zmienia się na `type="text"`, aby użytkownicy widzieli, co wpisali. To nie jest zagrożenie dla bezpieczeństwa. To funkcja użyteczności, która zmniejsza liczbę błędów i frustrację. Użytkownicy wpisują hasła ostrożnie i chcą je sprawdzić przed wysłaniem.
Pole "Zapamiętaj mnie" (opcjonalne, ale zalecane)
Pole "Zapamiętaj mnie na tym urządzeniu" lub "Nie wylogowuj mnie" jest opcjonalne, ale poprawia komfort. Po zaznaczeniu sesja trwa dłużej albo przeglądarka (bezpiecznie) zapisuje trwały token logowania. Dzięki temu użytkownicy nie muszą logować się przy każdej wizycie. Dla kont o niskim ryzyku to bezpieczne. Dla kont o wysokim poziomie bezpieczeństwa (finanse, zdrowie, panele administracyjne) pomiń to albo wymagaj ponownego uwierzytelnienia przy wrażliwych działaniach.
Jeśli dodajesz pole "Zapamiętaj mnie", jasno napisz, co robi. "Zapamiętaj mnie na 30 dni" jest jaśniejsze niż samo "Zapamiętaj mnie".
Link "Nie pamiętam hasła"
Umieść link "Nie pamiętasz hasła?" bezpośrednio pod polem hasła lub z jego prawej strony. To nie jest opcja. Użytkownicy zapominają hasła. Zapewnij oczywistą drogę do resetu. Jeśli nie znajdą linku, opuszczą stronę i mogą nigdy nie wrócić.
Jak powinien działać formularz resetu hasła?
Proces resetu hasła ma kilka kroków. Każdy krok ma znaczenie. Każdy krok to miejsce, w którym użytkownicy mogą się pogubić i zrezygnować.
Krok pierwszy: prośba o weryfikację e-mailem
Proces resetu zaczyna się, gdy użytkownik kliknie "Nie pamiętam hasła" w formularzu logowania. Trafia na stronę z komunikatem w stylu "Wpisz swój adres e-mail, aby zresetować hasło". Pojawia się jedno pole e-mail. To wszystko. Bez dodatkowych pól. Bez pytania o nazwę użytkownika czy pytania zabezpieczające. Tylko e-mail.
Przycisk powinien mówić coś jasnego i nastawionego na działanie. "Wyślij link do resetu" lub "Odbierz instrukcje resetu" mówi, co będzie dalej. "Wyślij" jest mgliste.
Krok drugi: wysłanie linku do resetu e-mailem
Gdy użytkownik wyśle swój e-mail, system od razu wysyła mu wiadomość z resetem hasła. E-mail powinien dotrzeć w ciągu sekund, a nie minut. Szybkość ma znaczenie. Jeśli e-mail idzie 10 minut, użytkownicy zakładają, że nie zadziałało, i próbują ponownie, albo, co gorsza, wychodzą.
E-mail z resetem zawiera unikalny link (albo kod do wpisania na następnej stronie). Link powinien wygasać po określonym czasie, zwykle po 24 godzinach. Link, który nigdy nie wygasa, to zagrożenie dla bezpieczeństwa, jeśli ktoś zdobędzie dostęp do poczty.
Krok trzeci: weryfikacja linku i pokazanie formularza resetu hasła
Gdy użytkownik kliknie link do resetu w e-mailu, trafia do formularza resetu hasła. Ta strona powinna jasno potwierdzać, co się dzieje: "Zresetuj hasło" lub "Utwórz nowe hasło". Bez wątpliwości, czy jest we właściwym miejscu.
Pokaż adres e-mail, dla którego resetuje hasło. "Resetujesz hasło dla example@email.com." To upewnia, że resetuje właściwe konto.
Krok czwarty: jasno podaj wymagania dotyczące hasła przed wysłaniem
Wyświetl wymagania dotyczące hasła w formularzu resetu PRZED próbą wysłania. Nie każ zgadywać. "Hasło musi mieć co najmniej 12 znaków, zawierać jedną wielką literę, jedną cyfrę i jeden znak specjalny." Podaj konkrety. Pokaż przykłady tego, co spełnia wymagania.
Wskaźnik siły hasła (pasek pokazujący słabe, średnie, silne) pomaga użytkownikom zrozumieć, czy hasło spełnia wymagania, bez wysyłania i dostawania błędu. Niektórzy uznają to za pomocne. Inni za frustrujące, jeśli wymagania są niejasne. Jeśli używasz wskaźnika siły, połącz go z jawnymi wymaganiami w tekście.
Krok piąty: pole hasła i potwierdzenie
Poproś o nowe hasło. Potem poproś o potwierdzenie przez ponowne wpisanie. Ten krok potwierdzenia wychwytuje literówki. Wadą jest to, że pole potwierdzenia dodaje opór. Badania pokazują, że usunięcie pola potwierdzenia hasła zwiększa liczbę ukończonych resetów. Jeśli je zostawisz, dodaj do obu pól przełącznik "Odsłoń hasło", aby można było sprawdzić, czy oba wpisy są takie same, przed wysłaniem.
Krok szósty: natychmiastowe potwierdzenie i dalsze kroki
Gdy reset hasła się powiedzie, pokaż komunikat o sukcesie. "Twoje hasło zostało zresetowane. Możesz teraz zalogować się nowym hasłem." Potem dodaj link do formularza logowania albo przycisk "Przejdź do logowania", aby nie trzeba było nawigować ani szukać.
Wyślij też e-mail z potwierdzeniem. "Twoje hasło zostało niedawno zresetowane. Jeśli to nie Ty, kliknij tutaj, aby zabezpieczyć konto." To ostrzega użytkownika, jeśli ktoś inny zresetował jego hasło, i daje mu sposób, by to cofnąć.
Gdzie na stronie umieścić formularze logowania?
Formularze logowania nie są ozdobą. Muszą być do znalezienia bez szukania.
Nagłówek lub nawigacja
Najbardziej widocznym miejscem jest nagłówek. Link (lub przycisk) "Zaloguj się" w prawym górnym rogu strony to miejsce, gdzie użytkownicy się go spodziewają. Po kliknięciu przenieś ich na osobną stronę logowania albo otwórz okno modalne z formularzem. Użytkownicy telefonów oczekują opcji logowania w menu hamburgerowym. Nigdy nie chowaj jej za warstwami nawigacji.
Osobna strona logowania
Utwórz osobną stronę `/login` lub `/sign-in`. Ta strona zawiera formularz logowania i nic więcej. Bez wpisów na blogu. Bez tekstów marketingowych. Tylko formularz i niezbędny tekst pomocniczy. Czysta, skupiona strona konwertuje lepiej niż osadzenie formularza logowania na stronie ogólnej.
Strona resetu hasła
Formularz resetu hasła powinien mieć osobny adres URL, np. `/reset-password` lub `/forgot-password`. Do tej strony można dotrzeć tylko z formularza logowania lub z linku w e-mailu z resetem. Nie powinna być indeksowana przez wyszukiwarki. Dodaj `noindex` do tej strony w HTML lub robots.txt, żeby Google nie próbował jej pozycjonować.
Częste błędy w projekcie formularza logowania
Nawet dobrze pomyślane formularze logowania często mają problemy, które szkodzą doświadczeniu użytkownika.
Zbyt wiele pól przed logowaniem
Niektóre strony pytają w samym formularzu logowania o nazwę użytkownika, e-mail, telefon i odpowiedź zabezpieczającą. Nie rób tego. Logowanie to nie rejestracja. Pytaj tylko o e-mail i hasło. Wszystko inne to dodatkowy opór.
Ukryte lub niejasne wymagania dotyczące hasła
Jeśli wymagania dotyczące hasła są ukryte do momentu wysłania, użytkownicy się frustrują. Wpisują hasło. Klikają wyślij. Pojawia się błąd: "Hasło musi mieć 12 znaków i zawierać cyfrę." Teraz muszą spróbować od nowa. Pokaż wymagania z góry.
Brak opcji pokazania hasła
Użytkownicy nie widzą, co wpisali. Wysyłają. Mylą się. Próbują ponownie. Znów się mylą. Prosty przełącznik oszczędza tej frustracji.
Mylące komunikaty o błędach
Nigdy nie mów użytkownikom "Nieprawidłowe logowanie". To nie pomaga. Czy użyli złego e-maila? Złego hasła? Czy konto nie jest aktywowane? Podaj konkrety. "Nie znaleziono konta dla tego adresu e-mail" lub "Hasło jest nieprawidłowe" mówi, co poprawić. Albo jeśli chcesz być ogólny ze względów bezpieczeństwa, daj im drogę odzyskiwania. "E-mail i hasło nie pasują do siebie. Spróbuj ponownie lub zresetuj hasło."
Zbyt szybkie wygasanie linku do resetu
Link do resetu, który wygasa po 15 minutach, frustruje użytkowników. Sprawdzają pocztę po pracy. Link już nie działa. Muszą zaczynać od nowa. Daj im co najmniej 24 godziny.
Proces resetu prowadzi na mylącą stronę
Niektóre procesy resetu kierują użytkowników na stronę, która nie mówi jasno, co zrobić. Klikają link do resetu. Trafiają na stronę z niejasnym tekstem i bez formularza. Myślą, że coś poszło nie tak. Spraw, by było oczywiste. "Zresetuj hasło dla example@email.com" z polem hasła i przyciskiem wysyłania.
Bezpieczeństwo logowania i resetu hasła
Formularz logowania to krytyczna dla bezpieczeństwa część Twojej strony. Chroń go należycie.
Używaj HTTPS dla całego ruchu logowania
Strona logowania musi być serwowana przez HTTPS, a nie HTTP. HTTPS szyfruje dane w transmisji, więc hakerzy nie przeczytają e-maila i hasła w drodze do serwera. To bezdyskusyjne. Jeśli Twoja strona nie ma certyfikatu SSL, postaraj się o niego. Większość dostawców hostingu oferuje dziś darmowe certyfikaty SSL.
Sprawdzaj siłę hasła po stronie serwera
Walidacja w przeglądarce pomaga użytkownikom, ale nie polegaj tylko na niej. Walidację JavaScript można obejść. Sprawdzaj hasło na serwerze. Zweryfikuj, czy spełnia wymagania. Akceptuj tylko hasła spełniające Twoje standardy siły.
Haszuj hasła z solą w bazie danych
Nigdy nie przechowuj haseł jawnym tekstem. Użyj bezpiecznego algorytmu haszującego (jak bcrypt lub Argon2) z solą. Nawet jeśli ktoś włamie się do bazy, nie odczyta haseł. Prawidłowo zahaszowanego hasła nie da się odtworzyć do postaci oryginału.
Ograniczaj liczbę prób logowania
Jeśli ktoś próbuje zalogować się 10 razy w ciągu minuty, zablokuj go. Ograniczenie liczby prób zapobiega atakom brute force, w których hakerzy próbują tysięcy kombinacji haseł. Po kilku nieudanych próbach zrób 15-minutową przerwę, zanim pozwolisz na kolejne.
Szybko wygaszaj tokeny resetu hasła
Token resetu hasła działający 24 godziny to standard. Tokeny działające 7 dni lub dłużej zwiększają ryzyko, że przejęte konto e-mail doprowadzi do przejęcia konta na stronie. Niech tokeny żyją krótko.
Rejestruj aktywność logowania, by wykrywać nadużycia
Zapisuj udane i nieudane próby logowania. Jeśli ktoś loguje się z nowego kraju lub o nietypowej porze, oznacz to. Niektóre systemy wysyłają e-mail, gdy konto loguje się z nowego urządzenia. To ostrzega właściciela konta, jeśli ktoś inny uzyskał dostęp.
Formularze logowania na telefonach: co jest inne?
Telefon zmienia to, jak muszą działać formularze logowania.
Obszary dotyku i rozmiar przycisków
Na telefonie palce nie są tak precyzyjne jak kursor. Przyciski i pola muszą być większe. Przycisk wysyłania powinien mieć co najmniej 44 piksele wysokości. Pola powinny być na tyle wysokie, by wygodnie się w nich pisało. Celuj w 44 do 48 pikseli wysokości.
Klawiatury mobilne i typy pól
Użyj `type="email"` dla pola e-mail. To mówi urządzeniom mobilnym, by pokazały klawiaturę e-mail ze znakami @ i . Bez tego użytkownicy muszą przełączać tryby klawiatury. Użyj `type="password"` dla pola hasła, aby klawiatura pasowała. Ten drobny szczegół oszczędza dotknięcia i frustrację.
Autouzupełnianie i menedżery haseł
Przeglądarki mobilne i aplikacje menedżerów haseł mogą uzupełniać dane logowania. Upewnij się, że Twoje atrybuty HTML to wspierają. Dodaj `autocomplete="username"` w polu e-mail i `autocomplete="current-password"` w polu hasła. To ogromna wygoda na telefonie, gdzie pisanie jest wolniejsze.
Układ formularza na małych ekranach
Układaj pola pionowo. Nie umieszczaj e-maila i hasła obok siebie na ekranie telefonu. Jedno pole w wierszu. Formularz powinien zajmować całą szerokość z odpowiednimi marginesami. Formularz, który wydaje się ciasny na telefonie, nie jest wypełniany.
Unikaj zasłaniania przez klawiaturę mobilną
Gdy pojawia się klawiatura mobilna, zakrywa pół ekranu. Upewnij się, że przycisk logowania jest widoczny nad klawiaturą, albo zapewnij łatwy sposób jej schowania. Niektóre strony pokazują przycisk dopiero po zamknięciu klawiatury. To frustruje użytkowników. Niech przycisk będzie widoczny.
Najczęstsze pytania
Ile wymagań dotyczących hasła stosować?
Czy pokazywać wskaźnik siły hasła?
Co jeśli ktoś zapomni hasło ORAZ adres e-mail?
Czy potrzebuję uwierzytelniania dwuskładnikowego w formularzu logowania?
Jak często ktoś powinien resetować hasło?
Co lepsze: pytać o nazwę użytkownika czy adres e-mail?
Jak WEMASY pomaga z formularzami logowania i resetu hasła
Kreator formularzy WEMASY obsługuje bezpieczne procesy logowania i resetu hasła. Utwórz formularz logowania z polami e-mail i hasła. Dodaj przełącznik pokazywania hasła jednym kliknięciem. Ustaw wymagania dotyczące hasła (długość, wielkie litery, cyfry, znaki specjalne). Użyj logiki warunkowej, by pokazać pole "Zapamiętaj mnie" albo je pominąć, zależnie od potrzeb bezpieczeństwa. Połącz z systemem uwierzytelniania WEMASY albo zintegruj z zewnętrznymi dostawcami uwierzytelniania przez API. WEMASY automatycznie obsługuje haszowanie haseł, ograniczanie liczby prób i zarządzanie sesjami. E-maile z resetem hasła są wysyłane bezpiecznie z Twojej domeny. Tokeny resetu wygasają po 24 godzinach. Sprawdź, co zawierają pakiety WEMASY.