Membangun kekuatan sederhana Password Checker

() translation by (you can also view the original English article)

Memberikan umpan balik instan adalah dalam hal sekarang. Mengapa membatasi diri Anda sendiri untuk memeriksa username dan alamat email? Mengapa tidak memperpanjang ini untuk memberikan umpan balik visual cepat tentang kekuatan sandi pengguna memiliki masukan? Hari ini, kita akan melihat bagaimana membuat kekuatan sederhana password checker yang menggunakan jQuery Perpustakaan, ekspresi reguler dan algoritma yang sederhana.

Sebuah kata dari penulis

Seperti kebanyakan ahli keamanan akan memberitahu Anda, pengguna selalu adalah link yang paling lemah. Yang paling aman dari sistem rentan ketika seorang pengguna memilih password yang sangat keliru. Dengan memperhatikan hal tersebut, tren terbaru tampaknya adalah memberikan umpan balik cepat kepada pengguna mengenai kekuatan kata sandi sehingga pengguna dapat memperpanjang atau memodifikasi kata sandi untuk membuatnya lebih aman.

Hari ini, kita akan menggunakan perpustakaan jQuery, sekelompok regular expressions dan algoritma yang sangat sederhana untuk membuat pemeriksa kekuatan kata sandi dasar. Tertarik? Mari kita mulai sekarang juga! Berikut ini adalah demo dari apa yang coba kita bangun hari ini:

Tujuan Desain

Tujuan kami desain untuk fungsi spesifik ini relatif kecil.

Memberikan umpan balik visual kepada pengguna mengenai kekuatan dari password mereka.
Umpan balik telah menjadi seketika. Ini berarti tidak mengklik tombol untuk menguji kekuatan.
Acara memicu dapat menjadi salah satu peristiwa papan kunci. Aku telah memilih keyup karena ini adalah yang paling sesuai untuk kebutuhan tertentu.
Untuk umpan balik visual, memodifikasi teks saja, sementara berguna, sangat kurang. Aku telah memilih untuk mengubah warna latar belakang serta untuk menarik perhatian pengguna ini.
Memberikan saran-saran tambahan yang diukur sehingga pengguna tahu di mana Departemen password tidak memiliki kekuatan dan bagaimana hal itu dapat ditingkatkan.

Sekarang bahwa kita telah cukup tahu kebutuhan kita, kita bisa melanjutkan ke tahap berikutnya.

Rencana Aksi

Kita sekarang akan memutuskan urutan langkah-langkah individu yang perlu dilakukan.

Menghubungkan event handler untuk acara keyup kotak input.
Biarkan event handler Periksa masukan tetapi delegasi segala sesuatu lain untuk metode penolong individu.
Metode penolong harus mengurus parsing input dan menganalisis itu, komputasi kompleksitas dan mencetak hasil.
Pastikan event handlers kebakaran dari metode pembantu hanya jika panjang input lebih besar dari minimum diharapkan untuk tidak membuang-buang siklus CPU pada entri yang tidak valid.
Kembali kontrol untuk event handler dalam kasus apa pun perlu dilakukan.

Algoritma

Dalam kepentingan menjaga menulis ini ringkas dan didekati, aku telah memutuskan untuk pergi dengan algoritma yang sangat dasar. Algoritma menganalisa string, memberikan bonus untuk panjang ekstra, kehadiran angka, simbol, dan huruf huruf dan hukuman untuk huruf atau angka hanya input. Kami tidak akan melihat pencocokan pola umum atau memeriksa input terhadap Kamus karena ini adalah di luar lingkup artikel. Jika bunga puncak, saya dapat melakukan sebuah artikel tentang ini di masa depan.

Pertama kita periksa panjang string masukan. Jika itu lebih besar daripada panjang minimum, memberikan nilai dasar 50. Lain membuatnya 0. Selanjutnya iterate melalui setiap karakter string dan memeriksa apakah itu simbol, angka atau huruf huruf. Jika demikian, membuat catatan itu.

Kemudian periksa berapa banyak tambahan karakter string memiliki, minimum direkomendasikan dan memberikan bonus untuk setiap karakter. Juga memberikan bonus jika string berisi kombinasi huruf huruf, angka dan simbol atau semua tiga. Memberikan bonus untuk setiap 's kehadiran terlalu.

Periksa jika string hanya berisi huruf atau angka dan jika demikian, menghukum.

Menjumlahkan semua angka dan memutuskan kekuatan password sesuai.

