Создание индикатора сложности пароля на PHP
Каждый владелец сайта хочет обезопасить своих посетителей и пользователей от взлома и подбора пароля. Конечно в большинстве случаев взлома аккаунтов виноват сам пользователь, со своим простым паролем «123456» «qwerty» и даже ваша дата рожденья например 100791 не является надежной.
Ещё во времена массового брута (подбор пароля) ICQ я тоже не прошел мимо и увлекся немного этим топорным методом “взлома”. И хоть тогда у меня не получилось подобрать и одного пароля, но кое-что я для себя почерпнул. Я скачал достаточно баз, которые содержали самые простые пароли (и их используют более половины пользователей в сети ) и там были и даты рождения и имена в разных формах и т.д.
Это был ценный опыт с которого я понял одну истину, использовать слабые пароли = быть кроликом который находиться у охотника под прицелом. Так давайте создадим индиктор сложности пароля, который будет работать без перезагрузки страницы. Кстаи кто проходил html обучение то сможет очень красиво оформить визаульный индекатор.
1. Создадим файл form.php с таким содержанием:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/jаvascript">
function toggle_pass(passid) {
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
handle = document.getElementById(passid);
var url = 'ajax.php?';
if(handle.value.length > 0) {
var fullurl = url + 'do=check_password_strength&pass=' + encodeURIComponent(handle.value);
http.open("GET", fullurl, true);
http.send(null);
http.onreadystatechange = statechange_password;
}else{
document.getElementById('password_strength').innerHTML = '';
}
}
function statechange_password() {
if (http.readyState == 4) {
var xmlObj = http.responseXML;
var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
document.getElementById('password_strength').innerHTML = html;
}
}
</script>
<style type="text/css">
input {
border: 1px solid #000000;
padding: 5px;
}
#password_strength {
width: 250px;
background: #cccccc;
}
#password_bar {
font-size: 11px;
background: #7FFF00;
border: 1px solid #cccccc;
padding: 5px;
}
</style>
</head>
<body>
<input id="pass" type="password" name="password" onchange="toggle_pass('pass')" /><br /><br />
<strong>Сложность пароля</strong>:<br />
<div id="password_strength"> </div>
</body>
</html>
2. Создаем файл ajax.php, который будет проверять пароль на сложность и показывать результат на странице без перезагрузки страницы:
<?php
$do = $_GET['do'];
switch($do) {
case 'check_password_strength':
$password = $_GET['pass'];
$strength = 0;
// буквы (маленькие)
if(preg_match("/([a-z]+)/", $password)) {
$strength++;
}
// буквы (большие)
if(preg_match("/([A-Z]+)/", $password)) {
$strength++;
}
// числа
if(preg_match("/([0-9]+)/", $password)) {
$strength++;
}
// символы
if(preg_match("/(W+)/", $password)) {
$strength++;
}
header('Content-Type: text/xml');
header('Pragma: no-cache');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<result><![CDATA[';
switch($strength) {
case 1:
echo '<div style="width: 25%" id="password_bar">Очень легкий</div>';
break;
case 2:
echo '<div style="width: 50%" id="password_bar">Легкий</div>';
break;
case 3:
echo '<div style="width: 75%" id="password_bar">Сложный</div>';
break;
case 4:
echo '<div style="width: 100%" id="password_bar">Очень сложный</div>';
break;
}
echo ']]></result>';
break;
default:
echo 'Error, invalid action';
break;
}
?>
В итоге у вас получится форма как на картинке, для оформления соответственно можно использовать свои стили
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.