Egy látogató megérkezik az oldaladra, és a „Bejelentkezés” gombra kattint. Zökkenőmentes belépésre számít. Ehelyett olyan űrlapba ütközik, amely bosszantja. A jelszókövetelmények rejtve vannak a beküldésig. A jelszómező kicsi, és nehéz beleírni. Nincs „Jelszó mutatása” lehetőség, ezért nem tudja ellenőrizni, mit írt be. Elrontja a jelszót. Rákattint az „Elfelejtett jelszó” hivatkozásra, és egy zavaros visszaállítási folyamatban köt ki. Néhány perc múlva feladja, és soha nem tér vissza.
A bejelentkező és jelszó-visszaállító űrlapok kritikus érintkezési pontok. Ezek az űrlapok állnak a visszatérő látogató és a fiókja között. Ha rossz az élmény, nem csak elmegy. Úgy gondolja, hogy az oldalad nem megbízható. Ez a fejezet azt mutatja be, hogyan építhetsz biztonságos, érthető bejelentkező és jelszó-visszaállító űrlapokat, amelyek tiszteletben tartják a felhasználó idejét.
Milyen mezőkre van szüksége egy bejelentkező űrlapnak?
A bejelentkező űrlapnak pontosan három dologra van szüksége. Először: egy módra, hogy azonosítsa, ki a személy. Másodszor: egy módra, hogy ellenőrizze a személyazonosságát. Harmadszor: egy módra, hogy bejelentkezve maradjon. Ez legalább három mezőt jelent.
Az e-mail mező
E-mail-címet használj, ne felhasználónevet. Az e-mail egyszerűbb. A felhasználók elfelejtik a felhasználónevüket. Az e-mail-címüket nem felejtik el. Legyen ez a mező e-mail-cím fogadására alkalmas, és egyértelműen „E-mail-cím” címkével lásd el. Használd a HTML `type="email"` attribútumot, hogy a mobil billentyűzet megmutassa a @ jelet, és az e-mail-ellenőrzés automatikusan megtörténjen. A HTML-attribútumban add hozzá az `autocomplete="username"` értéket, hogy a böngészők és a jelszókezelők tudják, hogy ide kerül a bejelentkezési azonosító, és automatikusan kitölthessék azoknak, akik elmentették a hitelesítő adataikat.
A jelszó mező
Használd a `type="password"` attribútumot, hogy a szöveg rejtve legyen. Add hozzá az `id="current-password"` és az `autocomplete="current-password"` értéket, hogy a jelszókezelők felismerjék a mezőt, és kitöltsék a mentett jelszavakat. Engedd a beillesztést. A biztonsági szakértők egyetértenek abban, hogy a beillesztés tiltása a jelszómezőkben nem előzi meg a támadásokat. Csak azokat bosszantja, akik jelszókezelőt használnak.
A jelszómező vizuálisan legalább 10 karakter széles legyen. A kis beviteli mező szűkösnek érződik. A felhasználók kételkednek, hogy elfér-e benne a hosszú jelszavuk. A szélesebb mező bizalmat épít, és csökkenti a beküldési hibákat.
Jelszó mutatása kapcsoló
Tegyél be „Jelszó mutatása” vagy „Jelszó felfedése” kapcsolót (általában szem ikon vagy jelölőnégyzet). Bekapcsolva a jelszómező `type="text"` típusra vált, hogy a felhasználók lássák, mit gépeltek. Ez nem biztonsági kockázat. Használhatósági funkció, amely csökkenti a beküldési hibákat és a bosszúságot. A felhasználók gondosan gépelik a jelszót, és a beküldés előtt ellenőrizni akarják.
„Emlékezz rám” jelölőnégyzet (opcionális, de ajánlott)
Az „Emlékezz rám ezen az eszközön” vagy a „Maradjak bejelentkezve” jelölőnégyzet opcionális, de javítja az élményt. Bejelölve a munkamenet tovább tart, vagy a böngésző (biztonságosan) tartós bejelentkezési tokent tárol. Ez azt jelenti, hogy a felhasználóknak nem kell minden látogatáskor bejelentkezniük. Kis kockázatú fiókoknál ez biztonságos. Nagy biztonságú fiókoknál (pénzügyi, egészségügyi, admin felületek) hagyd ki, vagy kérj újbóli hitelesítést az érzékeny műveletekhez.
Ha teszel be „Emlékezz rám” jelölőnégyzetet, legyél egyértelmű abban, mit csinál. Az „Emlékezz rám 30 napig” érthetőbb, mint az egyszerű „Emlékezz rám”.
Elfelejtett jelszó hivatkozás
Tegyél „Elfelejtetted a jelszavad?” hivatkozást közvetlenül a jelszómező alá vagy mellé jobbra. Ez nem opcionális. A felhasználók elfelejtik a jelszavukat. Adj egyértelmű utat a visszaállításhoz. Ha nem találják a hivatkozást, elhagyják az oldalt, és talán soha nem térnek vissza.
Hogyan működjön a jelszó-visszaállító űrlap?
A jelszó-visszaállítási folyamat több lépésből áll. Minden lépés számít. Minden lépés egy hely, ahol a felhasználók összezavarodhatnak és otthagyhatják.
Első lépés: e-mail-cím megadása
A visszaállítási folyamat azzal indul, hogy a felhasználó az „Elfelejtett jelszó” hivatkozásra kattint a bejelentkező űrlapon. Olyan oldalra érkezik, amely valami ilyesmit mond: „Add meg az e-mail-címedet a jelszó visszaállításához.” Egyetlen e-mail mező jelenik meg. Ennyi. Semmi extra mező. Nem kérdezel felhasználónevet vagy biztonsági kérdéseket. Csak az e-mailt.
A gomb szövege legyen világos és cselekvésre irányuló. A „Visszaállító hivatkozás küldése” vagy a „Kérem a visszaállítási útmutatót” megmondja, mi történik ezután. A „Küldés” homályos.
Második lépés: visszaállító hivatkozás küldése e-mailben
Amikor beküldik az e-mail-címüket, a rendszered azonnal jelszó-visszaállító e-mailt küld nekik. Az e-mailnek másodperceken belül meg kell érkeznie, nem percek alatt. A sebesség számít. Ha az e-mail 10 percig tart, a felhasználók azt hiszik, nem működött, és újra próbálkoznak, vagy ami rosszabb, elmennek.
A visszaállító e-mail egyedi hivatkozást (vagy kódot, amelyet a következő oldalon adnak meg) tartalmaz. A hivatkozásnak egy meghatározott idő után le kell járnia, általában 24 óra után. A soha le nem járó hivatkozás biztonsági kockázat, ha valaki hozzáfér az e-mail-fiókhoz.
Harmadik lépés: a hivatkozás ellenőrzése és a jelszó-visszaállító űrlap megjelenítése
Amikor rákattintanak az e-mailben lévő visszaállító hivatkozásra, a jelszó-visszaállító űrlaphoz érkeznek. Ennek az oldalnak egyértelműen meg kell erősítenie, mi történik: „Jelszó visszaállítása” vagy „Új jelszó létrehozása”. Ne legyen kétség afelől, hogy jó helyen járnak-e.
Mutasd meg az e-mail-címet, amelynek a jelszavát visszaállítják. „Az example@email.com jelszavát állítod vissza.” Ez megnyugtatja őket, hogy a megfelelő fiókot állítják vissza.
Negyedik lépés: add meg egyértelműen a jelszókövetelményeket a beküldés előtt
Jelenítsd meg a jelszókövetelményeket a visszaállító űrlapon, MIELŐTT a beküldéssel próbálkoznak. Ne kelljen találgatniuk. „A jelszavad legyen legalább 12 karakter hosszú, tartalmazzon egy nagybetűt, egy számot és egy speciális karaktert.” Légy konkrét. Mutass példákat arra, mi felel meg.
A jelszóerősség-jelző (egy sáv, amely gyengét, közepeset vagy erőset mutat) segít a felhasználóknak megérteni, hogy a jelszavuk megfelel-e a követelményeknek, anélkül, hogy beküldenék, és hibát kapnának. Egyes felhasználók hasznosnak találják. Mások frusztrálónak, ha a követelmények nem világosak. Ha erősségmérőt használsz, párosítsd kifejezett szöveges követelményekkel.
Ötödik lépés: jelszó mező és megerősítés
Kérj új jelszót. Aztán kérd, hogy újra beírva erősítsék meg. Ez a megerősítő lépés elkapja az elgépeléseket. A hátránya, hogy a megerősítő mező súrlódást ad. A kutatások szerint a jelszó-megerősítő mező eltávolítása növeli a kitöltési arányt. Ha megtartod, mindkét mezőhöz tegyél „Jelszó felfedése” kapcsolót, hogy a beküldés előtt ellenőrizhessék, megegyezik-e a két bevitel.
Hatodik lépés: azonnali megerősítés és a következő lépések
Amikor sikeresen visszaállították a jelszavukat, mutass sikerüzenetet. „A jelszavad visszaállítva. Most már bejelentkezhetsz az új jelszavaddal.” Aztán adj hivatkozást a bejelentkező űrlaphoz, vagy egy „Tovább a bejelentkezéshez” gombot, hogy ne kelljen navigálniuk vagy keresgélniük.
Küldj nekik megerősítő e-mailt is. „A jelszavadat nemrég visszaállították. Ha nem te tetted, kattints ide a fiókod védelméhez.” Ez figyelmezteti őket, ha valaki más állította vissza a jelszavukat, és lehetőséget ad a visszavonásra.
Hová kerüljenek a bejelentkező űrlapok az oldaladon?
A bejelentkező űrlapok nem díszek. Keresgélés nélkül megtalálhatónak kell lenniük.
Fejléc vagy navigáció
A legszembetűnőbb hely a fejléc. A „Bejelentkezés” hivatkozás (vagy gomb) az oldalad jobb felső sarkában ott van, ahol a felhasználók várják. Amikor rákattintanak, vagy dedikált bejelentkező oldalra viszed őket, vagy felugró ablakban nyitod meg a bejelentkező űrlapot. A mobilfelhasználók a hamburger menüben várják a bejelentkezést. Soha ne rejtsd el a navigáció rétegei mögé.
Dedikált bejelentkező oldal
Hozz létre dedikált `/login` vagy `/sign-in` oldalt. Ezen az oldalon a bejelentkező űrlap van, semmi más. Nincsenek blogbejegyzések. Nincs marketingszöveg. Csak az űrlap és a szükséges súgószöveg. A tiszta, fókuszált oldal jobban konvertál, mint ha a bejelentkező űrlapot egy általános oldalba ágyaznád.
Jelszó-visszaállító oldal
A jelszó-visszaállító űrlapnak dedikált URL-en kell lennie, például `/reset-password` vagy `/forgot-password`. Ez az oldal csak a bejelentkező űrlapról vagy a visszaállító e-mailben lévő hivatkozásról érhető el. Nem szabad, hogy a keresők indexeljék. Add hozzá a `noindex` jelölést az oldalhoz a HTML-ben vagy a robots.txt-ben, hogy a Google ne próbálja rangsorolni.
Gyakori hibák a bejelentkező űrlapok tervezésében
Még a jó szándékkal készült bejelentkező űrlapokban is gyakran vannak olyan problémák, amelyek rontják a felhasználói élményt.
Túl sok mező a bejelentkezés előtt
Egyes oldalak magán a bejelentkező űrlapon kérnek felhasználónevet, e-mail-címet, telefonszámot és biztonsági választ. Ne tedd ezt. A bejelentkezés nem regisztráció. Csak e-mail-címet és jelszót kérdezz. Minden más extra súrlódás.
Rejtett vagy nem egyértelmű jelszókövetelmények
Ha a jelszókövetelmények rejtve vannak a beküldésig, a felhasználók frusztráltak lesznek. Beírnak egy jelszót. Beküldik. Hibaüzenet jelenik meg: „A jelszó legyen 12 karakter, és tartalmazzon számot.” Most újra kell próbálkozniuk. Mutasd előre a követelményeket.
Nincs jelszó-megjelenítési lehetőség
A felhasználók nem látják, mit gépeltek. Beküldik. Elrontják. Újra próbálják. Megint elrontják. Egy egyszerű kapcsoló megspórolja ezt a bosszúságot.
Zavaros hibaüzenetek
Soha ne mondd a felhasználóknak, hogy „Érvénytelen bejelentkezés.” Ez nem segít. Rossz e-mail-címet használnak? Rossz jelszót? Nincs aktiválva a fiók? Légy konkrét. Az „Ehhez az e-mail-címhez nem található fiók” vagy a „A jelszó helytelen” megmondja, mit kell javítaniuk. Vagy ha biztonsági okokból homályos szeretnél lenni, adj nekik helyreállítási utat. „Az e-mail-cím és a jelszó nem egyezik. Próbáld újra, vagy állítsd vissza a jelszavad.”
A visszaállító hivatkozás túl gyorsan lejár
A 15 perc alatt lejáró visszaállító hivatkozás bosszantja a felhasználókat. Munka után nézik meg az e-mailjüket. A hivatkozás már halott. Elölről kell kezdeniük. Adj nekik legalább 24 órát.
A visszaállítási folyamat zavaros oldalra visz
Egyes visszaállítási folyamatok olyan oldalra viszik a felhasználókat, amely nem mondja el egyértelműen, mit kell tenni. Rákattintanak a visszaállító hivatkozásra. Olyan oldalra érkeznek, ahol homályos a szöveg, és nincs űrlap. Azt hiszik, valami elromlott. Tedd egyértelművé. „Jelszó visszaállítása az example@email.com fiókhoz” jelszómezővel és beküldés gombbal.
Biztonsági szempontok a bejelentkezéshez és a jelszó-visszaállításhoz
A bejelentkező űrlap az oldalad biztonságkritikus része. Védd megfelelően.
Használj HTTPS-t minden bejelentkezési forgalomhoz
A bejelentkező oldalt HTTPS-en keresztül kell kiszolgálni, nem HTTP-n. A HTTPS titkosítja az átvitt adatokat, így a hackerek nem tudják elolvasni az e-mail-címet és a jelszót, miközben a szerveredhez utazik. Ez nem alku tárgya. Ha az oldaladnak nincs SSL-tanúsítványa, szerezz egyet. A legtöbb tárhelyszolgáltató ma már ingyenes SSL-tanúsítványt ad.
Ellenőrizd a jelszó erősségét a szerveren
A böngészőoldali ellenőrzés segít a felhasználóknak, de ne csak erre támaszkodj. A JavaScript-ellenőrzést meg lehet kerülni. Ellenőrizd a jelszót a szerveren. Nézd meg, hogy megfelel-e a követelményeidnek. Csak olyan jelszavakat fogadj el, amelyek megfelelnek az erősségi előírásaidnak.
Hash-eld és sózd a jelszavakat az adatbázisban
Soha ne tárolj jelszavakat egyszerű szövegként. Használj biztonságos hash algoritmust (például bcrypt vagy Argon2) sóval. Még ha valaki feltöri is az adatbázisodat, nem tudja elolvasni a jelszavakat. A megfelelően hash-elt jelszót nem lehet visszafejteni az eredeti jelszóra.
Korlátozd a bejelentkezési kísérletek számát
Ha valaki egy perc alatt 10-szer próbál bejelentkezni, blokkold. A kísérletek korlátozása megelőzi a nyers erővel végzett támadásokat, amikor a hackerek jelszókombinációk ezreit próbálják ki. Néhány sikertelen kísérlet után tarts 15 perc szünetet, mielőtt több próbát engedsz.
A jelszó-visszaállító tokenek gyorsan járjanak le
A 24 óráig érvényes jelszó-visszaállító token a szokásos. A 7 napig vagy tovább érvényes tokenek növelik annak kockázatát, hogy egy feltört e-mail-fiók a webhelyfiók feltöréséhez vezet. Tartsd rövid életűre a tokeneket.
Naplózd a bejelentkezési tevékenységet csalásfelderítéshez
Vezess nyilvántartást a sikeres és a sikertelen bejelentkezési kísérletekről. Ha valaki új országból vagy szokatlan időben lép be, jelöld meg. Egyes rendszerek e-mailt küldenek, amikor egy fiókba új eszközről lépnek be. Ez figyelmezteti a fiók tulajdonosát, ha valaki más fért hozzá.
Mobilos bejelentkező űrlapok: mi más?
A mobil megváltoztatja, hogyan kell működniük a bejelentkező űrlapoknak.
Érintési felületek és gombméret
Mobilon az ujjak nem olyan pontosak, mint a kurzor. A gomboknak és a beviteli mezőknek nagyobbnak kell lenniük. A beküldés gomb legalább 44 pixel magas legyen. A beviteli mezők elég magasak legyenek a kényelmes gépeléshez. Célozd a 44-48 pixel magasságot.
Mobil billentyűzetek és beviteli típusok
Használd a `type="email"` típust az e-mail mezőhöz. Ez jelzi a mobil eszközöknek, hogy az e-mail billentyűzetet mutassák @ és . jelekkel. Enélkül a felhasználóknak billentyűzetmódot kell váltaniuk. Használd a `type="password"` típust a jelszó mezőhöz, hogy a billentyűzet megfeleljen. Ez a kis részlet koppintásokat és bosszúságot spórol meg.
Automatikus kitöltés és jelszókezelők
A mobilböngészők és a jelszókezelő alkalmazások (például a 1Password vagy a Bitwarden) automatikusan kitölthetik a bejelentkezési adatokat. Gondoskodj róla, hogy a HTML-attribútumaid támogassák ezt. Tedd az `autocomplete="username"` értéket az e-mail mezőre, és az `autocomplete="current-password"` értéket a jelszó mezőre. Ez óriási kényelem mobilon, ahol lassabb a gépelés.
Űrlapelrendezés kis képernyőn
Egymás alá rakd a mezőket. Ne tedd az e-mail-címet és a jelszót egymás mellé mobil képernyőn. Soronként egy mező. Az űrlap a teljes szélességet használja megfelelő margóval. Az az űrlap, amely mobilon szűkösnek érződik, nem kerül kitöltésre.
Kerüld a mobil billentyűzet takarását
Amikor megjelenik a mobil billentyűzet, a képernyő felét eltakarja. Gondoskodj róla, hogy a bejelentkezés gomb látható legyen a billentyűzet fölött, vagy adj módot a billentyűzet egyszerű elrejtésére. Egyes oldalak csak a billentyűzet bezárása után mutatják a gombot. Ez bosszantja a felhasználókat. Tartsd láthatóan a gombot.
Gyakori kérdések
Hány jelszókövetelményt kérjek?
Mutassak jelszóerősség-jelzőt?
Mi van, ha valaki a jelszavát ÉS az e-mail-címét is elfelejti?
Kell kétfaktoros azonosítás a bejelentkező űrlapomra?
Milyen gyakran kelljen valakinek visszaállítania a jelszavát?
Jobb felhasználónevet vagy e-mail-címet kérni?
Hogyan segít a WEMASY a bejelentkező és jelszó-visszaállító űrlapokkal
A WEMASY űrlapépítője támogatja a biztonságos bejelentkezési és jelszó-visszaállítási folyamatokat. Hozz létre bejelentkező űrlapot e-mail és jelszó mezőkkel. Adj hozzá jelszó-megjelenítő kapcsolót egy kattintással. Állítsd be a jelszókövetelményeket (karakterhossz, nagybetű, szám, speciális karakter). Használj feltételes logikát, hogy a biztonsági igényeid szerint megjelenítsd vagy elhagyd az „Emlékezz rám” jelölőnégyzetet. Csatlakozz a WEMASY hitelesítési rendszeréhez, vagy integrálj külső hitelesítési szolgáltatókat API-n keresztül. A WEMASY automatikusan kezeli a jelszó-hash-elést, a kísérletek korlátozását és a munkamenet-kezelést. A jelszó-visszaállító e-maileket biztonságosan küldi a saját domainedről. A visszaállító tokenek 24 óra után lejárnak. Nézd meg, mi tartozik a WEMASY csomagjaihoz.