Chào các bạn, vô tình lượn lờ trên mạng thấy một bài viết khá hay về việc tăng tính bảo mật cho các site bằng wordpress, nên hôm nay leech về đây cho các bạn tham khảo.
Password Strength Script
Đây là script đã được wordpress hỗ trợ, thế nhưng không có trong các bản tài liệu do wordpress công bố, để lấy được code của script này, bạn truy cập vào đường dẫn wp-admin/js/password-strength-meter.js để kiểm tra. Để sử dụng được script này trong theme, bạn cần phải thêm đoạn code sau vào trong file functions.php
|
1 |
wp_enqueue_script( 'password-strength-meter' ); |
Trong đó, script có hai hàm
wp.passwordStrength.meter( password1, blacklist, password2 ): Đây là hàm chính mà chúng ta sẽ sử dụng. Hàm này sẽ giúp chúng ta kiểm tra độ mạnh yếu của mật khẩuwp.passwordStrength.userInputBlacklist(): Hàm này sẽ làm nhiệm vụ nhập vào những password bị blacklist để kiểm tra.
Cách sử dụng
Để sử dụng được script này, chúng ta cần nhúng vào thẻ form khi đăng ký hoặc thay đổi mật khẩu
|
1 2 3 4 5 6 |
<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> |
Chúng ta đã sử dụng 2 trường là name và id để script có thể lấy được giá trị. Cơ chế hoạt động của nó là
- Khi có ai đó gõ mật khẩu vào trong các trường trên form, cụ thể là trường mật khẩu, chúng ta sẽ kiểm tra độ mạnh yếu của mật khẩu.
- Sau đó sẽ hiện ra thông báo hiển thị độ mạnh yếu mà WordPress đặt ra.
- Cuối cùng, nút gửi thông tin sẽ hiện lên khi mật khẩu người dùng nhập vào là đủ mạnh để không bị các hacker phá
Nội dung hàm Strength Meter
Toàn bộ thông tin về hàm được viết dưới đây, tác giả đã có chú thích đầy đủ, các bạn chịu khó đọc nhé
|
1 2 3 4 5 6 7 8 9 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 ); } ); }); |
Custom một số thứ
Thông thường, wordpress đặt tên cho các nhãn (label) của Strength Meter là pwsL10n. Tuy nhiên, chúng ta có thể thay đổi thêm để dễ dàng style bằng cách vào file functions.php và thêm đoạn code sau
|
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' ) ) ); |
Tổng kết
Vậy là trong bài học này, các bạn đã học được cách thêm script để kiểm tra độ mạnh yếu của mật khẩu trong wordpress. Chúng ta có thể vận dụng bài học này trong custom form đăng ký và trang profile ở ngoài front-end. Chúc bạn thành công.
