Nykymaailmassa verkkoturvallisuus on tärkeämpää kuin koskaan. Koska verkkotilejä on niin monia seurattavia, on tärkeää, että jokaisella on vahva ja ainutlaatuinen salasana.

Jos olet rakentamassa sivustoa, on vielä tärkeämpää varmistaa, että salasanat ovat mahdollisimman turvallisia. Voit esittää tarkistuslistan sivustosi käyttäjille ja varmistaa, että heidän salasanansa vastaa vaatimuksiasi, ennen kuin hyväksyt sen.

Opi ottamaan käyttöön salasanan tarkistuslista Next.js: n avulla.

Miksi käyttää salasanan tarkistuslistaa?

On monia syitä, miksi saatat haluta käyttää salasanan tarkistuslistaa.

Ensinnäkin se voi auttaa sinua varmistamaan, että käyttäjiesi salasanat ovat vahvoja ja ainutlaatuisia. Kun sinulla on tarkistuslista vaatimuksista, voit olla varma, että jokainen salasana täyttää tietyn standardin.

Käyttäjäsi eivät ehkä kiitä sinua siitä, mutta teet heille palveluksen. Kannustamalla vahvoihin salasanoihin vähennät todennäköisyyttä, että hakkerit pääsevät jollekin käyttäjiesi tilille.

Toiseksi salasanan tarkistuslista voi auttaa välittämään turvallisuuden tunteen. Julkaisemalla vaatimukset kerrot käyttäjillesi, että otat salasanasuojauksen vakavasti.

Sinun tulee kuitenkin olla tietoinen siitä, että salasanan tarkistuslista ei ole mikään ihmeratkaisu salasanaongelmiin. Itse asiassa, jos teet salasanoistasi liian rajoittavia, voit helpottaa hakkereita rajaamaan vaihtoehtojaan ja pakottamaan salasanan raa'alla tavalla. Viime kädessä turvalliset ja ainutlaatuiset salasanat, jotka käyttäjät tallentaa salasanan hallintaan ovat parhaita.

Kuinka luoda salasanan tarkistuslista

On kaksi tapaa luoda salasanan tarkistuslista Next.js: ssä. Voit käyttää joko sisäänrakennettuja ominaisuuksia tai ulkoista moduulia.

Mitä tarvitset

Jotta voit luoda salasanan tarkistuslistan Next.js: ssä, tarvitset seuraavat:

  • Node.js asennettu
  • Tekstieditori
  • Next.js-projekti

Tapa 1: Sisäisten ominaisuuksien käyttäminen

Next.js sisältää sisäänrakennettuja ominaisuuksia, kuten koukut ja kontekstin. On erityyppisiä koukkuja joita voit käyttää salasanan tarkistuslistan luomiseen.

Luo ensin uusi tiedosto Next.js-sovelluksessasi ja nimeä se salasanaChecklist.js. Tässä tiedostossa voit ottaa käyttäjiltä salasanan ja tarkistaa, täyttääkö salasana vaatimukset.

tuonti Reagoi, { useState } alkaen 'reagoi'
toimintoSalasanan tarkistuslista() {
 const [salasana, setPassword] = useState('')
konst [error, setError] = useState(väärä)


toimintokahvaVaihda(e) {
aseta salasana(e.kohde.arvo)
 }


toimintokäsitteleLähetä(e) {
e.preventDefault()


// Salasanavaatimukset
konst vaatimukset = [
// Täytyy olla vähintään 8 merkkiä
 salasana.pituus >= 8,
// Täytyy sisältää vähintään yksi iso kirjain
 /[A-Z]/.testata(Salasana),
// Täytyy sisältää vähintään yksi pieni kirjain
 /[a-z]/.testata(Salasana),
// Täytyy sisältää vähintään yksi numero
 /\d/.testata(Salasana)
 ]


// Jos kaikki vaatimukset täyttyvät, salasana on kelvollinen
konst isValid = vaatimukset.every(Boolean)
 if (onValid) {
 hälytys ('Salasana on voimassa!')
 } muu {
 setError(totta)
 }
 }


palata (
<lomake onSubmit={handleSubmit}>
<etiketti>
 Salasana:
<syöttö
 tyyppi="Salasana"
 arvo={salasana}
 onChange={handleChange}
 />
</label>
<syöttötyyppi="Lähetä" arvo ="Lähetä" />
 {virhe &&<s>Salasana ei kelpaa!</s>}
</form>
 )
}
viedäoletuksena Salasanan tarkistuslista

Yllä olevassa koodissa sinun on ensin syötettävä salasana käyttäjiltä. Voit tehdä tämän käyttämällä useState koukku. Tämän koukun avulla voit luoda tilamuuttujan ja funktion tämän muuttujan päivittämiseksi. Tässä tapauksessa tilamuuttuja on Salasana ja toiminto päivittää se on aseta salasana.

Seuraavaksi sinun on luotava funktio lomakkeen lähettämistä varten. Tämä toiminto estää lomakkeen oletustoiminnon (eli lomakkeen lähettämisen) ja tarkistaa, täyttääkö salasana vaatimukset.

