Di dunia sekarang ini, keamanan online menjadi lebih penting dari sebelumnya. Dengan begitu banyak akun online yang harus dilacak, penting untuk memiliki kata sandi yang kuat dan unik untuk masing-masing akun.

Jika Anda membuat situs, yang lebih penting lagi adalah memastikan kata sandi seaman mungkin. Anda dapat memberikan daftar periksa kepada mereka yang menggunakan situs Anda dan memastikan kata sandi mereka memenuhi persyaratan Anda sebelum Anda menerimanya.

Pelajari cara menerapkan daftar periksa kata sandi menggunakan Next.js.

Mengapa Menggunakan Daftar Periksa Kata Sandi?

Ada banyak alasan mengapa Anda mungkin ingin menggunakan daftar kata sandi.

Pertama, ini dapat membantu Anda memastikan bahwa kata sandi pengguna Anda kuat dan unik. Dengan memiliki daftar persyaratan, Anda dapat yakin bahwa setiap kata sandi memenuhi standar tertentu.

Pengguna Anda mungkin tidak berterima kasih untuk itu, tetapi Anda akan membantu mereka. Dengan mendorong kata sandi yang kuat, Anda akan memperkecil kemungkinan peretas mendapatkan akses ke salah satu akun pengguna Anda.

instagram viewer

Kedua, daftar kata sandi dapat membantu menyampaikan rasa aman. Dengan memublikasikan persyaratan, Anda memberi tahu pengguna bahwa Anda menganggap serius keamanan sandi.

Namun, Anda harus menyadari bahwa daftar kata sandi bukanlah solusi ajaib untuk masalah kata sandi. Faktanya, jika Anda membuat kata sandi terlalu ketat, Anda dapat mempermudah peretas untuk mempersempit pilihan mereka dan memaksa kata sandi dengan kasar. Pada akhirnya, kata sandi yang aman dan unik bagi pengguna simpan di pengelola kata sandi terbaik.

Cara Membuat Daftar Periksa Kata Sandi

Ada dua cara untuk membuat daftar kata sandi di Next.js. Anda dapat menggunakan fitur bawaan atau Anda dapat menggunakan modul eksternal.

Apa yang Akan Anda Butuhkan

Untuk membuat daftar periksa kata sandi di Next.js, Anda memerlukan yang berikut ini:

  • Node.js Terpasang
  • Editor teks
  • Proyek Next.js

Metode 1: Menggunakan Fitur Bawaan

Next.js hadir dengan fitur bawaan seperti kait dan konteks. Ada berbagai jenis kait yang dapat Anda gunakan untuk membuat daftar periksa kata sandi.

Pertama, buat file baru di aplikasi Next.js Anda dan beri nama passwordChecklist.js. Di file ini, Anda dapat mengambil input kata sandi dari pengguna, dan Anda dapat memeriksa apakah kata sandi memenuhi persyaratan.

impor Bereaksi, { useState } dari 'reaksi'
fungsiDaftar Periksa Kata Sandi() {
 const [kata sandi, setPassword] = useState('')
const [kesalahan, setError] = useState(PALSU)


fungsihandleChange(e) {
setPassword(e.target.nilai)
 }


fungsihandleSubmit(e) {
e.preventDefault()


// Persyaratan kata sandi
const persyaratan = [
// Setidaknya harus 8 karakter
 kata sandi.panjang >= 8,
// Harus berisi setidaknya 1 huruf besar
 /[A-Z]/.tes(kata sandi),
// Harus berisi minimal 1 huruf kecil
 /[a-z]/.tes(kata sandi),
// Harus mengandung setidaknya 1 angka
 /\d/.tes(kata sandi)
 ]


// Jika semua persyaratan terpenuhi, kata sandi valid
const isValid = persyaratan.setiap(Boolean)
 jika (Valid) {
 peringatan('Kata sandi valid!')
 } kalau tidak {
 setError(BENAR)
 }
 }


kembali (
<formulir onSubmit={handleSubmit}>
<label>
 Kata sandi:
<memasukkan
 jenis="kata sandi"
 nilai={kata sandi}
 onChange={handleChange}
 />
</label>
<jenis masukan="kirim" nilai="Kirim" />
 {kesalahan &&<P>Kata sandi tidak valid!</P>}
</form>
 )
}
eksporbawaan Daftar Periksa Kata Sandi

Pada kode di atas, pertama-tama Anda harus mengambil input kata sandi dari pengguna. Anda dapat melakukan ini menggunakan useState kait. Pengait ini memungkinkan Anda membuat variabel status dan fungsi untuk memperbarui variabel itu. Dalam hal ini, variabel negara adalah kata sandi dan fungsi untuk memperbaruinya adalah setPassword.

Selanjutnya, Anda perlu membuat fungsi untuk menangani pengiriman formulir. Fungsi ini akan mencegah tindakan default formulir (yaitu mengirimkan formulir) dan akan memeriksa apakah kata sandi memenuhi persyaratan.