Itu adalah panjang dan pendek dari algoritma. Itu tidak akan sangat sopan tapi itu menangkap banyak password yang buruk. Anda akan mengerti hal ini lebih baik setelah kita lihat dalam kode.

Inti Markup

HTML markup demo halaman terlihat seperti:

<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Simple Password Strength Checker - by Siddharth for NetTuts</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mocha.js"></script>
</head>
<body>

<div id="container">

<h1>Create a simple password strength checker</h1>

<h2 class="bolded">by Siddharth for the lovely folks at Net Tuts</h2>

<p>Type in your password to get visual feedback regarding the strength of your password.</p>
<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> 

<div class="block">
<input id="inputPassword"/>
<div id="complexity" class="default">Enter a random value</div>
</div>

<div class="block">
<div id="results" class="default">Breakdown of points</div>
<div id="details"></div>
</div>

</div>
</body>
</html>

Mengabaikan semua markup biasa. Perhatikan elemen input dengan ID inputPassword, div elemen dengan ID kompleksitas yang menunjukkan kompleksitas password dan div elemen dengan ID dari rincian yang menunjukkan rincian poin.

Kami juga menyertakan jQuery Perpustakaan dan file script kita sendiri. Poin ekstra jika Anda menghargai nama file skrip kami.

Penataan CSS

body{
  font-family: "Lucida Grande", "Verdana", sans-serif;
}

h1{
	font-size: 30px;
	padding: 0;
	margin: 0;
}

h2{
	font-size: 18px;
	padding: 0;
	margin: 0 5px 30px 0;
}

input{
	width: 288px;
	height: 30px;
	margin: 50px 0 0 0;
	padding: 3px 5px;
	font-size: 22px;
	font-family: "Lucida Grande", "Verdana", sans-serif;
}

#container{
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
}

.block{
	width: 300px;
	margin: 0 auto 0 auto;
}

#complexity, #results{
	width: 300px;
	padding: 3px 0;
	height: 20px;
	color: #000;
	font-size: 14px;
	text-align: center;
}

#results{
	margin: 30px 0 20px 0;
}

