Bina Pemeriksa Kekuatan Kata Laluan Mudah

Memberi maklum balas segera adalah dalam perkara sekarang. Mengapa mengehadkan diri anda untuk memeriksa nama pengguna dan alamat e -mel? Mengapa tidak memperluaskan ini untuk memberikan maklum balas visual yang cepat mengenai kekuatan kata laluan pengguna mempunyai input? Hari ini, kami akan melihat bagaimana untuk membuat pemeriksa kekuatan kata laluan yang mudah menggunakan ekspresi biasa dan algoritma mudah. Malah sistem yang paling selamat adalah terdedah apabila pengguna memilih kata laluan yang sangat tidak disarankan. Dengan itu, trend baru -baru ini seolah -olah memberikan maklum balas yang cepat kepada pengguna mengenai kekuatan kata laluan supaya pengguna dapat melanjutkan atau mengubah suai kata laluan untuk menjadikannya lebih selamat. Berminat? Mari bermula dengan segera! Berikut adalah demo dari apa yang kita cuba bina hari ini:

Ini bermakna tiada klik pada butang untuk menguji kekuatan.

Acara pencetus boleh menjadi mana -mana peristiwa keyboard. Saya telah memilih Keyup

peristiwa kotak input. supaya tidak membazirkan kitaran CPU pada penyertaan yang tidak sah. Algoritma menganalisis rentetan, memberikan bonus untuk panjang tambahan dan menggunakan nombor, simbol, dan huruf besar, dan penalti untuk input huruf atau nombor sahaja. Kami tidak akan melihat memeriksa input terhadap kamus kerana ini keluar dari skop artikel. Sekiranya ia lebih besar daripada panjang minimum, berikan skor asas 50. Jadikannya 0. Seterusnya, beralih melalui setiap watak rentetan dan periksa sama ada simbol, nombor, atau huruf besar. Jika ya, buat nota itu.

kemudian periksa berapa banyak aksara tambahan rentetan mempunyai minimum yang disyorkan, dan memberikan bonus untuk setiap watak. Juga berikan bonus jika rentetan mengandungi gabungan huruf besar, nombor, dan simbol, atau ketiga -tiga. Berikan bonus untuk kehadiran masing -masing. Ia tidak akan menjadi sangat kompleks, tetapi ia akan menangkap banyak kata laluan yang buruk. Anda akan memahami ini dengan lebih baik apabila kita melihatnya dalam kod.

markup teras

markup HTML halaman demo kelihatan seperti:

Mengabaikan semua markup biasa. Perhatikan elemen input dengan id elemen

div

dengan elemen div

dengan id div

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

untuk mesej

kelas akan mengandungi mesej tentang penalti, jadi kami telah membuatnya berani dan merah. Mulakan pengekodan fungsi yang diperlukan. Perhatikan bahawa kami menggunakan jQuery yang luas. Jangan ragu untuk menghubungkan ke CDN Google jika perlu. Oleh kerana ini adalah demo dan bukan kod pengeluaran, saya memutuskan untuk mengisytiharkan pembolehubah sebagai global dan mengaksesnya melalui kaedah penolong dan bukannya mengisytiharkan mereka secara dalaman dan kemudian lulus mereka ke fungsi. Yang pertama, yang dipanggil Input elemen dan NUM , memegang bilangan aksara tambahan, aksara huruf besar, nombor, dan simbol. Kami melakukan perkara yang sama untuk objek kedua, yang dipanggil Objek Num memegang bilangan aksara, manakala fungsi checkVal akan dipanggil apabila terdapat kata laluan Kami mula -mula mendapatkan kata laluan yang dimasukkan oleh pengguna dan kemudian melakukan beberapa permulaan yang berubah -ubah dalam fungsi OutputResult () , yang menjaga pengertian pengiraan yang dikira. Kami akan melihat bagaimana ia berfungsi kemudian.

Menganalisis input

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

sekarang akan menentukan kaedah ()

kaedah membolehkan kami memadankan rentetan terhadap ungkapan biasa. Jika anda baru untuk ungkapan biasa, saya cadangkan anda membaca artikel hebat Vasili mengenai ekspresi biasa yang mesti diketahui. Ini memberi kita lebih banyak watak untuk bermain -main dengan.

