Khususnya, kami akan memberi tumpuan kepada masalah pengalaman pengguna yang berkaitan dengan masker kata laluan pada borang log masuk dan kata laluan admin WordPress. Kami juga akan membuat plugin WordPress yang menambah kotak semak ke borang tetapan masuk dan kata laluan untuk menunjukkan atau menyembunyikan teks dalam medan kata laluan bertopeng.
Takeaways Key
inilah cara medan kata laluan bertopeng kelihatan:
Walau bagaimanapun, dalam praktiknya ini boleh menyebabkan masalah kebolehgunaan dalam banyak peranti pengkomputeran moden yang mempunyai kunci yang lebih kecil untuk menaip atau menggunakan skrin sentuh. masalah kebolehgunaan yang disebabkan oleh pelekat kata laluan
jika ada medan kata laluan yang bertopeng pada skrin mudah alih dan tidak ada cara pengguna dapat memeriksa kata laluan yang ditaip (apa yang dimaksudkan oleh pengguna untuk menaip) maka ini dapat menyebabkan pengguna kecewa dan meninggalkan anda laman web kerana ada kemungkinan pengguna boleh menaip kata laluan yang salah beberapa kali secara tidak sengaja disebabkan oleh kekunci yang lebih kecil.
Jakob Nielsen, seorang perunding kebolehgunaan web yang memegang Ph.D. Dalam interaksi manusia -komputer, pernah berkata:
kebolehgunaan menderita apabila pengguna menaip kata laluan dan satu -satunya maklum balas yang mereka dapatkan adalah barisan peluru. Biasanya, kata laluan masking bahkan tidak meningkatkan keselamatan, tetapi ia membebankan perniagaan anda kerana kegagalan log masuk.
Sejak itu pemaju telah mula memikirkan semula isu ini dan juga penyelesaian yang berpotensi untuk mengatasinya.
Terdapat beberapa penyelesaian yang dicadangkan oleh beberapa pemaju untuk menangani masalah kebolehgunaan kata laluan pada telefon bimbit. Berikut adalah beberapa yang popular:
Direktori dan Fail Plugin
anda membuat direktori yang dipanggil kata laluan-masking , dan kemudian buat fail yang dipanggil kata laluan-masking. php dan fail lain yang dipanggil kata laluan- masking.js di dalamnya. struktur direktori harus kelihatan seperti ini
dalam fail
--password-masking -password-masking.php -password-masking.js
, tambahkan teks berikut untuk membuat plugin dipasang.
kita perlu enqueue< ?php /** * Plugin Name: Password Masking * Plugin URI: https://www.sitepoint.com/ * Description: A plugin to add "show password checkbox" to Login and Password Reset Forms. * Author: Narayan Prusty */
fail dalam halaman semula log masuk dan kata laluan. Untuk memasukkan fail skrip tambahkan kod ini ke kata laluan- masking.php fail anda:
di sini kita mula -mula mendaftarkan skrip menggunakan fungsi wp_register_script dan kemudian enqueued menggunakan wp_enqueue_script.
function pm_enqueue_scripts()
{
wp_register_script("pm-js", plugins_url("password-masking/password-masking.js"));
wp_enqueue_script("pm-js");
}
add_action("login_enqueue_scripts", "pm_enqueue_scripts");
Login_enqueue Scripts Action Hook digunakan untuk memupuk skrip dan stylesheet ke halaman Login, Pendaftaran dan Kata Laluan.
Menambah kotak semak ke borang log masukUntuk menambah kotak semak untuk log masuk borang kita perlu menggunakan cangkuk tindakan login_form. Cangkuk ini digunakan untuk menyesuaikan borang log masuk WordPress terbina dalam dengan membiarkan kami menambah medan baru.
kata laluan.php
untuk menambah kotak semak ke borang log masuk:--password-masking -password-masking.php -password-masking.js
di sini kami menambah kotak semak dengan ID passwordmask. Mengklik pada cek memanggil fungsi passwordmasking_loginform ().
Sekarang borang log masuk sepatutnya kelihatan seperti ini:
Mengklik pada kotak semak tidak akan membongkar medan kata laluan, kerana kami belum menulis kod JavaScript untuk fungsi tersebut.
Untuk menambah kotak semak ke borang penetapan semula kata laluan kita perlu menggunakan cangkuk tindakan resetpass_form. Cangkuk ini digunakan untuk menyesuaikan borang penetapan kata laluan WordPress terbina dalam dengan membiarkan kami menambah medan baru.
letakkan kod ini dalam fail kata laluan.php untuk menambah kotak semak ke borang penetapan semula kata laluan:
< ?php /** * Plugin Name: Password Masking * Plugin URI: https://www.sitepoint.com/ * Description: A plugin to add "show password checkbox" to Login and Password Reset Forms. * Author: Narayan Prusty */
di sini juga kami menambah kotak semak dengan ID passwordmask. Mengklik pada cek memanggil fungsi passwordmasking_resetform ().
sekarang borang penetapan kata laluan sepatutnya kelihatan seperti ini:
tetapi mengklik pada kotak semak tidak akan melepaskan medan kata laluan kerana kami belum menulis kod JavaScript untuk fungsi itu.
tunjukkan kata laluan kotak semak kita perlu menukar atribut jenis medan kata laluan ke teks.
letakkan kod ini dalam fail kata laluan-masking.js untuk menambah fungsi ini:
function pm_enqueue_scripts()
{
wp_register_script("pm-js", plugins_url("password-masking/password-masking.js"));
wp_enqueue_script("pm-js");
}
add_action("login_enqueue_scripts", "pm_enqueue_scripts");
di sini jika medan kata laluan tidak dilepaskan maka kami menutupnya pada kotak semak dan sebaliknya. Berikut adalah bagaimana medan kata laluan yang tidak diasaskan pada borang log masuk kelihatan:
Unmasking medan kata laluan borang penetapan kata laluan
kotak semak kita perlu menukar atribut jenis medan kata laluan ke teks. letakkan kod ini dalam fail kata laluan-masking.js untuk menambah fungsi ini:
di sini passwordmasking_resetform () dipanggil apabila pengguna mengklik pada kotak semak.
function display_login_checkbox()
{
?>
<p>
<label for="passwordmask">
<input name="passwordmask" type="checkbox" onclick="passwordMasking_LoginForm()"/>
Show Password
</label>
</p>
< ?php
}
add_action("login_form", "display_login_checkbox");
Kesimpulan
Dalam artikel ini, saya telah menunjukkan kepada anda bagaimana untuk membina plugin dengan mudah untuk menambah Anda kini boleh teruskan dan menggunakan teknik ini pada bentuk frontend WordPress di laman web anda.
anda boleh mendapatkan salinan lengkap plugin di sini. Tolong beritahu saya apa yang anda fikirkan dalam komen di bawah.
Masking kata laluan boleh meningkatkan pengalaman pengguna di laman web anda dengan memberikan rasa aman. Pengguna boleh memasukkan kata laluan mereka dengan yakin, mengetahui bahawa penonton tidak dapat melihat watak sebenar mereka. Walau bagaimanapun, pelekat kata laluan juga boleh menyebabkan kesulitan kerana pengguna tidak dapat melihat watak -watak yang mereka taip. Untuk mengurangkan isu ini, anda boleh menyediakan pilihan "Tunjukkan Kata Laluan" yang membolehkan pengguna untuk bertukar -tukar dan mematikan. 🎜>
Jika ciri masking kata laluan tidak berfungsi dengan betul dalam borang WordPress anda, anda harus terlebih dahulu menyemak kod borang untuk memastikan ia dilaksanakan dengan betul. Jika kod itu betul, isu ini mungkin disebabkan oleh konflik dengan plugin atau tema lain. Dalam kes ini, anda boleh cuba menyahaktifkan plugin lain atau beralih ke tema lalai untuk mengenal pasti sumber konflik. > Ya, anda boleh menggunakan Masking Kata Laluan dalam apa -apa jenis borang di laman web WordPress anda yang memerlukan pengguna memasukkan maklumat sensitif. Ini termasuk borang log masuk, borang pendaftaran, dan borang untuk menetapkan semula kata laluan. Menggunakan Masking Kata Laluan dalam borang ini dapat meningkatkan keselamatan mereka dan melindungi maklumat pengguna anda. Beberapa langkah lain yang boleh anda ambil untuk memastikan kata laluan pengguna anda selamat. Anda boleh menguatkuasakan dasar kata laluan yang kuat, seperti memerlukan panjang minimum dan campuran pelbagai jenis aksara. Anda juga boleh memberikan penunjuk kekuatan kata laluan untuk menggalakkan pengguna memilih kata laluan yang kuat. Selain itu, anda boleh melaksanakan pengesahan dua faktor untuk menambah lapisan perlindungan tambahan.Atas ialah kandungan terperinci Masking kata laluan yang lebih baik dalam borang WordPress anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
