Để mở đầu cho website Học WordPress trong năm 2015 mình sẽ viết bài hướng dẫn cho các bạn cách sử dụng công cụ để đo độ mạnh mật khẩu trong trang đăng nhập hoặc khôi phục lại mật khẩu cho WordPress.
Độ mạnh của mật khẩu là một trong những yếu tố quan trọng giúp bảo vệ tài khoản của bạn được an toàn hơn. Một mật khẩu mạnh sẽ có ít nhất 8 ký tự, trong đó bao gồm chữ thường, chữ viết hoa, số và ký tự đặc biệt.
Kể từ phiên bản WordPress 3.7 thì công cụ đo độ mạnh mật khẩu của WordPress đã được cải tiến và nâng cấp lên bản mới tốt hơn phiên bản cũ trước đó. Ngoài việc bạn sử dụng trên các trang mặc định của WordPress thì bạn cũng có thể sử dụng công cụ này trên các trang tạo tài khoản tùy chỉnh.
Đầu tiên thì bạn phải load thư viện javascript có hỗ trợ hàm meter của WordPress bằng cách thêm dòng sau vào trong tập tin functions.php của giao diện, bạn cũng có thể tạo ra các câu lệnh điều kiện để sử dụng trong một trang cụ thể nào đó.
function sb_login_page_custom_style_and_script() {
if(is_page_template('page-template-lost-password.php')) {
wp_enqueue_script('password-strength-meter');
wp_localize_script('password-strength-meter', 'pwsL10n', array(
'empty' => __('Độ mạnh mật khẩu', 'sb-login-page'),
'short' => __('Rất yếu', 'sb-login-page'),
'bad' => __('Yếu', 'sb-login-page'),
'good' => _x('Trung bình', 'sb-login-page'),
'strong' => __('Mạnh', 'sb-login-page'),
'mismatch' => __('Không khớp', 'sb-login-page')
));
}
}
add_action('wp_enqueue_scripts', 'sb_login_page_custom_style_and_script');
Ở trong ví dụ bên trên mình sẽ kiểm tra nếu nó là một Custom Page Template mình đã tạo thì mới load thư viện password-strength-meter. Mặc định ngôn ngữ được sử dụng là Tiếng Anh, bạn có thể dùng hàm wp_localize_script để dịch lại ngôn ngữ thành Tiếng Việt như mình nêu ở bên trên.
Tiếp đến, bạn tạo một tập tin javascript mới và cũng load tập tin này theo cách mình đã nêu bên trên bằng cách dùng hàm wp_enqueue_script. Bên trong tập tin này bạn sẽ khai báo các hàm như sau:
function sb_password_strength($pass1, $pass2, $strengthResult, $submitButton, blacklistArray) {
var pass1 = $pass1.val(),
pass2 = $pass2.val(),
strength = 0;
$submitButton.attr('disabled', 'disabled');
$strengthResult.removeClass('short bad good strong');
blacklistArray = blacklistArray.concat(wp.passwordStrength.userInputBlacklist());
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);
}
if (3 <= strength && pass1 == pass2) {
$submitButton.removeAttr('disabled');
}
return strength;
}
Hàm bên trên chúng ta dùng để kiểm tra độ mạnh của mật khẩu do người dùng nhập vào. Nếu độ mạnh mật khẩu trả về là 3 hoặc 4 và xác nhận mật khẩu phải giống mật khẩu gốc thì chúng ta sẽ bật lại nút xác nhận. Tiếp đến bạn tạo form bằng HTML như bên dưới:
<form class="sb-lost-password-form reset"> <div class="form-group"> <h2 class="form-title">Quên mật khẩu</h2> </div> <div class="form-group"> <label for="reset-password">Nhập mật khẩu mới</label> <input type="password" value="" placeholder="Nhập mật khẩu mới" id="reset-password" class="form-control reset-password"> <label for="reset-password-2">Nhập lại mật khẩu</label> <input type="password" value="" placeholder="Nhập lại mật khẩu" id="reset-password-2" class="form-control reset-password-2"> <span class="reset-password-strength sb-password-strength-indicator"></span> </div> <div class="form-group"> <button class="btn btn-primary login-submit btn-submit" type="submit">Xác nhận</button> </div> </form>
Tiếp theo, bạn tạo sự kiện khi người dùng gõ bàn phím để nhập vào mật khẩu, thay đổi trang thái độ mạnh mật khẩu ra ngoài màn hình.
// Check password strength
$('body').on('keyup', function(e) {
var that = $(this),
reset_password_form = that.find('.sb-lost-password-form.reset'),
reset_password = reset_password_form.find('.reset-password'),
re_reset_password = reset_password_form.find('.reset-password-2'),
reset_password_strength = reset_password_form.find('.reset-password-strength'),
reset_password_submit = reset_password_form.find('.login-submit'),
reset_password_black_list = ['admin'];
sb_password_strength(reset_password, re_reset_password, reset_password_strength, reset_password_submit, reset_password_black_list);
});
Việc cuối cùng bạn cần làm đó là định dạng lại css cho thước đo hiển thị đẹp hơn, bạn mở tập tin style.css của giao diện lên và thêm vào các dòng css như bên dưới:
/* ============================= Strength Indicator ============================= */
.sb-password-strength-indicator {
background-color: #eee;
border: 1px solid #ddd;
color: #444;
display: block;
margin: 13px 5px 5px 1px;
padding: 3px 5px;
text-align: center;
width: 100%;
}
.sb-password-strength-indicator.bad {
background-color: #ffb78c;
border-color: #ff853c;
}
.sb-password-strength-indicator.good {
background-color: #ffec8b;
border-color: #fc0;
}
.sb-password-strength-indicator.short {
background-color: #ffa0a0;
border-color: #f04040;
}
.sb-password-strength-indicator.strong {
background-color: #c3ff88;
border-color: #8dff1c;
}
Nếu bạn viết các hàm và đặt vào đúng chỗ cũng như là load các tập tin css và javascript đúng chuẩn của WordPress thì mọi thứ sẽ hoạt động như kết quả trong hình mình gửi bên trên. Chúc bạn thành công.