.default{background-color: #CCC;}
.weak{background-color: #FF5353;}
.strong{background-color: #FAD054;}
.stronger{background-color: #93C9F4; }
.strongest{background-color: #B6FF6C;}

span.value{
	font-weight:bold;
	float: right;
}

Hanya boiler plate CSS untuk layout dan tipografi. Kita memiliki banyak kelas di bawah untuk setiap peringkat kekuatan individu. Kita akan menambahkannya ke elemen saat diperlukan.

Implementasi JavaScript

Sekarang bahwa kita memiliki kerangka kerja yang kuat dan styling beberapa dasar di tempat, kita dapat mulai coding fungsionalitas yang diperlukan. Apakah dicatat bahwa kita membuat ekstensif menggunakan jQuery. Merasa bebas untuk link ke Google's CDN jika diperlukan.

Variabel dan penanganan Event

Karena banyak nomor juggling akan pergi, kita perlu banyak variabel untuk memegang nilai-nilai. Karena adalah demo dan kode produksi tidak, saya telah memutuskan untuk mendeklarasikan variabel sebagai global dan mengaksesnya melalui metode penolong yang menyatakan mereka secara internal dan kemudian lewat ke fungsi.

	var strPassword;
	var charPassword;
	var complexity = $("#complexity");
	var minPasswordLength = 8;
	var baseScore = 0, score = 0;
	
	var num = {};
	num.Excess = 0;
	num.Upper = 0;
	num.Numbers = 0;
	num.Symbols = 0;

	var bonus = {};
	bonus.Excess = 3;
	bonus.Upper = 4;
	bonus.Numbers = 5;
	bonus.Symbols = 5;
	bonus.Combo = 0; 
	bonus.FlatLower = 0;
	bonus.FlatNumber = 0;

Nama-nama variabel adalah TARIF standar cantik tapi aku akan memberikan ikhtisar pula. strPassword memegang kotak masukan nilai, charPassword adalah sebuah array yang memegang setiap karakter string, kompleksitas memegang referensi elemen div. Kita juga mendefinisikan panjang sandi minimal, Skor dan Skor dasar.

Kami membuat hash cepat untuk memegang jumlah karakter tambahan, karakter huruf besar, angka dan simbol. Kami melakukan hal yang sama untuk bonus. Num hash memegang jumlah karakter sementara bonus hash memegang pengganda bonus. Anda hanya dapat membuat individu variabel tapi saya pikir ini tampak bersih.

Jangan lupa untuk menghubungkan handler acara ke acara.

1	$("#inputPassword").bind("keyup", checkVal);

checkVal adalah event handler yang kita akan menciptakan dalam hanya sedikit.

Event Handler

function checkVal()
{
	if (charPassword.length >= minPasswordLength)
	{
		baseScore = 50;	
		analyzeString();	
		calcComplexity();		
	}
	else
	{
		baseScore = 0;
	}
	
	outputResult();
}

Kami pertama Periksa panjang string masukan. Jika itu lebih besar atau sama dengan minimum panjang tertentu, kita dapat melanjutkan. Kita menetapkan skor dasar menjadi 50 dan memanggil metode helper yang mengurusi analisis string dan menghitung kerumitannya.

Jika kurang dari panjang yang diharapkan, kita hanya menetapkan skor dasar ke 0.

Kita kemudian memanggil fungsi outputResult yang menangani pembuatan perhitungan komputasi. Kita akan melihat cara kerjanya nanti di bawah.

Menganalisis Input

function analyzeString ()
{	
	for (i=0; i<charPassword.length;i++)
	{
		if (charPassword[i].match(/[A-Z]/g)) {num.Upper++;}
		if (charPassword[i].match(/[0-9]/g)) {num.Numbers++;}
		if (charPassword[i].match(/(.*[!,@,#,$,%,^,&,*,?,_,~])/)) {num.Symbols++;} 
	}
	
	num.Excess = charPassword.length - minPasswordLength;
	
	if (num.Upper && num.Numbers && num.Symbols)
	{
		bonus.Combo = 25; 
	}

	else if ((num.Upper && num.Numbers) || (num.Upper && num.Symbols) || (num.Numbers && num.Symbols))
	{
		bonus.Combo = 15; 
	}
	
	if (strPassword.match(/^[\sa-z]+$/))
	{ 
		bonus.FlatLower = -15;
	}
	
	if (strPassword.match(/^[\s0-9]+$/))
	{ 
		bonus.FlatNumber = -35;
	}
}

Ini mungkin terlihat sedikit rumit tapi aku menjanjikan Anda, hanya karena ekspresi reguler. Mari kita pergi ke kode bagian demi bagian.

Pertama, kita perlu mengetahui komposisi string dalam pertanyaan. Seperti dalam, kita perlu untuk mengetahui apakah string berisi huruf huruf, angka simbol dan jika demikian, berapa banyak dari mereka hadir. Dengan pemikiran ini, kami iterate melalui array karakter dan memeriksa setiap karakter untuk melihat jenis. Metode match memungkinkan kita mencocokkan string dengan regular expression. Jika Anda baru dalam regular expression, saya sarankan Anda membaca artikel bagus Vasili di sini.

Selanjutnya, kita telah menentukan perbedaan antara panjang string masukan dan panjang minimum kata sandi yang ditentukan. Ini memberi kita kelebihan jumlah karakter untuk dimainkan.

Kami kemudian memeriksa apakah string memiliki huruf, angka dan simbol. Jika demikian, memberikan bonus. Kami juga memeriksa untuk melihat apakah itu memiliki kombinasi dari dua dari mereka dan memberikan bonus yang lebih kecil jika demikian.

Akhirnya, kami memeriksa untuk melihat apakah string datar: Apakah itu mengandung hanya huruf atau hanya angka. Kami periksa dengan ekspresi reguler dan jika demikian, menghukum password untuk praktek ini.

Menghitung kompleksitas

function calcComplexity()
{
	score = baseScore + (num.Excess*bonus.Excess) + (num.Upper*bonus.Upper) + (num.Numbers*bonus.Numbers) + 
(num.Symbols*bonus.Symbols) + bonus.Combo + bonus.FlatLower + bonus.FlatNumber;	
}

Hanya tambahan sederhana. Kami menambahkan angka dasar dengan produk jumlah karakter kelebihan dan it's pengganda. Sama untuk huruf huruf, angka dan simbol. Kami kemudian tambahkan bonus untuk kombinasi, jika ada, dan menambahkan hukuman jika string datar.

Memperbarui UI

Sekarang bahwa semua perhitungan adalah di belakang kami, kami dapat memperbarui UI untuk mencerminkan perubahan. Berikut adalah tiap negara.

function outputResult()
{
	if ($("#inputPassword").val()== "")
	{ 
		complexity.html("Enter a random value").addClass("default");
	}
	else if (charPassword.length < minPasswordLength)
	{
		complexity.html("At least " + minPasswordLength+ " characters please!").addClass("weak");
	}
	else if (score<50)
	{
		complexity.html("Weak!").addClass("weak");
	}
	else if (score>=50 && score<75)
	{
		complexity.html("Average!").addClass("strong");
	}
	else if (score>=75 && score<100)
	{
		complexity.html("Strong!").addClass("stronger");
	}
	else if (score>=100)
	{
		complexity.html("Secure!").addClass("strongest");
	}
}

Tidak ada yang mewah di sini, tapi kami akan pergi melalui itu baris demi baris.

Kami pertama-tama memeriksa untuk melihat apakah masukan kosong. Jika demikian, mengubah teks hasil dan menambahkan kelas standar untuk mengubah warna latar belakang itu kembali ke asli gray.

Jika kurang dari panjang minimum yang ditentukan, kita mengubah teks yang sesuai dan menambahkan kelas weak sehingga latar belakangnya berwarna merah. Kita melakukan hal yang sama jika total skor kurang dari 50 tetapi mengubah teks menjadi weak.

Ketika skor meningkat, kita mengubah teks yang sesuai dan menambahkan kelas yang diperlukan. Jangan ragu untuk mengubah skor dasar untuk setiap peringkat. Saya hanya memasukkan nilai-nilai tidak ilmiah untuk membuat demo.

Memperbarui Rincian yang Terperinci

Dengan hasil utama diperbarui, kita dapat melihat pada memperbarui statistiknya sekarang.

function outputResult()
{
	// Previous Code
    
    $("#details").html("Base Score :<span class=\"value\">" + baseScore  + "</span>"
				  + "<br />Length Bonus :<span class=\"value\">" + (num.Excess*bonus.Excess) + " ["+num.Excess+"x"+bonus.Excess+"]</span> " 
				  + "<br />Upper case bonus :<span class=\"value\">" + (num.Upper*bonus.Upper) + " ["+num.Upper+"x"+bonus.Upper+"]</span> "
				  + "<br />Number Bonus :<span class=\"value\"> " + (num.Numbers*bonus.Numbers) + " ["+num.Numbers+"x"+bonus.Numbers+"]</span>"
				  + "<br />Symbol Bonus :<span class=\"value\"> " + (num.Symbols*bonus.Symbols) + " ["+num.Symbols+"x"+bonus.Symbols+"]</span>"
				  + "<br />Combination Bonus :<span class=\"value\"> " + bonus.Combo + "</span>"
				  + "<br />Lower case only penalty :<span class=\"value\"> " + bonus.FlatLower + "</span>"
				  + "<br />Numbers only penalty :<span class=\"value\"> " + bonus.FlatNumber + "</span>"
				  + "<br />Total Score:<span class=\"value\"> " + score  + "</span>" 
}

Bagian ini tidak membingungkan seperti yang terlihat. Mari saya jelaskan.

Daripada hanya memperbarui nilai individual untuk hasil mendetail, saya terpaksa hanya memperbarui nilai HTML lengkap dari kontainer. Saya tahu itu akan menjadi lamban ketika sejumlah kotak-kotak ini bertambah tetapi mengakses setiap elemen secara individual dan kemudian memperbarui nilai itu untuk demo kecil tampaknya agak kontra-produktif. Jadi berlarilah dengan saya di sini.

Ini seperti menyuntikkan HTML biasa ke dalam sebuah elemen kecuali bahwa kita telah menempatkan beberapa variabel di dalamnya untuk memungkinkan detail diperbarui secara instan. Setiap nilai mendapat kelas value untuk membuatnya tebal. Kita juga menampilkan jumlah karakter khusus dan multipler sehingga pengguna dapat mengukur elemen mana yang mendapatkan lebih banyak bobot.

Beberapa Tweak

Pada titik waktu ini, ada 2 bug yang muncul.

Jika Anda mengetikkan kata sandi yang panjang dan kemudian menghapus kotak teks, warna latar belakang tidak berubah kembali.
Dalam skenario yang sama, rincian poin-poin tersebut tidak diperbarui sebagaimana mestinya.

Kita akan menangani mereka satu per satu.

Untuk bug pertama, akar penyebabnya adalah fakta bahwa kita tidak menghapus semua kelas lainnya. Ini tidak akan menjadi masalah jika kelas yang paling baru ditambahkan lebih diutamakan daripada yang lain. Sayangnya, tidak demikian. Berikut ini perbaikan cepat.

function outputResult()
{
	if ($("#inputPassword").val()== "")
	{ complexity.html("Enter a random value").removeClass("weak strong stronger strongest").addClass("default");}
	else if (charPassword.length < minPasswordLength)
	{complexity.html("At least " + minPasswordLength+ " characters please!").removeClass("strong stronger strongest").addClass("weak");}
	else if (score<50)
	{complexity.html("Weak!").removeClass("strong stronger strongest").addClass("weak");}
	else if (score>=50 && score<75)
	{complexity.html("Average!").removeClass("stronger strongest").addClass("strong");}
	else if (score>=75 && score<100)
	{complexity.html("Strong!").removeClass("strongest").addClass("stronger");}
	else if (score>=100)
	{complexity.html("Secure!").addClass("strongest");}

	// Details updating code
}

Anda mungkin bertanya mengapa kita tidak menghapus setiap kelas di sini. Jawabannya sederhana: kita mengambil keuntungan dari salah satu atribut utama CSS: cascading. Jika Anda perhatikan urutan Deklarasi masing-masing kelas dalam CSS file Anda akan melihat bahwa default terjadi pertama dan terkuat datang terakhir yang berarti jika elemen memiliki kelas terkuat itu akan menimpa modifikasi yang dilakukan oleh setiap kelas di atasnya. Jadi kita hanya harus menghapus kelas yang terjadi di bawah kelas yang relevan. Misalnya, agar suatu elemen menjadi strong, kita harus menghapus kelas stronger dan strongest.

Alasan bug kedua ada adalah karena fakta bahwa variabel-variabel individu tidak diatur ulang ketika peristiwa baru terjadi. Mereka terbawa ke event berikutnya juga. Untuk memperbaiki ini, kita membuat fungsi cepat yang menginisialisasi ulang semua variabel yang relevan dan menambahkan event handler checkVal sehingga dipanggil setiap kali teks kotak input diperbarui.

function init()
{
	strPassword= $("#inputPassword").val();
	charPassword = strPassword.split("");
		
	num.Excess = 0;
	num.Upper = 0;
	num.Numbers = 0;
	num.Symbols = 0;
	bonus.Combo = 0; 
	bonus.FlatLower = 0;
	bonus.FlatNumber = 0;
	baseScore = 0;
	score =0;
}

function checkVal()
{
	init();
    
	// Other code
}

Keterbatasan

Limitation with the current implementation

Keterbatasan dengan implementasi saat iniJika Anda telah bermain-main dengan demonya sedikit, Anda akan melihat bahwa Pa$$W0rd$ ternyata sebagai password yang aman padahal sebenarnya itu akan rusak segera. Ini karena kesederhanaan algoritma kita di sini. Kita tidak memeriksa penggantian karakter. Atau kata sandi atau pola umum dalam hal ini. Melakukan hal-hal seperti itu akan meningkatkan kesulitan dalam tutorial ini sekaligus mengurangi kemampuannya untuk didekati, yang keduanya tidak saya inginkan untuk penulisan khusus ini.

Hal ini dimaksudkan sebagai kekuatan dasar password checker. Jika Anda perlu untuk daging sapi itu, Anda mungkin bisa menambahkan beberapa ungkapan yang lebih teratur memeriksa pola dan pengulangan karakter dan kemudian tune hasil sesuai.

Mencari masukan terhadap Kamus adalah benar-benar keluar dari lingkup artikel ini dan akan memerlukan baik Kamus besar download ke sisi klien atau mengaitkan itu ke sistem sisi server untuk melakukan itu. Sekali lagi, aku benar-benar ingin menghindari mereka saat ini.

Kesimpulan

Dan begitulah caranya: cara menambahkan fungsionalitas yang ramah pengguna, kemampuan untuk membiarkan pengguna mengetahui kekuatan kata sandi yang baru saja dia masukkan, ke proyek Anda. Semoga Anda menemukan tutorial ini menarik dan ini berguna bagi Anda. Jangan ragu untuk menggunakan kembali kode ini di tempat lain dalam proyek Anda dan beri tahu di sini jika Anda mengalami kesulitan.

Ada Pertanyaan? Hal-hal yang bagus untuk dikatakan? Kritik? Tekan bagian komentar dan tinggalkan saya komentar. Selamat mengkode!

Ikuti kami di Twitter, atau berlangganan Nettuts + RSS Feed untuk tutorial pengembangan web terbaik di web.