7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Menggunakan Skrip Meter Kekuatan Kata Sandi yang Disertakan di WordPress

Scroll to top
Read Time: 6 mins

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

WordPress menggunakan skrip kekuatan kata sandi yang cukup bagus yang digunakan untuk menampilkan apakah kata kunci yang Anda masukkan di admin WordPress adalah: tidak sama, sangat lemah, lemah, sedang atau kuat. Saat ini skrip ini hanya digunakan saat pembuatan pengguna baru dan saat mengganti kata sandi di admin Anda.

Pada artikel ini, saya akan mengajari Anda bagaimana menggunakan meter kata sandi WordPress dalam formulir Anda sendiri.

Skrip Kekuatan Kata Sandi

Skrip kekuatan meter tidak terdokumentasi pada saat artikel ini, jadi menggunakannya memerlukan sedikit penggalian ke inti WordPress. Skrip yang sebenarnya berada di dalam WordPress di wp-admin/js/password-strength-meter.js. Anda dapat melihatnya untuk mempelajari lebih lanjut tentang bagaimana skripnya bekerja.

Hal pertama yang perlu kita lakukan adalah meng-include skrip ini dengan memasukkannya di functions.php kita:

Apa yang ada di Skrip?

Skrip itu saja tidak melakukan apapun untuk kita. Ia hanya memberi kita dua fungsi JavaScript ini:

  • wp.passwordStrength.meter( password1, blacklist, password2 ). Ini adalah fungsi utama yang akan kita gunakan. Ini menganalisis dua string yang diberikan, kemudian memberikan kekuatan dari kedua dari ini sebagai angka 1-5, 1 menjadi yang terlemah dan 5 adalah yang terkuat. Ini juga mengambil sebuah array dari kata-kata yang berada dalam daftar hitam yang akan dipertimbangkan selama perhitungan sebagai kata-kata yang lemah.
  • wp.passwordStrength.userInputBlacklist(). Fungsi ini menciptakan array kata-kata yang harus dianggap sebagai kata-kata lemah dalam kata sandi. Fungsi ini mengkompilasi string yang ditemukan di judul, tagline, dan URL situs Anda. Ini juga memeriksa field masukan tertentu di halaman saat ini, lalu menambahkannya ke dalam daftar.

Kita sudah bisa mengukur kekuatan password hanya dengan fungsi diatas. Namun, ada lebih dari itu. Skripnya tidak memberi kita hasil yang bisa kita tampilkan. Kita harus membangun fungsi kita sendiri untuk melakukan ini.

Formulir Meter Kekuatan Kita

Mari kita ambil <form> ini sebagai titik awal dalam menerapkan fungsi meter kekuatan:

Kita akan menggunakan field names dan id dari atas dalam fungsi yang akan kita buat.

Inilah tujuan yang ingin kita capai saat kita selesai:

  1. Saat ada yang diketik di field kata sandi kita, kita memeriksa kekuatan kata sandinya,
  2. Kita kemudian menampilkan hasil kekuatan di bawah field kata sandi yang mirip dengan bagaimana WordPress melakukannya,
  3. Akhirnya, kita mengaktifkan tombol submit jika kata sandi dianggap kuat.

Fungsi Meter Kekuatan Kita

Biarkan saya pertama kali menunjukkan fungsi jQuery yang sudah selesai yang akan kita gunakan. Saya akan menjelaskan masing-masing bagian secara rinci setelahnya:

1. Argumen & Mereset Formulir

Saya membuat fungsinya mengambil semua objek yang akan kita modifikasi atau membutuhkan informasi darinya. Saya memberi awalan semua objek jQuery dengan $ untuk memudahkan identifikasi mereka dari objek JavaScript normal.

Beberapa baris pertama ini polos dan sederhana, kita mendapatkan kata sandi lalu kita mereset formulir kita. Kita membuat form yang selalu dinonaktifkan di awal sehingga kita bisa mengaktifkannya nanti, setelah kita mendapatkan nilai kekuatan yang bagus.

Kita juga akan menambahkan gaya ke meter kekuatan kita dengan memberi nama kelas tergantung pada skor kata sandinya kemudian, untuk memulai fungsinya, kita akan menghapus gaya meternya.

2. Array Daftar Hitam

Skrip meter kekuatan kata sandi yang berada di daftar hitam seharusnya tidak apa-apa. Tapi hanya jika Anda ingin menambahkan lebih banyak lagi, fungsi kita bisa menerima kata-kata tambahan. Keduanya digabungkan ke sini untuk dimasukkan ke fungsi meter-nya.

3. Memanggil Fungsi meter

Sekarang kita memanggil fungsi meter untuk mendapatkan nilai kekuatan kata sandi. Selanjutnya kita akan memutuskan apa yang harus dilakukan dengan hasilnya.

4. Menampilkan Hasil Meter

Sekarang kita memiliki nilai kekuatan, inilah bagian dimana kita menampilkannya. WordPress memberi kita objek JavaScript pwsL10n yang menyimpan label untuk setiap nilai kekuatan. Kita menampilkan label di dalam <span> tepat di bawah field kata sandi, kita juga menugaskan kelas gaya yang sesuai ke label.

5. Mengaktifkan Tombol Submit

Akhir dari fungsinya adalah mengaktifkan tombol submit hanya jika kita memiliki kata sandi yang kuat.

6. Memicu pada Keyup

Terakhir, kita butuh cara untuk memicu kapan harus menjalankan pemeriksa meter kekuatan kata sandi kita. Kami melakukan ini dengan mengikat handler ke kejadian keyup ke field kata sandi.

Kita sudah selesai!

Mengubah Label Kekuatan

Label untuk meter kekuatan dimuat oleh WordPress di bawah objek pwsL10n.

Untuk mengubah dan mengganti label ini, Anda harus melokalisasikan skrip setelah wp_enqueue_script di functions.php:

Anda dapat membaca lebih lanjut tentang cara mengirimkan string lokalisasi ke JavaScript di artikel: Cara Mengirimkan Data dan String PHP ke JavaScript

Kesimpulan

Pada artikel ini, kita belajar bagaimana menggunakan skrip kekuatan kata sandi yang disertakan dengan WordPress. Ini dapat digunakan dalam formulir pendaftaran kustom Anda dan halaman profil front-end untuk anggota situs Anda.

Semoga Anda menikmati artikel ini. Saya sangat menghargai umpan balik, komentar dan saran apapun.

Beritahu saya jika Anda telah menemukan cara yang keren untuk menggunakan meter kekuatan kata sandi. Bagikan pemikiran Anda di bawah ini!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.