S. Widodo
Kekuatan password adalah ukuran efektivitas password dalam melawan menebak dan serangan brute-force. Dalam bentuk biasa, ia memperkirakan berapa banyak cobaan penyerang yang tidak memiliki akses langsung ke password akan membutuhkan, rata-rata, menebak dengan benar. Kekuatan password adalah fungsi dari panjang, kompleksitas, dan ketidakpastian. [wikipedia]
Menggunakan password yang kuat menurunkan risiko keseluruhan dari pelanggaran keamanan, tetapi password yang kuat tidak menggantikan kebutuhan untuk kontrol keamanan yang efektif lainnya. Efektivitas password dari kekuatan yang diberikan sangat ditentukan oleh desain dan implementasi perangkat lunak sistem otentikasi, terutama seberapa sering menebak password dapat diuji oleh seorang penyerang dan bagaimana aman informasi di password pengguna disimpan dan ditransmisikan. Risiko juga ditimbulkan oleh beberapa cara melanggar keamanan komputer yang tidak berhubungan dengan kekuatan password. Cara tersebut termasuk penyadapan, phishing dll [wikipedia]
Penjelasan distas saya dapatkan wari wikipedia nah untuk itu kami akan berbagi pengetahuan lagi tentang pembuatan Password Strength Meter dengan menggunakan jquery. Untuk itu klangsung aja kita praktekan
1. Sebelum ngoding silahkan siapkan cemilan dan coffe
2. Buka editor kalian masing2
3. kita buat tylenya terlebih dahulu dengan memanfaatkan CSS untuk scriptnya ada dibawah ini.
<style>
body{ background:#0099FF; margin:0px; padding:0px;}
h3 {font-family:Arial, Helvetica, sans-serif; font-size:20px; text-align:center; color:#fff;}
.content {margin:auto; width:400px; border: solid 3px #9A59B5; background:#9A59B5; margin-top:5%;
-webkit-box-shadow: 1px 1px 9px 0px rgba(42, 50, 50, 0.19);
-moz-box-shadow: 1px 1px 9px 0px rgba(42, 50, 50, 0.19);
box-shadow: 1px 1px 9px 0px rgba(42, 50, 50, 0.19);}
.content {color:#333; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:20px;}
.content input {width:96%; padding:5px; color:#ffffff; background:#8D44AD; font-family:Arial, Helvetica, sans-serif;
border:solid 1px #8D44AD; margin-bottom:10px;}
.content input:hover{ border:solid 1px #cccccc;}
.button {background:#0000FF; color:#ffffff; padding:10px 20px 10px 20px; border:0px;border-radius:5px;}
.content label {color:#ffffff;}
hr {border-top:solid 1px #eee; margin-top:20px; margin-bottom:10px;}
#passwordDescription { color:#fff;}
#passwordStrength{height:10px;display:block;float:left;}
.strength0{width:250px;background:#fff;}
.strength1{width:50px;background:#ff0000;}
.strength2{width:100px; background:#ff5f5f;}
.strength3{width:150px;background:#56e500;}
.strength4{background:#4dcd00;width:200px;}
.strength5{background:#399800;width:250px;}
</style>
4. Sekarang tinggal panggil dengan HTML
<div class="content"> <h3>Password strength metter</h3> <label>Surname</label><input type="text" name="surname" id="surname"/> <label>Password</label><input type="password" name="pass" id="pass" onKeyUp="passwordStrength(this.value)"/> <div id="passwordDescription">Kata Sandi Belum ada</div> <div id="passwordStrength" class="strength0"></div> <hr> <button class="button" name="submit" id="submit">Registrasi</button> </div>
5. Simplekan Layout Sudah jadi sekarang tinggan sisipkan Script Jquerynya simpan diatas </head>
<script>
function passwordStrength(password){
var desc = new Array();
desc[0] = "Sangat Lemah";
desc[1] = "Lemah";
desc[2] = "Lebih Baik";
desc[3] = "Medium";
desc[4] = "Kuat";
desc[5] = "Terkuat";
var score = 0;
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
if (password.match(/\d+/)) score++;
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
6. Selesai Gan.
Selamat mencoba jangan pernah menyerah... :)
Komentar