Persyaratan kata sandi adalah harus:

  • setidaknya delapan karakter
  • berisi setidaknya satu huruf besar
  • mengandung setidaknya satu huruf kecil
  • mengandung setidaknya satu nomor

Anda dapat menggunakan setiap metode untuk memeriksa apakah kata sandi memenuhi semua persyaratan. Jika ya, kata sandinya valid. Jika tidak, kode akan menampilkan pesan kesalahan.

Metode 3: Menggunakan Modul react-password-checklist

Cara lain untuk membuat daftar kata sandi di Next.js adalah dengan menggunakan reaksi-kata sandi-daftar periksa modul. Modul ini mudah digunakan, dan dilengkapi dengan banyak fitur.

Pertama, instal modul menggunakan perintah berikut:

npm Install reaksi-kata sandi-daftar periksa --menyimpan

Kemudian, impor modul di file Anda passwordChecklist.js mengajukan:

impor Bereaksi, {useState} dari "reaksi"
impor Daftar Periksa Kata Sandi dari "reaksi-kata sandi-daftar periksa"
const Aplikasi = () => {
 const [kata sandi, setPassword] = useState("")


kembali (
<membentuk>
<label>Kata sandi:</label>
<jenis masukan="kata sandi" onChange={e => setPassword (e.target.nilai)}/>


<Daftar Periksa Kata Sandi
 aturan={["minLength","Char khusus","nomor","modal"]}
 minPanjang={5}
 nilai={kata sandi}
 />
</form>
 )
}
eksporbawaan Aplikasi

Kode ini meneruskan alat peraga minLength, specialChar, angka, dan modal ke Daftar Periksa Kata Sandi komponen. Komponen akan menggunakan alat peraga ini untuk memeriksa apakah kata sandi memenuhi persyaratan.

Anda juga dapat menambahkan pesan yang diterjemahkan ke komponen dengan meneruskan pesan menopang. String ini menggantikan error default sehingga Anda dapat menggunakannya untuk bahasa atau variasi lain.

impor Bereaksi, {useState} dari "reaksi"
impor Daftar Periksa Kata Sandi dari "reaksi-kata sandi-daftar periksa"
const Aplikasi = () => {
 const [kata sandi, setPassword] = useState("")


kembali (
<membentuk>
<label>Kata sandi:</label>
<jenis masukan="kata sandi" onChange={e => setPassword (e.target.nilai)}/>


<Daftar Periksa Kata Sandi
 aturan={["minLength", "Char khusus", "nomor", "modal"]}
 minPanjang={5}
 nilai={kata sandi}
 pesan={{
 minPanjang: "Sebaliknyañseorang tiene mádari 8 karakter.",
 Char khusus: "Sebaliknyaña tiene caracteres khususnya.",
 nomor: "Sebaliknyaña tiene un número.",
 modal: "Sebaliknyaña tiene una letra mayúscula.",
 cocok: "Sebaliknyañsebagai bertepatan.",
 }}
 />
</form>
 )
}
eksporbawaan Aplikasi

Pada kode di atas, file pesan prop menyimpan pesan kesalahan alternatif. Komponen akan menampilkan pesan ini saat kata sandi tidak memenuhi persyaratan.

Cara ini lebih nyaman karena Anda tidak perlu menulis kode untuk memeriksa apakah kata sandi memenuhi persyaratan. Banyak juga manfaat lain dari penggunaan modul ini seperti:

  • Menampilkan kekuatan kata sandi: reaksi-kata sandi-daftar periksa dapat menampilkan kekuatan kata sandi sehingga pengguna dapat melihat seberapa kuat kata sandi mereka.
  • Menampilkan pesan kesalahan: reaksi-kata sandi-daftar periksa juga dapat menampilkan pesan error jika password tidak valid.
  • Penataan Gaya: Anda tidak perlu menambahkan gaya tambahan apa pun ke daftar periksa. Modul ini menyediakan gaya default yang dapat Anda gunakan di aplikasi Anda. Jika Anda ingin menambahkan beberapa gaya tambahan, Anda dapat menggunakan CSS biasa atau lainnya kerangka kerja styling seperti tailwind CSS.

Tingkatkan Keamanan Pengguna Dengan Daftar Periksa Kata Sandi

Kata sandi yang kuat adalah kunci keamanan online. Penting untuk memiliki kata sandi yang kuat dan unik untuk setiap akun online. Dengan menggunakan daftar kata sandi, Anda dapat yakin bahwa setiap kata sandi memenuhi standar tertentu.

Pengguna aplikasi Anda juga akan menghargai kemampuan untuk melihat kekuatan kata sandi. Dengan cara ini, mereka dapat yakin bahwa kata sandi mereka cukup kuat. Ini akan meningkatkan pengalaman pengguna aplikasi Anda dan juga akan meningkatkan keamanan pengguna aplikasi Anda. Demikian pula, Anda juga dapat memvalidasi formulir di aplikasi Next.js Anda.