Kävijä saapuu sivustollesi ja napsauttaa "Kirjaudu sisään". Hän odottaa sujuvaa kirjautumiskokemusta. Sen sijaan hän törmää lomakkeeseen, joka turhauttaa. Salasanavaatimukset on piilotettu lähetykseen asti. Salasanakenttä on pieni, ja siihen on vaikea kirjoittaa. "Näytä salasana" -vaihtoehtoa ei ole, joten hän ei voi tarkistaa kirjoittamaansa. Salasana menee väärin. Hän napsauttaa "Unohtuiko salasana" ja päätyy sekavaan nollauksen kulkuun. Muutaman minuutin kuluttua hän luovuttaa eikä palaa koskaan.
Kirjautumis- ja salasanan nollauslomakkeet ovat ratkaisevia kosketuspisteitä. Nämä lomakkeet seisovat palaavan kävijän ja hänen tilinsä välissä. Jos kokemus on huono, he eivät vain lähde. He olettavat, ettei sivustosi ole luotettava. Tässä luvussa käydään läpi, miten rakennat kirjautumis- ja salasanan nollauslomakkeet, jotka ovat turvallisia, selkeitä ja kunnioittavat käyttäjän aikaa.
Mitä kenttiä kirjautumislomake tarvitsee?
Kirjautumislomake tarvitsee täsmälleen kolme asiaa. Ensinnäkin tavan tunnistaa, kuka henkilö on. Toiseksi tavan varmistaa hänen henkilöllisyytensä. Kolmanneksi tavan pysyä kirjautuneena. Se tarkoittaa vähintään kolmea kenttää.
Sähköpostikenttä
Käytä sähköpostia, älä käyttäjätunnusta. Sähköposti on yksinkertaisempi. Käyttäjät unohtavat käyttäjätunnuksia. He eivät unohda sähköpostiosoitettaan. Tee kentästä sähköpostiosoitteen syöttökenttä ja nimeä se selvästi "Sähköpostiosoite". Käytä HTML:n `type="email"`, jolloin mobiilinäppäimistöt näyttävät @-merkin ja sähköpostin validointi tapahtuu automaattisesti. Lisää HTML-attribuuttiin `autocomplete="username"`, jotta selaimet ja salasanahallintasovellukset tietävät, että tähän kuuluu kirjautumistunniste, ja voivat täyttää sen automaattisesti käyttäjille, jotka ovat tallentaneet tunnuksensa.
Salasanakenttä
Käytä `type="password"`, jotta teksti on piilotettu. Lisää `id="current-password"` ja `autocomplete="current-password"`, jotta salasanahallintasovellukset tunnistavat tämän kentän ja täyttävät tallennetut salasanat automaattisesti. Salli liittäminen. Tietoturva-asiantuntijat ovat yhtä mieltä siitä, että liittämisen estäminen salasanakentissä ei estä hyökkäyksiä. Se vain turhauttaa ihmisiä, jotka käyttävät salasanahallintasovelluksia.
Tee salasanakentästä visuaalisesti vähintään 10 merkkiä leveä. Pieni kenttä tuntuu ahtaalta. Käyttäjät epäilevät, mahtuuko heidän pitkä salasanansa. Leveämpi kenttä rakentaa luottamusta ja vähentää lähetysvirheitä.
Näytä salasana -vaihdin
Sisällytä "Näytä salasana" tai "Paljasta salasana" -vaihdin (yleensä silmäkuvake tai valintaruutu). Kun se on päällä, salasanakenttä muuttuu muotoon `type="text"`, jotta käyttäjät näkevät kirjoittamansa. Tämä ei ole tietoturvariski. Se on käytettävyysominaisuus, joka vähentää lähetysvirheitä ja turhautumista. Käyttäjät kirjoittavat salasanoja huolellisesti ja haluavat tarkistaa ne ennen lähetystä.
Muista minut -valintaruutu (valinnainen mutta suositeltava)
"Muista minut tällä laitteella" tai "Pidä minut kirjautuneena" -valintaruutu on valinnainen, mutta se parantaa kokemusta. Kun se on ruksattu, istunto kestää pidempään tai selain tallentaa pysyvän kirjautumistunnisteen (turvallisesti). Tämä tarkoittaa, että käyttäjien ei tarvitse kirjautua sisään joka kerta, kun he vierailevat. Matalan riskin tileille tämä on turvallista. Korkean tietoturvan tileille (talous, terveys, hallintapaneelit) jätä tämä pois tai vaadi uusi tunnistautuminen arkaluonteisissa toiminnoissa.
Jos lisäät muista minut -valintaruudun, kerro selvästi, mitä se tekee. "Muista minut 30 päivää" on selkeämpi kuin pelkkä "Muista minut."
Unohtuiko salasana -linkki
Sijoita "Unohtuiko salasana?" -linkki suoraan salasanakentän alle tai sen oikealle puolelle. Tämä ei ole valinnainen. Käyttäjät unohtavat salasanoja. Tarjoa ilmeinen tapa nollata se. Jos he eivät löydä linkkiä, he lähtevät sivustolta eivätkä ehkä palaa koskaan.
Miten salasanan nollauslomakkeen pitäisi toimia?
Salasanan nollauksen kulussa on useita vaiheita. Jokaisella vaiheella on merkitystä. Jokainen vaihe on paikka, jossa käyttäjät voivat hämmentyä ja keskeyttää.
Vaihe yksi: pyydä sähköpostin vahvistus
Nollauksen kulku alkaa, kun käyttäjä napsauttaa kirjautumislomakkeessa "Unohtuiko salasana". He päätyvät sivulle, jossa lukee jotain tällaista: "Syötä sähköpostiosoitteesi nollataksesi salasanasi." Näkyviin tulee yksi sähköpostikenttä. Siinä kaikki. Ei ylimääräisiä kenttiä. Ei käyttäjätunnuksen tai turvakysymysten kysymistä. Vain sähköposti.
Painikkeen pitäisi sanoa jotain selkeää ja toimintaan kehottavaa. "Lähetä nollauslinkki" tai "Hae nollausohjeet" kertoo, mitä seuraavaksi tapahtuu. "Lähetä" on epämääräinen.
Vaihe kaksi: lähetä nollauslinkki sähköpostilla
Kun he lähettävät sähköpostinsa, järjestelmäsi lähettää heille heti salasanan nollaussähköpostin. Sähköpostin pitäisi saapua sekunneissa, ei minuuteissa. Nopeudella on väliä. Jos sähköposti kestää 10 minuuttia, käyttäjät olettavat, ettei se toiminut, ja yrittävät uudelleen, tai pahempaa, lähtevät.
Nollaussähköposti sisältää yksilöllisen linkin (tai koodin, jonka he syöttävät seuraavalla sivulla). Linkin pitäisi vanhentua tietyn ajan kuluttua, yleensä 24 tunnissa. Linkki, joka ei koskaan vanhene, on tietoturvariski, jos joku pääsee heidän sähköpostiinsa.
Vaihe kolme: varmista linkki ja näytä salasanan nollauslomake
Kun he napsauttavat sähköpostin nollauslinkkiä, he saapuvat salasanan nollauslomakkeelle. Tämän sivun pitäisi selvästi vahvistaa, mitä tapahtuu: "Nollaa salasanasi" tai "Luo uusi salasana." Ei epäselvyyttä siitä, ovatko he oikeassa paikassa.
Näytä sähköpostiosoite, jonka salasanaa he nollaavat. "Nollaat salasanaa osoitteelle example@email.com." Tämä rauhoittaa heitä, että he nollaavat oikean tilin.
Vaihe neljä: kerro salasanavaatimukset selvästi ennen lähetystä
Näytä salasanavaatimukset nollauslomakkeessa ENNEN kuin he yrittävät lähettää. Älä pakota heitä arvaamaan. "Salasanan on oltava vähintään 12 merkkiä pitkä ja sisällettävä yksi iso kirjain, yksi numero ja yksi erikoismerkki." Ole täsmällinen. Näytä esimerkkejä siitä, mikä kelpaa.
Salasanan vahvuusilmaisin (palkki, joka näyttää heikon, keskitasoisen tai vahvan) auttaa käyttäjiä ymmärtämään, täyttääkö heidän salasanansa vaatimukset ilman, että he lähettävät ja saavat virheen. Jotkut käyttäjät pitävät tätä hyödyllisenä. Jotkut kokevat sen turhauttavana, jos vaatimukset ovat epäselvät. Jos käytät vahvuusmittaria, yhdistä se täsmällisiin tekstimuotoisiin vaatimuksiin.
Vaihe viisi: salasanakenttä ja vahvistus
Pyydä uutta salasanaa. Pyydä sitten vahvistamaan se kirjoittamalla se uudelleen. Tämä vahvistusvaihe huomaa kirjoitusvirheet. Haittapuoli on, että vahvistuskenttä lisää vaivaa. Tutkimusten mukaan salasanan vahvistuskentän poistaminen nostaa täyttöastetta. Jos pidät sen, varusta kumpikin kenttä "Paljasta salasana" -vaihtimella, jotta he voivat tarkistaa, että molemmat syötteet täsmäävät ennen lähetystä.
Vaihe kuusi: välitön vahvistus ja seuraavat vaiheet
Kun he ovat nollanneet salasanansa onnistuneesti, näytä onnistumisviesti. "Salasanasi on nollattu. Voit nyt kirjautua sisään uudella salasanallasi." Anna sitten linkki takaisin kirjautumislomakkeelle tai painike, jossa lukee "Siirry kirjautumiseen", jotta heidän ei tarvitse navigoida tai etsiä.
Lähetä heille myös vahvistussähköposti. "Salasanasi nollattiin äskettäin. Jos et tehnyt tätä itse, napsauta tästä suojataksesi tilisi." Tämä hälyttää heidät, jos joku muu nollasi heidän salasanansa, ja antaa tavan perua se.
Mihin kirjautumislomakkeet sijoitetaan sivustollasi?
Kirjautumislomakkeet eivät ole koriste. Ne pitää löytää ilman etsimistä.
Ylätunniste tai navigaatio
Näkyvin paikka on ylätunniste. "Kirjaudu sisään" -linkki (tai painike) sivustosi oikeassa yläkulmassa on paikka, josta käyttäjät sitä odottavat. Kun he napsauttavat sitä, vie heidät joko omalle kirjautumissivulle tai avaa kirjautumislomake modaalina. Mobiilikäyttäjät odottavat kirjautumisvaihtoehtoa hampurilaisvalikosta. Älä koskaan piilota sitä navigaation kerrosten taakse.
Oma kirjautumissivu
Luo oma `/login`- tai `/sign-in`-sivu. Tällä sivulla on kirjautumislomake, ei mitään muuta. Ei blogikirjoituksia. Ei markkinointitekstiä. Vain lomake ja tarvittava ohjeteksti. Siisti, keskittynyt sivu konvertoi paremmin kuin kirjautumislomakkeen upottaminen yleiselle sivulle.
Salasanan nollaussivu
Salasanan nollauslomakkeen pitäisi olla omassa URL-osoitteessaan, kuten `/reset-password` tai `/forgot-password`. Tälle sivulle pääsee vain kirjautumislomakkeesta tai nollaussähköpostin linkistä. Hakukoneiden ei pitäisi indeksoida sitä. Lisää tälle sivulle `noindex` HTML:ssäsi tai robots.txt-tiedostossa, jotta Google ei yritä sijoittaa sitä hakutuloksiin.
Yleisiä virheitä kirjautumislomakkeen suunnittelussa
Hyvää tarkoittavissakin kirjautumislomakkeissa on usein ongelmia, jotka heikentävät käyttökokemusta.
Liian monta kenttää ennen kirjautumista
Jotkut sivustot kysyvät kirjautumislomakkeessa käyttäjätunnusta, sähköpostia, puhelinnumeroa ja turvavastausta. Älä tee näin. Kirjautuminen ei ole rekisteröityminen. Kysy vain sähköposti ja salasana. Kaikki muu on ylimääräistä vaivaa.
Piilotetut tai epäselvät salasanavaatimukset
Jos salasanavaatimukset on piilotettu lähetykseen asti, käyttäjät turhautuvat. He syöttävät salasanan. He painavat lähetä. Virhe ilmestyy: "Salasanan on oltava 12 merkkiä ja sisällettävä numero." Nyt heidän pitää yrittää uudelleen. Näytä vaatimukset etukäteen.
Ei näytä salasana -vaihtoehtoa
Käyttäjät eivät näe kirjoittamaansa. He lähettävät. Se menee väärin. He yrittävät uudelleen. Se menee taas väärin. Yksinkertainen vaihdin säästää tältä turhautumiselta.
Sekavat virheilmoitukset
Älä koskaan kerro käyttäjille "Virheellinen kirjautuminen." Se ei auta. Käyttävätkö he väärää sähköpostia? Väärää salasanaa? Onko tili aktivoimatta? Ole täsmällinen. "Tälle sähköpostiosoitteelle ei löydy tiliä" tai "Salasana on virheellinen" kertoo, mikä korjataan. Tai jos haluat olla epämääräinen tietoturvasyistä, anna heille palautuspolku. "Sähköposti ja salasana eivät täsmää. Yritä uudelleen tai nollaa salasanasi."
Nollauslinkki vanhenee liian nopeasti
Nollauslinkki, joka vanhenee 15 minuutissa, turhauttaa käyttäjiä. He tarkistavat sähköpostinsa töiden jälkeen. Linkki on kuollut. Heidän pitää aloittaa alusta. Anna heille vähintään 24 tuntia.
Nollauksen kulku johtaa sekavalle sivulle
Jotkin nollauksen kulut vievät käyttäjät sivulle, joka ei kerro selvästi, mitä tehdä. He napsauttavat nollauslinkkiä. He päätyvät sivulle, jossa on epäselvä teksti eikä lomaketta. He ajattelevat, että jokin meni pieleen. Tee se ilmeiseksi. "Nollaa salasanasi osoitteelle example@email.com" salasanakentällä ja lähetyspainikkeella.
Kirjautumisen ja salasanan nollauksen tietoturvanäkökohdat
Kirjautumislomake on sivustosi tietoturvan kannalta kriittinen osa. Suojaa se kunnolla.
Käytä HTTPS:ää kaikessa kirjautumisliikenteessä
Kirjautumissivusi on tarjottava HTTPS:n kautta, ei HTTP:n. HTTPS salaa tiedot siirron aikana, jotta hakkerit eivät voi lukea sähköpostia ja salasanaa, kun ne matkaavat palvelimellesi. Tämä ei ole neuvoteltavissa. Jos sivustollasi ei ole SSL-varmennetta, hanki sellainen. Useimmat web-hotellit tarjoavat nykyään ilmaisia SSL-varmenteita.
Validoi salasanan vahvuus palvelimella
Selainpuolen validointi auttaa käyttäjiä, mutta älä luota pelkästään siihen. JavaScript-validoinnin voi ohittaa. Validoi salasana palvelimellasi. Tarkista, että se täyttää vaatimuksesi. Hyväksy vain salasanat, jotka täyttävät vahvuusvaatimuksesi.
Tiivistä ja suolaa salasanat tietokannassasi
Älä koskaan tallenna salasanoja selkotekstinä. Käytä turvallista tiivistysalgoritmia (kuten bcrypt tai Argon2) suolan kanssa. Vaikka joku murtautuisi tietokantaasi, hän ei voi lukea salasanoja. Kunnolla tiivistettyä salasanaa ei voi purkaa takaisin alkuperäiseksi salasanaksi.
Rajoita kirjautumisyritysten määrää
Jos joku yrittää kirjautua 10 kertaa minuutissa, estä hänet. Yritysten rajoittaminen estää raakaan voimaan perustuvat hyökkäykset, joissa hakkerit kokeilevat tuhansia salasanayhdistelmiä. Muutaman epäonnistuneen yrityksen jälkeen pidä 15 minuutin tauko ennen kuin sallit lisää yrityksiä.
Vanhenna salasanan nollaustunnisteet nopeasti
Salasanan nollaustunniste, joka toimii 24 tuntia, on vakio. Tunnisteet, jotka toimivat 7 päivää tai pidempään, lisäävät riskiä, että vaarantunut sähköpostitili johtaa vaarantuneeseen sivuston tiliin. Pidä tunnisteet lyhytikäisinä.
Kirjaa kirjautumistoiminta väärinkäytösten havaitsemiseksi
Pidä kirjaa onnistuneista ja epäonnistuneista kirjautumisyrityksistä. Jos joku kirjautuu uudesta maasta tai epätavallisena aikana, merkitse se. Jotkin järjestelmät lähettävät sähköpostin, kun tilille kirjaudutaan uudelta laitteelta. Tämä hälyttää tilin omistajan, jos joku muu pääsi sisään.
Mobiilikirjautumislomakkeet: mikä on erilaista?
Mobiili muuttaa tapaa, jolla kirjautumislomakkeiden täytyy toimia.
Kosketusalueet ja painikkeiden koko
Mobiilissa sormet eivät ole yhtä tarkkoja kuin kursorit. Painikkeiden ja syöttökenttien pitää olla suurempia. Lähetyspainikkeen pitäisi olla vähintään 44 pikseliä korkea. Syöttökenttien pitäisi olla tarpeeksi korkeita mukavaan kirjoittamiseen. Tavoittele 44-48 pikselin korkeutta.
Mobiilinäppäimistöt ja syöttötyypit
Käytä sähköpostikentässä `type="email"`. Se kertoo mobiililaitteille, että näytetään sähköpostinäppäimistö, jossa on @- ja .-merkit. Ilman sitä käyttäjien pitää vaihtaa näppäimistön tilaa. Käytä salasanakentässä `type="password"`, jotta näppäimistö vastaa kenttää. Tämä pieni yksityiskohta säästää napautuksia ja turhautumista.
Automaattinen täyttö ja salasanahallintasovellukset
Mobiiliselaimet ja salasanahallintasovellukset voivat täyttää kirjautumistunnukset automaattisesti. Varmista, että HTML-attribuuttisi tukevat tätä. Lisää sähköpostikenttään `autocomplete="username"` ja salasanakenttään `autocomplete="current-password"`. Tämä on valtava helpotus mobiilissa, jossa kirjoittaminen on hitaampaa.
Lomakkeen asettelu pienillä näytöillä
Pinoa kentät pystysuunnassa. Älä laita sähköpostia ja salasanaa vierekkäin mobiilinäytöllä. Yksi kenttä riviä kohti. Lomakkeen pitäisi käyttää koko leveyden riittävillä marginaaleilla. Lomaketta, joka tuntuu ahtaalta mobiilissa, ei täytetä loppuun.
Vältä mobiilinäppäimistön päällekkäisyys
Kun mobiilinäppäimistö ilmestyy, se peittää puolet näytöstä. Varmista, että kirjautumispainike on näkyvissä näppäimistön yläpuolella, tai tarjoa tapa sulkea näppäimistö helposti. Jotkin sivustot näyttävät painikkeen vasta, kun näppäimistö sulkeutuu. Se turhauttaa käyttäjiä. Pidä painike näkyvissä.
Usein kysyttyä
Kuinka monta salasanavaatimusta pitäisi asettaa?
Pitäisikö salasanan vahvuusilmaisin näyttää?
Entä jos joku unohtaa sekä salasanansa ETTÄ sähköpostiosoitteensa?
Tarvitsenko kaksivaiheisen tunnistautumisen kirjautumislomakkeeseeni?
Kuinka usein salasana pitäisi nollata?
Kannattaako kysyä käyttäjätunnusta vai sähköpostiosoitetta?
Miten WEMASY auttaa kirjautumis- ja salasanan nollauslomakkeissa
WEMASYn lomakerakentaja tukee turvallisia kirjautumis- ja salasanan nollauksen kulkuja. Luo kirjautumislomake sähköposti- ja salasanakentillä. Lisää näytä salasana -vaihdin yhdellä napsautuksella. Aseta salasanavaatimukset (merkkimäärä, isot kirjaimet, numerot, erikoismerkit). Käytä ehdollista logiikkaa näyttääksesi muista minut -valintaruudun tai ohittaaksesi sen tietoturvatarpeidesi mukaan. Yhdistä WEMASYn tunnistautumisjärjestelmään tai integroi ulkoisiin tunnistautumispalveluihin API:n kautta. WEMASY hoitaa salasanojen tiivistyksen, yritysten rajoituksen ja istunnonhallinnan automaattisesti. Salasanan nollaussähköpostit lähetetään turvallisesti verkkotunnuksestasi. Nollaustunnisteet vanhenevat 24 tunnissa. Katso, mitä WEMASY-tilauksiin kuuluu.