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

В даний час цей скрипт використовується тільки при створенні нових користувачів і при зміні пароля в панелі адміністрування.

У цій статті я навчу вас використовувати визначник надійності пароля WordPress у ваших власних формах.

Скрипт надійності пароля

Скрипт визначника надійності на момент написання цієї статті не описаний в офіційній документації, тому, щоб використовувати його потрібно трохи покопатися в ядрі WordPress.

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

wp_enqueue_script( ‘password-strength-meter’ );

З чого складається скрипт

Сам скрипт не виконує всю роботу. У ньому просто укладені дві функції JavaScript:

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

    Це одна з основних функцій, які ми будемо використовувати. Вона аналізує дві пропоновані рядка, а потім видає значення надійності цих двох рядків в діапазоні від 1 до 5. 1 — це самий ненадійний пароль, 5 — самий надійний.

    Вона також розглядає масив слів, занесені в чорний список, які в ході аналізу розглядаються, як ненадійного пароля;

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

    Ця функція обробляє рядка, знайдені в назві, описі, URL-адресу вашого сайту. Вона також перевіряє деякі поля вводу поточної сторінки, а потім додає їх в чорний список.

Щоб оцінити надійність паролів досить цих двох функцій. Тим не менш, це ще не все. Скрипт не виводить нам результати візуально. Щоб зробити це, ми повинні створити функцію самостійно.

Наша власна форма визначника надійності

Давайте візьмемо ось цей блок в якості відправної точки для реалізації нашої функції визначника надійності:

У створюваної функції ми будемо використовувати поля names і ids з наведеної вище форми.

Ось чого ми хочемо досягти:

  • Коли хтось вводить пароль в формі введення, ми перевіряємо цей пароль на надійність;
  • Потім ми хочемо вивести результати аналізу надійності пароля поля нижче для введення, подібно до того, як це робить в 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’] // Слова з чорного списку
);
}
);
});

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, який містить мітки для кожної оцінки надійності.

Ми відображаємо значення всередині блоку відразу під формою введення пароля. Також ми присвоюємо цій мітці відповідний клас стилю.

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» був підготовлений дружною командою проекту Сайтостроение від А до Я.