Návštěvník přijde na váš web a klikne na "Přihlásit se". Čeká hladké přihlášení. Místo toho narazí na formulář, který ho frustruje. Požadavky na heslo se ukážou až po odeslání. Pole pro heslo je malé a špatně se do něj píše. Není tu možnost "Zobrazit heslo", takže si nemůže ověřit, co napsal. Heslo zadá špatně. Klikne na "Zapomenuté heslo" a skončí v matoucím postupu obnovy. Za pár minut to vzdá a už se nevrátí.
Přihlašovací formuláře a formuláře pro obnovu hesla jsou klíčové kontaktní body. Stojí mezi vracejícím se návštěvníkem a jeho účtem. Pokud je zážitek špatný, neodejdou jen tak. Usoudí, že váš web není důvěryhodný. Tato kapitola popisuje, jak postavit přihlašovací formuláře a formuláře pro obnovu hesla, které jsou bezpečné, intuitivní a šetří čas uživatele.
Která pole potřebuje přihlašovací formulář?
Přihlašovací formulář potřebuje přesně tři věci. Za prvé způsob, jak určit, kdo člověk je. Za druhé způsob, jak jeho totožnost ověřit. Za třetí způsob, jak zůstat přihlášený. To znamená minimálně tři pole.
Pole pro e-mail
Používejte e-mail, ne uživatelské jméno. E-mail je jednodušší. Uživatelé zapomínají uživatelská jména. Svou e-mailovou adresu nezapomínají. Pole nechte přijímat e-mailovou adresu a jasně ho označte jako "E-mailová adresa". Použijte HTML `type="email"`, aby mobilní klávesnice ukázala symbol @ a probíhalo automatické ověření e-mailu. K HTML atributům přidejte `autocomplete="username"`, aby prohlížeče a správci hesel věděli, že sem patří přihlašovací identifikátor, a mohli ho automaticky doplnit uživatelům s uloženými údaji.
Pole pro heslo
Použijte `type="password"`, aby byl text skrytý. Přidejte `id="current-password"` a `autocomplete="current-password"`, aby správci hesel poznali toto pole a automaticky doplnili uložená hesla. Povolte vkládání ze schránky. Bezpečnostní odborníci se shodují, že zakázání vkládání do polí pro heslo útokům nebrání. Jen otravuje lidi, kteří používají správce hesel.
Pole pro heslo udělejte vizuálně široké alespoň na 10 znaků. Malé pole působí stísněně. Uživatelé pochybují, zda se do něj vejde jejich dlouhé heslo. Širší pole buduje jistotu a snižuje chyby při odeslání.
Přepínač zobrazení hesla
Přidejte přepínač "Zobrazit heslo" nebo "Odkrýt heslo" (obvykle ikona oka nebo zaškrtávací políčko). Po zapnutí se pole pro heslo změní na `type="text"`, aby uživatelé viděli, co napsali. Není to bezpečnostní riziko. Je to funkce pro použitelnost, která snižuje chyby při odeslání a frustraci. Uživatelé píší hesla opatrně a chtějí je před odesláním ověřit.
Políčko Zapamatovat si mě (nepovinné, ale doporučené)
Políčko "Zapamatovat si mě na tomto zařízení" nebo "Zůstat přihlášen" je nepovinné, ale zlepšuje zážitek. Po zaškrtnutí platí relace déle, nebo prohlížeč (bezpečně) uloží trvalý přihlašovací token. Uživatelé se tak nemusí přihlašovat při každé návštěvě. U účtů s nízkým rizikem je to bezpečné. U účtů s vysokým zabezpečením (finance, zdraví, administrace) to vynechejte nebo u citlivých akcí vyžadujte nové ověření.
Pokud políčko Zapamatovat si mě přidáte, uveďte přesně, co dělá. "Zapamatovat si mě na 30 dní" je jasnější než jen "Zapamatovat si mě".
Odkaz Zapomenuté heslo
Odkaz "Zapomněli jste heslo?" umístěte přímo pod pole pro heslo nebo vedle něj. To není volitelné. Uživatelé zapomínají hesla. Nabídněte zřetelnou cestu k obnově. Pokud odkaz nenajdou, web opustí a možná se nevrátí.
Jak má fungovat formulář pro obnovu hesla?
Obnova hesla má několik kroků. Každý krok má význam. Každý krok je místo, kde se uživatelé mohou zmást a odejít.
Krok jedna: Žádost o ověření e-mailem
Obnova začíná, když uživatel na přihlašovacím formuláři klikne na "Zapomenuté heslo". Dostane se na stránku s textem jako "Zadejte svou e-mailovou adresu pro obnovu hesla." Zobrazí se jediné pole pro e-mail. To je vše. Žádná další pole. Žádný dotaz na uživatelské jméno ani bezpečnostní otázky. Jen e-mail.
Tlačítko má říkat něco jasného a akčního. "Odeslat odkaz pro obnovu" nebo "Získat pokyny k obnově" říká, co se stane dál. "Odeslat" je vágní.
Krok dva: Odeslání odkazu pro obnovu e-mailem
Když uživatel odešle e-mail, váš systém mu okamžitě pošle e-mail pro obnovu hesla. E-mail má dorazit během sekund, ne minut. Na rychlosti záleží. Pokud e-mail putuje 10 minut, uživatelé usoudí, že to nefunguje, a zkusí to znovu, nebo hůř, odejdou.
E-mail pro obnovu obsahuje jedinečný odkaz (nebo kód, který uživatel zadá na další stránce). Odkaz má po stanovené době vypršet, obvykle po 24 hodinách. Odkaz, který nikdy nevyprší, je bezpečnostní riziko, pokud někdo získá přístup k jejich e-mailu.
Krok tři: Ověření odkazu a zobrazení formuláře pro nové heslo
Když uživatel klikne v e-mailu na odkaz pro obnovu, dostane se k formuláři pro obnovu hesla. Stránka má jasně potvrdit, co se děje: "Obnovte své heslo" nebo "Vytvořte nové heslo." Žádný zmatek, zda je na správném místě.
Zobrazte e-mailovou adresu, pro kterou se heslo obnovuje. "Obnovujete heslo pro example@email.com." Uživatele to ujistí, že obnovuje správný účet.
Krok čtyři: Jasně uveďte požadavky na heslo před odesláním
Požadavky na heslo zobrazte ve formuláři pro obnovu DŘÍV, než se uživatel pokusí odeslat. Nenuťte ho hádat. "Vaše heslo musí mít alespoň 12 znaků, obsahovat jedno velké písmeno, jedno číslo a jeden speciální znak." Buďte konkrétní. Ukažte příklady, co vyhovuje.
Ukazatel síly hesla (pruh, který ukazuje slabé, střední, silné) pomáhá uživatelům pochopit, zda heslo splňuje požadavky, aniž by odeslali a dostali chybu. Někteří uživatelé to oceňují. Jiní se rozčilují, pokud jsou požadavky nejasné. Pokud ukazatel síly používáte, doplňte ho výslovnými textovými požadavky.
Krok pět: Pole pro heslo a potvrzení
Požádejte o nové heslo. Potom o jeho potvrzení opětovným napsáním. Tento krok potvrzení zachytí překlepy. Nevýhodou je, že pole pro potvrzení přidává tření. Výzkumy ukazují, že odstranění pole pro potvrzení hesla zvyšuje míru dokončení. Pokud ho ponecháte, přidejte k oběma polím přepínač "Odkrýt heslo", aby si uživatelé před odesláním mohli ověřit, že se obě zadání shodují.
Krok šest: Okamžité potvrzení a další kroky
Když uživatel heslo úspěšně obnoví, ukažte zprávu o úspěchu. "Vaše heslo bylo obnoveno. Nyní se můžete přihlásit novým heslem." Pak přidejte odkaz zpět na přihlašovací formulář nebo tlačítko "Přejít k přihlášení", aby nemusel hledat a procházet.
Pošlete také potvrzovací e-mail. "Vaše heslo bylo nedávno obnoveno. Pokud jste to nebyli vy, klikněte sem a zabezpečte svůj účet." Upozorní to uživatele, pokud heslo obnovil někdo jiný, a dá mu to možnost vše vrátit.
Kam na webu patří přihlašovací formuláře?
Přihlašovací formuláře nejsou dekorace. Musí se dát najít bez hledání.
Záhlaví nebo navigace
Nejviditelnějším místem je záhlaví. Odkaz (nebo tlačítko) "Přihlásit se" vpravo nahoře na webu je tam, kde ho uživatelé čekají. Po kliknutí je buď přesměrujte na vyhrazenou přihlašovací stránku, nebo otevřete okno s přihlašovacím formulářem. Mobilní uživatelé čekají možnost přihlášení v hamburger menu. Nikdy ji neschovávejte za vrstvy navigace.
Vyhrazená přihlašovací stránka
Vytvořte vyhrazenou stránku `/login` nebo `/sign-in`. Tato stránka obsahuje přihlašovací formulář a nic jiného. Žádné příspěvky z blogu. Žádné marketingové texty. Jen formulář a nezbytný pomocný text. Čistá, soustředěná stránka funguje lépe než vložení přihlašovacího formuláře na obecnou stránku.
Stránka pro obnovu hesla
Formulář pro obnovu hesla má mít vlastní adresu URL, například `/reset-password` nebo `/forgot-password`. Tato stránka je dostupná jen z přihlašovacího formuláře nebo z odkazu v e-mailu pro obnovu. Neměla by se indexovat ve vyhledávačích. Přidejte na tuto stránku `noindex` v HTML nebo v robots.txt, aby se ji Google nesnažil řadit ve výsledcích.
Časté chyby v návrhu přihlašovacích formulářů
Ani dobře míněné přihlašovací formuláře často nemají problémy, které uživatelskému zážitku škodí.
Příliš mnoho polí před přihlášením
Některé weby se na přihlašovacím formuláři ptají na uživatelské jméno, e-mail, telefon a bezpečnostní odpověď. Nedělejte to. Přihlášení není registrace. Ptejte se jen na e-mail a heslo. Všechno ostatní je zbytečné tření.
Skryté nebo nejasné požadavky na heslo
Pokud jsou požadavky na heslo skryté do odeslání, uživatelé se frustrují. Zadají heslo. Odešlou. Objeví se chyba: "Heslo musí mít 12 znaků a obsahovat číslo." Teď to musí zkusit znovu. Požadavky ukažte předem.
Chybějící možnost zobrazit heslo
Uživatelé nevidí, co napsali. Odešlou. Zadají špatně. Zkusí znovu. Znovu špatně. Jednoduchý přepínač tuto frustraci ušetří.
Matoucí chybové zprávy
Nikdy uživatelům neříkejte "Neplatné přihlášení". To nepomáhá. Používají špatný e-mail? Špatné heslo? Není účet aktivovaný? Buďte konkrétní. "Pro tuto e-mailovou adresu nebyl nalezen žádný účet" nebo "Heslo je nesprávné" říká, co opravit. Nebo pokud chcete být z bezpečnostních důvodů vágní, nabídněte cestu k nápravě. "E-mail a heslo se neshodují. Zkuste to znovu nebo obnovte heslo."
Odkaz pro obnovu příliš rychle vyprší
Odkaz pro obnovu, který vyprší za 15 minut, uživatele štve. E-mail zkontrolují po práci. Odkaz je mrtvý. Musí začít znovu. Dejte jim alespoň 24 hodin.
Obnova vede na matoucí stránku
Některé postupy obnovy posílají uživatele na stránku, která jasně neříká, co dělat. Kliknou na odkaz pro obnovu. Skončí na stránce s nejasným textem a bez formuláře. Myslí si, že se něco pokazilo. Udělejte to zřejmé. "Obnovte heslo pro example@email.com" s polem pro heslo a tlačítkem odeslání.
Bezpečnostní hlediska přihlášení a obnovy hesla
Přihlašovací formulář je bezpečnostně klíčová část webu. Chraňte ho správně.
Používejte HTTPS pro veškerý přihlašovací provoz
Přihlašovací stránka musí být poskytována přes HTTPS, ne HTTP. HTTPS šifruje data při přenosu, takže hackeři nemohou číst e-mail a heslo při cestě na váš server. To není předmětem diskuse. Pokud váš web nemá certifikát SSL, pořiďte si ho. Většina poskytovatelů hostingu dnes nabízí certifikáty SSL zdarma.
Ověřujte sílu hesla na serveru
Ověření v prohlížeči pomáhá uživatelům, ale nespoléhejte se jen na něj. Ověření v JavaScriptu lze obejít. Ověřujte heslo na serveru. Zkontrolujte, že splňuje vaše požadavky. Přijímejte jen hesla, která vyhovují vašim standardům síly.
Hesla v databázi hashujte se solí
Nikdy neukládejte hesla jako prostý text. Použijte bezpečný hashovací algoritmus (například bcrypt nebo Argon2) se solí. I kdyby někdo vaši databázi prolomil, hesla nepřečte. Správně zahashované heslo nelze zpětně převést na původní.
Omezte počet pokusů o přihlášení
Pokud se někdo pokusí přihlásit 10krát za minutu, zablokujte ho. Omezení počtu pokusů (rate limiting) brání útokům hrubou silou, kdy hackeři zkoušejí tisíce kombinací hesel. Po několika neúspěšných pokusech počkejte 15 minut, než povolíte další.
Tokeny pro obnovu hesla nechte rychle vypršet
Token pro obnovu hesla, který funguje 24 hodin, je standard. Tokeny, které fungují 7 dní nebo déle, zvyšují riziko, že napadený e-mailový účet povede k napadenému účtu na webu. Tokeny nechte krátce platné.
Zaznamenávejte přihlášení kvůli odhalení podvodů
Veďte záznam úspěšných i neúspěšných pokusů o přihlášení. Pokud se někdo přihlásí z nové země nebo v neobvyklou dobu, označte to. Některé systémy pošlou e-mail, když se k účtu někdo přihlásí z nového zařízení. Majitele účtu to upozorní, pokud se dostal dovnitř někdo jiný.
Mobilní přihlašovací formuláře: v čem se liší?
Mobil mění to, jak mají přihlašovací formuláře fungovat.
Plochy pro klepnutí a velikost tlačítek
Na mobilu nejsou prsty tak přesné jako kurzor. Tlačítka a pole musí být větší. Tlačítko odeslání má být vysoké alespoň 44 pixelů. Pole mají být dost vysoká pro pohodlné psaní. Cilte na výšku 44 až 48 pixelů.
Mobilní klávesnice a typy polí
Pro pole e-mailu použijte `type="email"`. Mobilním zařízením to řekne, aby ukázala e-mailovou klávesnici se symboly @ a tečkou. Bez toho musí uživatelé přepínat režimy klávesnice. Pro pole hesla použijte `type="password"`, aby klávesnice odpovídala. Tento drobný detail šetří klepnutí i nervy.
Automatické doplňování a správci hesel
Mobilní prohlížeče a aplikace správců hesel mohou automaticky doplnit přihlašovací údaje. Ujistěte se, že to vaše HTML atributy podporují. Přidejte `autocomplete="username"` k poli e-mailu a `autocomplete="current-password"` k poli hesla. Na mobilu, kde je psaní pomalejší, je to velké pohodlí.
Rozvržení formuláře na malých obrazovkách
Pole skládejte pod sebe. Nedávejte e-mail a heslo vedle sebe na mobilní obrazovce. Jedno pole na řádek. Formulář má využít plnou šířku s dostatečnými okraji. Formulář, který na mobilu působí stísněně, se nedokončuje.
Vyhněte se překrytí mobilní klávesnicí
Když se objeví mobilní klávesnice, zakryje polovinu obrazovky. Zajistěte, aby bylo tlačítko přihlášení vidět nad klávesnicí, nebo nabídněte snadný způsob, jak klávesnici skrýt. Některé weby ukážou tlačítko až po zavření klávesnice. To uživatele štve. Nechte tlačítko viditelné.
Často kladené otázky
Kolik požadavků na heslo mám vyžadovat?
Mám ukazovat ukazatel síly hesla?
Co když někdo zapomene heslo I svou e-mailovou adresu?
Potřebuji na přihlašovacím formuláři dvoufázové ověření?
Jak často má někdo potřebovat obnovit heslo?
Je lepší se ptát na uživatelské jméno, nebo na e-mailovou adresu?
Jak WEMASY pomáhá s přihlašovacími formuláři a obnovou hesla
Tvůrce formulářů WEMASY podporuje bezpečné přihlášení a obnovu hesla. Vytvořte přihlašovací formulář s poli pro e-mail a heslo. Jedním kliknutím přidejte přepínač zobrazení hesla. Nastavte požadavky na heslo (délka, velká písmena, čísla, speciální znaky). Pomocí podmíněné logiky zobrazte políčko Zapamatovat si mě, nebo ho podle potřeb zabezpečení vynechte. Připojte se k ověřovacímu systému WEMASY nebo se přes API napojte na externí poskytovatele ověřování. WEMASY zajišťuje hashování hesel, omezování počtu pokusů a správu relací automaticky. Podívejte se, co je součástí tarifů WEMASY.