Kami kemudian periksa sama ada rentetan mempunyai huruf besar, nombor, dan simbol. Jika ya, berikan bonus. Kami juga menyemak sama ada ia mempunyai kombinasi dua daripada mereka dan memberikan bonus yang lebih kecil jika ya. Kami menyemak ini dengan ungkapan biasa dan, jika ya, menghukum kata laluan untuk amalan ini. Kami menambah skor asas kepada produk bilangan aksara yang berlebihan dan penggandanya. Kami melakukan perkara yang sama untuk huruf besar, nombor, dan simbol. Kami kemudian menambah bonus untuk kombinasi, jika hadir, dan menambah penalti jika rentetan itu rata. Berikut adalah setiap negeri. Fungsi utama yang dipanggil div

, kelas yang akan dikeluarkan, dan kelas akan ditambah. Fungsi pembantu yang dipanggil kelas lalai

untuk menukar warna latar belakangnya kembali ke hitam asalnya. Jangan ragu untuk menukar skor asas untuk setiap penarafan. Saya hanya meletakkan nilai -nilai yang tidak saintifik untuk mendapatkan demo. Biar saya jelaskan.

Daripada mengemas kini nilai individu untuk hasil terperinci, saya telah menggunakan hanya mengemas kini nilai HTML lengkap bekas. Saya tahu ia akan menjadi lembap apabila bilangan kotak ini menambah, tetapi mengakses setiap elemen secara individu dan kemudian mengemas kini nilainya untuk demo kecil seolah-olah agak tidak produktif. Oleh itu, jalankan dengan saya di sini. Setiap nilai mendapat fungsi init ()

tidak berguna hanya untuk tugasan nilai awal. Ia sebenarnya menjaga menetapkan semula nilai skor dan penalti selepas setiap fungsi analisis ()

, dan anda akan baik untuk pergi.

<div id="container">
<br><br>  <h1 id="A-simple-password-strength-checker">A simple password strength checker</h1>
<br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p>
<br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p>
<br><br>  <div class="block">
<br>    <input id="password"><br>    <div id="complexity" class="default">Enter a random value</div>
<br>  </div>
<br><br>  <div class="block">
<br>    <div id="results" class="default">Breakdown of points</div>
<br>    <div id="details"></div>
<br>    <p class="message"></p>
<br>  </div>
<br><br>
</div><br>

Mari lihat apa yang berlaku di sini. Kami mulakan dengan menukar kata laluan kami ke huruf kecil. Selepas itu, kami menukarnya menjadi saiz harta untuk mendapatkan bilangan watak yang unik. Jika bilangan aksara unik kurang daripada atau sama dengan 3, kami menetapkan nilai untuk fungsi analisis () untuk memeriksa corak berulang. Ini akan bergantung pada regex dan periksa sama ada urutan 3 atau lebih aksara alfanumerik diulangi dalam kata laluan. Watak.

Dalam imej di atas, anda dapat melihat bahawa kami telah berjaya menangani masalah mengulangi urutan watak. Walau bagaimanapun, saya telah memberikan contoh pembatasan lain dari pemeriksa kekuatan kata laluan. 

anda dapat melihat bahawa pa $$ w0rd $

muncul sebagai kata laluan yang selamat, sementara sebenarnya ia akan dipecahkan tidak lama lagi. Ini disebabkan oleh kesederhanaan algoritma kami di sini. Kami tidak memeriksa penggantian watak atau kata laluan atau corak biasa untuk perkara itu. Melakukan perkara-perkara sedemikian akan meningkatkan kesukaran tutorial ini sambil mengurangkan keterampilannya, yang kedua-duanya tidak mahu menulis ini. Sekali lagi, saya benar-benar mahu mengelakkan kedua-dua mereka kali ini. Mudah -mudahan anda dapati tutorial ini menarik, dan ini berguna kepada anda. Jangan ragu untuk menggunakan semula kod ini di tempat lain dalam projek anda! Monty adalah pemaju penuh stack yang juga suka menulis tutorial dan belajar tentang perpustakaan JavaScript baru.

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

Atas ialah kandungan terperinci Bina Pemeriksa Kekuatan Kata Laluan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!