Использование встроенного скрипта определителя надежности пароля в WordPress

WordPress использует довольно изящный сценарий проверки надежности пароля, который при создании пароля выводит вам информацию о его надежности: несовпадение повторного ввода пароля, очень ненадежный, ненадежный, средний или надежный.

В настоящее время этот скрипт используется только при создании новых пользователей и при изменении пароля в панели администрирования.

В этой статье я научу вас использовать определитель надежности пароля WordPress в ваших собственных формах.

Содержание

Скрипт надежности пароля

Скрипт определителя надежности на момент написания этой статьи не описан в официальной документации, поэтому, чтобы использовать его, нужно немного покопаться в ядре WordPress.

Фактически скрипт заключен внутри WordPress в файле wp-admin/js/password-strength-meter.js. Вы можете посмотреть файл, чтобы узнать больше о том, как работает сценарий:

wp_enqueue_script( 'password-strength-meter' );
Защитите панель администрирования WordPress с помощью .htaccess пароля

Из чего состоит скрипт

Сам скрипт не выполняет всю работу. В нем просто заключены две функции JavaScript:

  • wp.passwordStrength.meter( пароль1, черный список, пароль2 ).

    Это одна из основных функций, которые мы будем использовать. Она анализирует две предлагаемые строки, а затем выдает значение надежности этих двух строк в диапазоне от 1 до 5. 1 - это самый ненадежный пароль, 5 - самый надежный.

    Она также рассматривает массив слов, занесенных в черный список, которые в ходе анализа рассматриваются, как ненадежный пароль;

  • wp.passwordStrength.userInputBlacklist(). Эта функция создает массив слов, которые рассматриваются, как слабый пароль.

    Эта функция обрабатывает строки, найденные в названии, описании, URL-адресе вашего сайта. Она также проверяет некоторые поля ввода текущей страницы, а затем добавляет их в черный список.

Чтобы оценить надежность паролей достаточно этих двух функций. Тем не менее, это еще не все. Скрипт не выводит нам результаты визуально. Чтобы сделать это, мы должны создать функцию самостоятельно.

Наша собственная форма определителя надежности

Давайте возьмем вот этот блок <form> в качестве отправной точки для реализации нашей функции определителя надежности:

<form>
 <input type="password" name="password" />
 <input type="password" name="password_retyped" />
 <span id="password-strength"></span>
 <input type="submit" disabled="disabled" value="Submit" />
</form>

В создаваемой функции мы будем использовать поля names и ids из приводимой выше формы.

Вот чего мы хотим достичь:

  • Когда кто-то вводит пароль в форме ввода, мы проверяем этот пароль на надежность;
  • Затем мы хотим вывести результаты анализа надежности пароля ниже поля для его ввода, подобно тому, как это делает в WordPress;
  • Наконец, нам нужно разместить кнопку подтверждения пароля в том случае, если пароль считается надежным.
Использование SSL и HTTPS в WordPress

Наша функция определителя надежности

Позвольте мне сначала привести готовую функцию JQuery, которую мы будем использовать. Позже я подробно объясню каждую ее часть:

function checkPasswordStrength( $pass1,
                                $pass2,
                                $strengthResult,
                                $submitButton,
                                blacklistArray ) {
        var pass1 = $pass1.val();
    var pass2 = $pass2.val();
 
    // Сброс формы и определителя
    $submitButton.attr( 'disabled', 'disabled' );
        $strengthResult.removeClass( 'short bad good strong' );
 
    // Расширение массива черного списка  данными полей ввода и информацией о сайте
    blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() )
 
    // Определение надежности пароля
    var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
 
    // Добавление результатов анализа надежности
    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 );
 
    }
 
    // Функция определителя возвращает результат, даже если значение pass2 не заполнено,
    // однако кнопка подтверждения пароля будет активна только в том случае,
    // если пароль является надежным и оба поля заполнены
    if ( 4 === strength && '' !== pass2.trim() ) {
        $submitButton.removeAttr( 'disabled' );
    }
 
    return strength;
}
 
