بررسی قدرت رمز عبور با جی کوئری
در این آموزش قصد داریم نحوه بررسی قدرت رمز عبور با جی کوئری را نشان بدیم . در ادامه با پروژه های برنامه نویسی php همراه باشید …
اما معیارهای یک رمز عبور قوی چی میتونه باشه ؟
1 : میتونه محدودیت تعداد کاراکتر داشته باشه ( یعنی حداقل 7،8 کاراکتر باشه )
2 : میتونه ترکیبی از حروف بزرگ ، کوچک و اعداد باشه ( یعنی رمز ما باید ترکیب این اعداد باشه مثلا Yu7u1Jio )
3 : میتونه ترکیبی از کاراکترهای ویژه و خاص باشه ( مثلا 8*jkk09&^58^8# )
مسلما امنیت و قدرت رمز عبوری بهتر است که موارد بالا رو داشته باشه .
اصلا چرا رمز باید قوی باشه ؟
رمز عبور ضعیف خیلی سریع توسط فرد ، کامپیوتر و هر سیستمی که برای این کار طراحی بشود قابل حدس زدن است ، که در اینصورت امنیت اطلاعات اکانت ما در خطر است .
برای بررسی رمز عبور مراحل 1 تا 2 را با هم انجام میدیم :
1 : در مرحله اول یک فرم html به نام index.html میسازیم و عناصر داخل فرم را مقدار دهی میکنیم :
در این فرم یک سری فایل css و js فراخوانی شده که همشون تو فایل دانلود هستند
<!DOCTYPE html>
<html lang="en">
<head>
<title>آموزش چک کردن قدرت گذرواژه</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-l-85 p-r-85 p-t-55 p-b-55">
<form class="login100-form validate-form flex-sb flex-w">
<span class="login100-form-title p-b-32">
<p style="font-size: 19px;margin-bottom: 10px;color: #17a2b8">پروژه های برنامه نویسی پی اچ پی</p>
<p style="font-size: 13px;color: #17a2b8">php-programming.ir</p>
</span>
<span class="txt1 p-b-11">
گذرواژه :
</span>
<div class="wrap-input100 validate-input m-b-12" data-validate="Password is required">
<span class="btn-show-pass">
<i class="fa fa-eye"></i>
</span>
<input class="input100" type="password" id="password" name="pass">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-48">
<div class="contact100-form-checkbox">
<p id="PassCheck"> </p>
</div>
</div>
<p>آموزش چک کردن قدرت گذرواژه</p>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/checkPassword.js"></script>
</body>
</html>
2: در مرحله 2 یک فایل جاوا اسکریپتی به نام checkPassword.js بسازید و کدهای زیر را در اون کپی کنید
$(document).ready(function () {
$("#password").keyup(function (e) {
$this = $(this);
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<,(,),%])/;
if ($this.val().length < 8) {
$('#PassCheck').removeClass();
$('#password').addClass('weak-password');
$('#PassCheck').html("خیلی ضعیف (حداقل 6 کاراکتر وارد کنید )");
} else {
if ($this.val().match(number) && $this.val().match(alphabets) && $this.val().match(special_characters)) {
$('#PassCheck').removeClass();
$('#password').addClass('strong-password');
$('#PassCheck').html("آفرین ، این پسورد امنیتش بیشتره");
} else {
$('#PassCheck').removeClass();
$('#password').addClass('medium-password');
$('#PassCheck').html("متوسط (برای امنیت بیشتر از کاراکترهای خاص و اعداد هم استفاده کنید مانند &،*،#،5،1 و ...)");
}
}
})
})
این تابع بر اساس رویداد keyup ، فیلد رمز عبور فراخوانی و اجرا میشود . و مقدار فیلد رمز عبور را ابتدا از لحاظ تعداد کاراکتر بررسی میکنه که کاربر حداقل 8 کارکتر وارد کرده باشد و در مرحله بعد سختی رمز عبور را از لحاظ حروف بزرگ ، کوچک و اعداد بررسی میکنه و در مرحله آخر رمز عبور را از لحاظ کاراکترهای ویژه بررسی میکنه و در هر مرحله پیغام مناسبی رو به کاربر نمایش میده .
نمایش و مخفی سازی رمز عبور
برای این کار یک آیکون کنار فیلد رمز عبور قرار میدیم و با رویداد کلیک آیکون نوع فیلد را تغییر به رمز عبور و متن تغییر میدیم .
var showPass = 0;
$('.btn-show-pass').on('click', function(){
if(showPass == 0) {
$(this).next('input').attr('type','text');
$(this).find('i').removeClass('fa-eye');
$(this).find('i').addClass('fa-eye-slash');
showPass = 1;
}
else {
$(this).next('input').attr('type','password');
$(this).find('i').removeClass('fa-eye-slash');
$(this).find('i').addClass('fa-eye');
showPass = 0;
}
});
این تابع بر اساس رویداد کلیک ، آیکون کنار فیلد رمز عبور فراخوانی و اجرا میشود . و نوع فیلد رمز عبور را از مخفی بودن به تکست قابل نمایش و بر عکس تغییر خواهد داد .
خوشحال میشیم هر سوالی داشته باشید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما خواهیم بود .
موفق و پیروز باشید.
داش عالی بود دمت گرم