Salasanavaatimukset ovat seuraavat:

  • oltava vähintään kahdeksan merkkiä pitkä
  • sisältää vähintään yhden ison kirjaimen
  • sisältää vähintään yhden pienen kirjaimen
  • sisältää vähintään yhden numeron

Voit käyttää joka tapa tarkistaa, täyttääkö salasana kaikki vaatimukset. Jos näin on, salasana on kelvollinen. Muussa tapauksessa koodi näyttää virheilmoituksen.

Tapa 3: React-password-checklist -moduulin käyttäminen

Toinen tapa luoda salasanan tarkistuslista Next.js: ssä on käyttää React-password-checklist moduuli. Tämä moduuli on helppokäyttöinen, ja siinä on paljon ominaisuuksia.

Asenna ensin moduuli seuraavalla komennolla:

npm Asentaa reagoi-Salasana-tarkistuslista --Tallentaa

Tuo moduuli sitten omaan salasanaChecklist.js tiedosto:

tuonti Reagoi, {useState} alkaen "reagoi"
tuonti Salasanan tarkistuslista alkaen "react-password-checklist"
konst Sovellus = () => {
 const [salasana, setPassword] = useState("")


palata (
<muodossa>
<etiketti>Salasana:</label>
<syöttötyyppi="Salasana" onChange={e => setPassword (e.target.value)}/>


<Salasanan tarkistuslista
 säännöt={["minPituus","erikoisChar","määrä","iso alkukirjain"]}
 minLength={5}
 arvo={salasana}
 />
</form>
 )
}
viedäoletuksena Sovellus

Tämä koodi välittää rekvisiitta minLength, specialChar, numero ja pääoma Salasanan tarkistuslista komponentti. Komponentti käyttää näitä varusteita tarkistaakseen, täyttääkö salasana vaatimukset.

Voit myös lisätä käännettyjä viestejä komponenttiin ohittamalla viestejä prop. Nämä merkkijonot ohittavat oletusvirheet, jotta voit käyttää niitä muille kielille tai muunnelmille.

tuonti Reagoi, {useState} alkaen "reagoi"
tuonti Salasanan tarkistuslista alkaen "react-password-checklist"
konst Sovellus = () => {
 const [salasana, setPassword] = useState("")


palata (
<muodossa>
<etiketti>Salasana:</label>
<syöttötyyppi="Salasana" onChange={e => setPassword (e.target.value)}/>


<Salasanan tarkistuslista
 säännöt={["minPituus", "erikoisChar", "määrä", "iso alkukirjain"]}
 minLength={5}
 arvo={salasana}
 viestit={{
 minLength: "La päinvastoinña tiene más de 8 merkkiä.",
 erikoismerkki: "La päinvastoinñTiene on erityisen luonteenomaista.",
 määrä: "La päinvastoinña tiene un número.",
 iso alkukirjain: "La päinvastoinña tiene una letra mayúskaula.",
 ottelu: "Las vastineñsattumana.",
 }}
 />
</form>
 )
}
viedäoletuksena Sovellus

Yllä olevassa koodissa viestejä prop tallentaa vaihtoehtoiset virheilmoitukset. Komponentti näyttää nämä viestit, jos salasana ei täytä vaatimuksia.

Tämä menetelmä on kätevämpi, koska sinun ei tarvitse kirjoittaa koodia tarkistaaksesi, täyttääkö salasana vaatimukset. Tämän moduulin käytössä on myös monia muita etuja, kuten:

  • Salasanan vahvuuden näyttäminen: React-password-checklist voi näyttää salasanan vahvuuden, jotta käyttäjät näkevät, kuinka vahva heidän salasanansa on.
  • Virheilmoituksen näyttäminen: React-password-checklist voi myös näyttää virheilmoituksen, jos salasana ei kelpaa.
  • Muotoilu: Sinun ei tarvitse lisätä mitään ylimääräistä tyyliä tarkistuslistaan. Moduuli tarjoaa oletustyylin, jota voit käyttää sovelluksessasi. Jos haluat lisätä tyyliä, voit käyttää tavallista CSS: ää tai muuta tyylikehykset, kuten tailwind CSS.

Paranna käyttäjien turvallisuutta salasanan tarkistuslistan avulla

Vahva salasana on avain verkkoturvallisuuteen. On tärkeää, että jokaisella verkkotilillä on vahva ja ainutlaatuinen salasana. Käyttämällä salasanan tarkistuslistaa voit olla varma, että jokainen salasana täyttää tietyn standardin.

Sovelluksesi käyttäjät arvostavat myös sitä, että he voivat nähdä salasanan vahvuuden. Näin he voivat olla varmoja, että heidän salasanansa ovat riittävän vahvoja. Tämä parantaa sovelluksesi käyttökokemusta ja parantaa myös sovelluksesi käyttäjien turvallisuutta. Vastaavasti voit myös vahvistaa lomakkeet Next.js-sovelluksessasi.