WordPress использует довольно изящный сценарий надежности пароля, который используется для отображения того, являются ли пароли, которые вы ввели в админке WordPress: не такими, очень слабыми, слабыми, средними или сильными. В настоящее время этот скрипт используется только при создании новых пользователей и при смене пароля у администратора.
В этой статье я расскажу вам, как использовать измеритель надежности пароля WordPress в ваших собственных формах.
Скрипт надежности пароля
На момент написания этой статьи скрипт измерителя прочности недокументирован, поэтому для его использования требуется немного углубиться в ядро WordPress. Фактический скрипт находится внутри WordPress по адресу wp-admin/js/password-strength-meter.js . Вы можете проверить это, чтобы узнать больше о том, как работает скрипт.
Первое, что нам нужно сделать, это включить этот скрипт, поставив его в очередь в нашем functions.php :
|
1
|
wp_enqueue_script( ‘password-strength-meter’ );
|
Что в сценарии?
Один сценарий не делает все для нас. Это просто дает нам эти две функции JavaScript:
-
wp.passwordStrength.meter( password1, blacklist, password2 ).Это основная функция, которую мы будем использовать. Он анализирует две заданные строки, затем выдает силу этих двух чисел от 1 до 5, 1 — самая слабая, а 5 — самая сильная. Он также принимает массив слов из черного списка, которые будут рассматриваться во время вычисления как слабые слова. -
wp.passwordStrength.userInputBlacklist().Эта функция создает массив слов, которые следует рассматривать как слабые слова в паролях. Эта функция компилирует строки, найденные в заголовке, слогане и URL вашего сайта. Он также проверяет наличие определенных полей ввода на текущей странице, а затем добавляет их в список.
Мы уже можем измерить надежность паролей только этими функциями выше. Тем не менее, это еще не все. Скрипт не дает нам результатов, которые мы можем отобразить. Для этого нам нужно создать собственную функцию.
Наша форма для измерения силы
Давайте возьмем этот <form> в качестве отправной точки в реализации функции измерителя прочности:
|
1
2
3
4
5
6
|
<form>
<input type=»password» name=»password» />
<input type=»password» name=»password_retyped» />
<span id=»password-strength»>
<input type=»submit» disabled=»disabled» value=»Submit» />
</form>
|
Мы будем использовать names полей и ids сверху в функции, которую мы создадим.
Вот цели, которых мы хотим достичь, когда закончим:
- Когда что-то набирается в наших полях пароля, мы проверяем надежность пароля,
- Затем мы отображаем результаты надежности под полями пароля, аналогично тому, как это делает WordPress,
- Наконец, мы включаем кнопку отправки, если пароль считается надежным.
Наша функция измерителя силы
Позвольте мне сначала показать вам готовую функцию jQuery, которую мы будем использовать. Я подробно объясню каждую часть позже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
function checkPasswordStrength( $pass1,
$pass2,
$strengthResult,
$submitButton,
blacklistArray ) {
var pass1 = $pass1.val();
var pass2 = $pass2.val();
// Reset the form & meter
$submitButton.attr( ‘disabled’, ‘disabled’ );
$strengthResult.removeClass( ‘short bad good strong’ );
// Extend our blacklist array with those from the inputs & site data
blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() )
// Get the password strength
var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
// Add the strength meter results
switch ( strength ) {
case 2:
$strengthResult.addClass( ‘bad’ ).html( pwsL10n.bad );
break;
case 3:
$strengthResult.addClass( ‘good’ ).html( pwsL10n.good );
break;
case 4:
$strengthResult.addClass( ‘strong’ ).html( pwsL10n.strong );
break;
case 5:
$strengthResult.addClass( ‘short’ ).html( pwsL10n.mismatch );
break;
default:
$strengthResult.addClass( ‘short’ ).html( pwsL10n.short );
}
// The meter function returns a result even if pass2 is empty,
// enable only the submit button if the password is strong and
// both passwords are filled up
if ( 4 === strength && » !== pass2.trim() ) {
$submitButton.removeAttr( ‘disabled’ );
}
return strength;
}
jQuery( document ).ready( function( $ ) {
// Binding to trigger checkPasswordStrength
$( ‘body’ ).on( ‘keyup’, ‘input[name=password1], input[name=password2]’,
function( event ) {
checkPasswordStrength(
$(‘input[name=password]’), // First password field
$(‘input[name=password_retyped]’), // Second password field
$(‘#password-strength’), // Strength meter
$(‘input[type=submit]’), // Submit button
[‘black’, ‘listed’, ‘word’] // Blacklisted words
);
}
);
});
|
1. Аргументы и сброс формы
Я сделал так, чтобы функция принимала все объекты, которые мы будем изменять или нуждаемся в информации. Я поставил перед всеми объектами jQuery префикс $ чтобы их было легче отличить от обычных объектов JavaScript.
|
1
2
3
4
5
6
|
var pass1 = $pass1.val();
var pass2 = $pass2.val();
// Reset the form & meter
$submitButton.attr( ‘disabled’, ‘disabled’ );
$strengthResult.removeClass( ‘short bad good strong’ );
|
Эти первые несколько строк просты и понятны, мы получаем пароли, а затем сбрасываем нашу форму. Мы делаем форму всегда отключенной в начале, чтобы ее можно было включить позже, после того, как мы получим хороший счет силы.
Мы также собираемся добавить стили к нашему измерителю прочности, дав ему имена классов в зависимости от оценки пароля позже, для начала функции мы собираемся очистить стиль измерителя.
2. Массив черного списка
|
1
2
|
// Extend our blacklist array with those from the inputs & site data
blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() );
|
Слова в черном списке сценария измерителя прочности обычно должны быть в порядке. Но только если вы хотите добавить больше, наша функция может принимать дополнительные слова. Оба они объединены здесь для ввода в функцию meter .
3. Вызов функции meter
|
1
2
|
// Get the password strength
var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
|
Теперь мы вызываем функцию meter чтобы получить показатель надежности пароля. Далее мы решим, что делать с результатом.
4. Отображение результатов измерений
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// Add the strength meter results
switch ( strength ) {
case 2:
$strengthResult.addClass( ‘bad’ ).html( pwsL10n.bad );
break;
case 3:
$strengthResult.addClass( ‘good’ ).html( pwsL10n.good );
break;
case 4:
$strengthResult.addClass( ‘strong’ ).html( pwsL10n.strong );
break;
case 5:
$strengthResult.addClass( ‘short’ ).html( pwsL10n.mismatch );
break;
default:
$strengthResult.addClass( ‘short’ ).html( pwsL10n.short );
}
|
Теперь, когда у нас есть показатель силы, мы показываем его. WordPress предоставляет нам объект JavaScript pwsL10n который содержит метки для каждого показателя силы. Мы отображаем метку внутри <span> чуть ниже полей пароля, мы также назначаем соответствующий класс стиля для метки.
5. Включение кнопки «Отправить»
|
1
2
3
4
5
6
|
// The meter function returns a result even if pass2 is empty,
// enable only the submit button if the password is strong and
// both passwords are filled up
if ( 4 === strength && » !== pass2.trim() ) {
$submitButton.removeAttr( ‘disabled’ );
}
|
Конец функции предназначен для включения нашей кнопки отправки, только если у нас есть надежный пароль.
6. Запуск по Keyup
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
jQuery( document ).ready( function( $ ) {
$( ‘body’ ).on( ‘keyup’, ‘input[name=password1], input[name=password2]’,
function( event ) {
checkPasswordStrength(
$( ‘input[name=password]’ ), // First password field
$( ‘input[name=password_retyped]’ ), // Second password field
$( ‘#password-strength’ ), // Strength meter
$( ‘input[type=submit]’ ), // Submit button
[‘black’, ‘listed’, ‘word’] // Blacklisted words
);
}
);
});
|
Наконец, нам нужен способ запуска, когда нужно запускать нашу программу проверки надежности пароля. Мы делаем это, привязывая обработчик к событиям keyup к полям пароля.
Были сделаны!
Изменение силы меток
Метки для измерителя прочности загружаются WordPress под объектом pwsL10n .
Чтобы изменить и переопределить эти метки, вам нужно будет локализовать скрипт после нашего wp_enqueue_script в functions.php :
|
1
2
3
4
5
6
7
8
|
wp_localize_script( ‘password-strength-meter’, ‘pwsL10n’, array(
’empty’ => __( ‘Strength indicator’ ),
‘short’ => __( ‘Very weak’ ),
‘bad’ => __( ‘Weak’ ),
‘good’ => _x( ‘Medium’, ‘password strength’ ),
‘strong’ => __( ‘Strong’ ),
‘mismatch’ => __( ‘Mismatch’ )
) );
|
Вывод
В этой статье мы узнали, как использовать сценарий надежности пароля, который входит в состав WordPress. Это может быть использовано в ваших пользовательских регистрационных формах и страницах профиля пользователя для участников вашего сайта.
Я надеюсь, вам понравилась эта статья. Я высоко ценю любые отзывы, комментарии и предложения.
Дайте мне знать, если вы нашли классный способ использовать измеритель надежности пароля. Поделитесь своими мыслями ниже!