WordPress використовується досить непогана система індикації надійності пароля. Варто тільки почати його вводити і відразу ж можна побачити ступінь його надійності: або він не збігається з введеним паролем у першому рядку, або є дуже слабким, середнім або надійним.
На сьогоднішній день така система індикації використовується тільки при реєстрації для нових користувачів або зміні старого пароля на новий.
У цій статті ми розглянемо, як використовувати цей вбудований WordPress скрипт для вставки форми індикації надійності пароля в довільному місці на сайті, щоб убезпечити себе від несанкціонованого доступу.
Скрипт індикації надійності пароля
На момент виходу цієї статті скрипт індикації для паролів WordPress не має офіційної документації, тому для його використання потрібно трохи покопатися в ядрі WordPress.
Поточний скрипт знаходиться у каталозі файлів WordPress за адресою:
wp-admin/js/password-strength-meter.js
І перше, що потрібно зробити для подальшого використання цього скрипту на своєму сайті – це включити його у functions.php :
wp_enqueue_script( 'password-strength-meter' );
Що всередині скрипту?
Сам по собі скрипт не дає нам багато можливостей, крім використання двох функцій JavaScript:
- wp.passwordStrength.meter( password1, blacklist, password2 ) - це головна функція, яку ми будемо використовувати. Вона аналізує заповнені дані у двох рядках під час введення пароля. Потім показує, наскільки «сильними» є паролі за шкалою від 1 до 5, де 1 – найслабший символ, 5 – найсильніший. Також вона видає так званий «чорний список» словосполучень, які є слабкими для створення пароля.
- wp.passwordStrength.userInputBlacklist() - Ця функція також створює ряд словосполучень, які будуть розглядатися як "слабкі" для пароля. Вона збирає інформацію із заголовка, підзаголовків та URL вашого сайту, перевіряє наявність деяких полів введення в поточну сторінку та виводить усі дані в окремому списку.
За допомогою цих двох функцій можна визначити ступінь надійності пароля. Але, на жаль, скрипт не дає нам результатів, які можемо відобразити під полем введеного пароля. Ми маємо зробити подібну функцію самостійно.
Форма індикації надійності пароля
Давайте візьмемо цю форму та спробуємо створити свій індикатор надійності пароля на її основі:
<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>
Ми будемо використовувати поля name і id в подальшому, а також буде потрібно:
- Перевірити, наскільки «сильний» пароль під час введення символів у кожне з полів.
- Вивести результати надійності під рядком пароля, як це робиться на WordPress.
- Активувати кнопку підтвердження пароля, якщо він виявиться надійним.
Функція перевірки надійності пароля
Розглянемо для початку вже готову функцію jQuery, яку ми використовуємо як приклад. Пізніше я розповім вам про неї докладніше.
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. Аргументи та процедура скидання форми
var pass1 = $pass1.val(); var pass2 = $pass2.val(); // Reset the form & meter $submitButton.attr( 'disabled', 'disabled' ); $strengthResult.removeClass( 'short bad good strong' );
Ці перші кілька рядків досить прості – ми отримуємо паролі та скидаємо форму. На самому початку ця форма завжди відключена, і тільки після того, як ми отримуємо надійний пароль, її можна активувати.
2. Чорний список фраз для паролів
// Extend our blacklist array with those from the inputs & site data blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() );
Загалом з цією функцією не повинно виникати жодних проблем, і при необхідності нові словосполучення легко додаються до існуючого списку.
3. Функція визначення надійності пароля
// Get the password strength var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
Тепер нам потрібно визначитися зі ступенем надійності самого пароля, це робиться за допомогою функції meter . Далі ми вирішимо, що робити із результатами.
4. Відображення результатів
// 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 );
}Тепер, коли ми вже знаємо міру надійності пароля за шкалою від 1 до 5, настав час відобразити цей результат на екрані. На WordPress надається функція JavaScript pwsL10n , яка містить ярлики та набір правил, що дають визначення надійності пароля під час введення кожного наступного символу. Ми виводимо відповідний ярлик у тегу під полем введення пароля.
5. Активація кнопки підтвердження
// 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. Прив'язка виконання скрипта до натискання клавіш
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 обробником.
7. Заміна назв ярликів "надійності" на свої
Ви можете поміняти назви ярликів на свої власні, наприклад замість фрази "Надійний" виводитиметься "Чемпіонський" або щось на зразок того.
Для цього у файлі functions.php відразу під функцією wp_enqueue_script , де ви підключали наш скрипт, додайте наступний код:
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, і можете сміливо застосовувати його для реєстрації користувачів на вашому сайті або для інших цілей.
Джерело: code.tutsplus.com
Коментарі до запису: 0