jQuery( document ).ready( function( $ ) {
    // Привязка к триггеру checkPasswordStrength
    $( 'body' ).on( 'keyup', 'input[name=password1], input[name=password2]',
        function( event ) {
            checkPasswordStrength(
                $('input[name=password]'),         // Поле ввода пароля
                $('input[name=password_retyped]'), // Поле повторного ввода пароля
                $('#password-strength'),           // Оценка надежности
                $('input[type=submit]'),           // Кнопка подтверждения пароля
                ['black', 'listed', 'word']        // Слова из черного списка
            );
        }
    );
});
Использование CloudFlare в WordPress

1. Аргументы и сброс формы

Я включил в функцию все объекты, которые мы будем изменять или от которых нам нужно получать информацию.

Я добавил префикс $ ко всем объектам JQuery, чтобы их было легче отличать от обычных объектов JavaScript:

var pass1 = $pass1.val();
var pass2 = $pass2.val();
 
// Сброс формы и определителя
$submitButton.attr( 'disabled', 'disabled' );
$strengthResult.removeClass( 'short bad good strong' );

В этих первых строках все просто и понятно, мы получаем пароли, а затем сбрасываем форму. Вначале мы всегда отключаем форму, чтобы включить ее позже, после того как будет получена удовлетворительная оценка надежности.

Мы также должны задать стиль определителя надежности, для этого мы позже задаем имена классов, в зависимости от оценки надежности. При запуске функции мы очищаем стили определителя.

2. Массив черного списка

// Расширение массива черного списка  данными полей ввода и информацией о сайте
blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() );

Со словами, занесенными в черный список определителя надежности, как правило, проблем не возникает.

Только в случае, когда вы хотите добавить новые слова, наша функция может принять дополнительные данные. Это отображается в функции meter.

3. Вызов функции meter

// Определение надежности пароля
var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );

Вызываем функцию meter, чтобы определить оценку надежности пароля. Что делать с результатом, определяется далее.

4. Вывод результатов анализа

// Добавление результатов анализа надежности
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. Активация кнопки подтверждения пароля

// Функция определителя возвращает результат, даже если значение pass2 не заполнено,
    // однако кнопка подтверждения пароля будет активна только в том случае,
    // если пароль является надежным и оба поля заполнены
    if ( 4 === strength && '' !== pass2.trim() ) {
        $submitButton.removeAttr( 'disabled' );
    }

В конце функции активируется кнопка «Подтвердить», только если пароль надежен.

6. Запуск после начала ввода пароля

jQuery( document ).ready( function( $ ) {
    $( 'body' ).on( 'keyup', 'input[name=password1], input[name=password2]',
        function( event ) {
            checkPasswordStrength(
$('input[name=password]'),         // Поле ввода пароля
                $('input[name=password_retyped]'), // Поле повторного ввода пароля
                $('#password-strength'),           // Оценка надежности
                $('input[type=submit]'),           // Кнопка подтверждения пароля
                ['black', 'listed', 'word']        // Слова из черного списка
            );
        }
    );
});

Наконец, нам нужен способ вызова, который будет запускать определитель надежности пароля. Это делается через привязку обработчика к событию keyup в поле ввода пароля.

Мы закончили!

Изменение меток надежности

Метки для определителя надежности пароля загружаются WordPress из объекта pwsL10n.

Чтобы изменить и переназначить эти метки, вам нужно локализовать скрипт, следующий после скрипта wp_enqueue_script в файле functions.php:

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.

Его можно применять в пользовательских формах регистрации и интерфейсах страниц профиля для подписчиков вашего сайта.
Я надеюсь, вам понравилась эта статья. Буду признателен за любые отзывы, комментарии и предложения.

Дайте мне знать, если вы нашли хороший способ использования определителя надежности пароля. Поделитесь своими мыслями в комментариях!

РедакцияПеревод статьи «Using the Included Password Strength Meter Script in WordPress»