更好的密碼掩蓋您的WordPress表單
- Christopher Nolan原創
- 2025-02-16 08:58:15501瀏覽
>密碼掩碼是開發人員使用的一種技術，可以防止某人在用戶鍵入密碼時在屏幕上讀取密碼。但是，密碼掩蓋最終會導致用戶體驗造成許多問題。在本文中，我們將概述密碼掩蓋和一些解決方案引起的一些問題。
特別是，我們將重點介紹與WordPress Admin登錄和密碼重置表單上密碼屏蔽有關的用戶體驗問題。我們還將創建一個WordPress插件，該插件將復選框添加到登錄名和密碼重置表單中，以顯示或隱藏文本在蒙版的密碼字段中。>
鑰匙要點- >密碼屏蔽雖然增強安全性，但可能會導致可用性問題，尤其是在帶有較小鍵或觸摸屏的設備上，因為用戶可能會犯更多的鍵入錯誤，並且如果他們無法檢查他們輸入的內容，則會感到沮喪。 >
- >提高密碼掩蔽可用性的各種解決方案包括刪除最後一個字符，當光標被移動到字段上時卸下密碼，並允許用戶使用複選框刪除並掩蓋密碼字段。 >
- > 可以創建一個WordPress插件，以通過添加複選框顯示或隱藏密碼來改善登錄和密碼重置表單上的密碼掩碼。這涉及創建一個目錄和文件，添加腳本以提名JavaScript文件，並在表單中添加一個複選框。 通過將密碼字段的類型屬性更改為文本時，單擊複選框時，請刪除密碼字段。使用JavaScript代碼添加了此功能。 >
- 什麼是密碼掩碼？
- > >密碼掩碼是掩蓋密碼字段所有字符的習慣。這樣做是為了防止某人在用戶鍵入時讀取屏幕上的密碼。
這是蒙版密碼字段的外觀：
但是，實際上，這可能會在許多具有較小鍵的鍵或使用觸摸屏的鑰匙的現代計算設備中引起可用性問題。
>由密碼掩蓋引起的可用性問題
>>用戶傾向於在鍵入時更容易適合手指的設備上犯下更大鍵的鍵入錯誤。用戶還傾向於使用具有較小鍵的設備（例如移動和平板電腦）造成更多打字錯誤，因為他們的手指不太適合打字。 >
>如果有一個密碼字段在移動屏幕上掩蓋，並且用戶無法檢查鍵入密碼是什麼（用戶打算輸入的內容），則可以導致用戶感到沮喪並離開您的網站由於用戶有可能由於較小的密鑰而無意間多次鍵入錯誤的密碼。
當用戶輸入密碼時，可用性會受到影響，而他們獲得的唯一反饋是一排子彈。通常，掩蓋密碼甚至不會增加安全性，但是由於登錄失敗而使您的業務損失。
從那時起，開發人員開始重新考慮此問題，並可能解決問題的潛在解決方案。
>解決密碼蒙版引起的可用性問題的解決方案
>有幾個開發人員提出了幾種解決方案，以解決手機上的密碼掩蓋的可用性問題。這是一些受歡迎的：
>刪除最後一個字符：在用戶鍵入時，我們可以刪除密碼文件的最後一個字符，從而使用戶可以輕鬆地遵循，讓他們檢查他們是否鍵入正確的字符。
>在現場焦點上刪除：當用戶將光標移動密碼字段的頂部時，我們只需刪除密碼即可。此方法是僅用於具有鼠標指針的設備的解決方案，因此不是移動設備的解決方案。
使用複選框
刪除：我們還可以讓用戶刪除並使用複選框掩蓋密碼字段。以前的解決方案很好，但僅限於計算機。但是該解決方案在所有設備上都起作用，並且是迄今為止解決此問題的最佳解決方案。
在本教程中，要在WordPress登錄和密碼重置表單上更好地掩蓋密碼，我將在表單上添加一個複選框以隱藏或顯示密碼。 - >
插件目錄和文件-
>在您的- wp-content/插件中啟動插件開發
目錄創建一個名為
password-basking 的目錄，然後創建一個稱為
passwort basking的文件。 php和另一個稱為
password-masking.js的文件。
out目錄結構應該看起來像>
>在> password-masking.php文件中，添加以下文本以使插件可安裝。
我們需要在登錄頁和密碼重置頁面中加入
password-masking.js--password-masking
-password-masking.php
-password-masking.js
文件。為了提出腳本文件，將此代碼添加到您的password-masking.php文件：
< ?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
*/
在這裡，我們首先使用WP_REGISTER_SCRIPT函數註冊腳本，然後使用WP_ENQUEUE_SCRIPT。
> login_enqueue腳本操作掛鉤用於將腳本和样式表納入管理員登錄，註冊和密碼重置頁面。
>向登錄表單添加一個複選框
>要在登錄表單中添加一個複選框，我們需要使用login_form Action Hook。此掛鉤用於通過添加新字段來自定義內置的WordPress登錄表單。
>將此代碼放在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");
password-masking.php文件中，將復選框添加到登錄表單：
--password-masking
-password-masking.php
-password-masking.js
>在這裡，我們添加了一個帶有ID passwordmask的複選框。單擊檢查調用passwordMasking_loginform（）函數。
現在，登錄表格應該看起來像這樣：
單擊複選框不會揭示密碼字段，因為我們尚未為該功能編寫JavaScript代碼。
>在密碼重置表單上添加一個複選框
>要將復選框添加到密碼重置表格，我們需要使用resetpass_form操作鉤。此掛鉤用於通過添加新字段來自定義內置的WordPress密碼重置表單。
>將此代碼放在
> password-masking.php文件中，以將復選框添加到密碼重置表格：>
>在這裡，我們還添加了一個帶有ID passwordmask的複選框。單擊“檢查”調用passwordMasking_resetform（）函數。
< ?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
*/
>現在，密碼重置表格應該看起來像：
>
>但是，單擊複選框不會揭示密碼字段，因為我們尚未為該功能編寫JavaScript代碼。
>刪除登錄表單的密碼字段
>在用戶單擊
顯示密碼複選框時，請刪除登錄表單的密碼字段，我們需要將密碼字段的類型屬性更改為文本。
>將此代碼放在passwess basking.js文件中以添加此功能：>
>在此處，當用戶單擊複選框時，請調用passwordmasking_loginform（）。
。
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");
>在此處，如果密碼字段未刪除，那麼我們將其掩蓋在復選框切換和反之亦然。這是登錄表格上的未掩蓋密碼字段的外觀：
>刪除密碼重置表格的密碼字段
>在用戶單擊>顯示密碼
複選框時，請刪除密碼重置表單的密碼字段，我們需要將密碼字段的類型屬性更改為文本。
>將此代碼放在passwess basking.js文件中以添加此功能：>
>在此處，當用戶單擊複選框時，請調用passwordmasking_resetform（）。
。
>在此處，如果密碼字段未刪除，那麼我們將其掩蓋在復選框切換和反之亦然。這是密碼重置表格上未掩蓋的密碼字段的外觀：
>
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");
結論
>在本文中，我向您展示瞭如何輕鬆構建插件以在登錄名和密碼重置表單上添加
show password 複選框。我們還看到了掩蓋密碼字段的可用性問題以及解決此問題的各種解決方案。
>您現在可以繼續並在網站上的WordPress前端表單上使用此技術。
>您可以在此處獲取插件的完整副本。請讓我知道您在下面的評論中的想法。
>常見問題（常見問題解答）有關WordPress表單中更好的密碼掩碼
>密碼掩蔽如何增強我的WordPress表單的安全性？
> password屏蔽是一個安全功能，它將密碼的實際字符隱藏在用戶將其鍵入表單中。該表格沒有顯示實際字符，而是顯示一系列點或星號。此功能通過防止旁觀者在輸入密碼時看到您的WordPress表單的安全性。它還增加了針對惡意軟件的額外保護層，該保護可能試圖捕獲您的擊鍵。
我可以在我的WordPress表單中自定義密碼掩碼功能嗎？
是的，您可以自定義密碼。您的WordPress表單中的屏蔽功能。您可以將蒙版字符從默認的星號更改為您選擇的任何其他字符。您還可以在出現屏蔽字符之前調整延遲時間。此自定義使您可以在保持高度安全性的同時增強網站上的用戶體驗。 如何在我的WordPress表單中實現更好的密碼掩模？ >在您的WordPress表單中？ WordPress表單涉及修改表單的HTML和JavaScript代碼。您需要在表單的HTML代碼中添加密碼輸入字段，然後使用JavaScript來控制掩蔽行為。此過程可能需要一些Web編程的知識，但是也有可用的插件可以簡化任務。
是否有任何插件可以幫助我使用WordPress表單中的密碼掩模？ ，有幾個可用的插件可以幫助您在WordPress表單中使用密碼掩蓋。這些插件提供了一個用戶友好的接口，用於自定義密碼掩蔽功能。他們還提供了其他安全功能，例如密碼強度指示器和兩因素身份驗證。
>>在WordPress表單中使用插件進行密碼掩模有什麼好處WordPress表格中的掩蓋帶來了一些好處。首先，它簡化了實現和自定義密碼掩蔽功能的過程。您無需手動修改表單代碼。其次，它提供了其他安全功能，可以增強您網站的整體安全性。最後，它確保密碼掩碼功能在不同的瀏覽器和設備上正常工作。>我可以在WordPress表單中禁用密碼屏蔽功能嗎？但是，不建議這樣做，因為它可以將用戶的密碼暴露於旁觀者和惡意軟件。如果由於某種原因需要禁用密碼掩蔽功能，請確保通知您的用戶並鼓勵他們在輸入密碼時使用安全的環境。
密碼屏蔽如何影響我網站上的用戶體驗？
密碼掩蔽可以通過提供安全感來增強您網站上的用戶體驗。用戶可以自信地輸入密碼，因為他們知道圍觀者看不到他們的實際角色。但是，密碼掩蔽也會引起一些不便，因為用戶看不到他們要鍵入的字符。為了減輕此問題，您可以提供一個“顯示密碼”選項，允許用戶打開和關閉掩碼。
>>如果密碼掩蔽功能在我的WordPress表單中無法正常工作，該怎麼辦？ 🎜>
>如果密碼掩蔽功能在WordPress表單中無法正常工作，則應首先檢查表格的代碼，以確保其正確實現。如果代碼正確，則問題可能是由與另一個插件或主題的衝突引起的。在這種情況下，您可以嘗試停用其他插件或切換到默認主題以識別衝突的源頭。 >
>我可以在我的WordPress網站上使用其他類型的表單中使用密碼掩碼？ >是的，您可以在WordPress網站上使用任何類型的表單中使用密碼掩碼，以要求用戶輸入敏感信息。這包括用於重置密碼的登錄表，註冊表格和表格。在這些表格中使用密碼掩碼可以增強其安全性並保護您的用戶信息。 >
>除了使用密碼屏蔽外，還可以確保我的用戶密碼安全？您可以採取其他一些措施，以確保用戶的密碼安全。您可以執行強大的密碼策略，例如需要最小長度和不同類型的字符的混合。您還可以提供密碼強度指示器，以鼓勵用戶選擇強密碼。此外，您可以實現兩因素身份驗證以添加額外的保護層。 >
>解決密碼蒙版引起的可用性問題的解決方案
>有幾個開發人員提出了幾種解決方案，以解決手機上的密碼掩蓋的可用性問題。這是一些受歡迎的：
>刪除最後一個字符：在用戶鍵入時，我們可以刪除密碼文件的最後一個字符，從而使用戶可以輕鬆地遵循，讓他們檢查他們是否鍵入正確的字符。
>在現場焦點上刪除：當用戶將光標移動密碼字段的頂部時，我們只需刪除密碼即可。此方法是僅用於具有鼠標指針的設備的解決方案，因此不是移動設備的解決方案。 使用複選框
刪除：我們還可以讓用戶刪除並使用複選框掩蓋密碼字段。以前的解決方案很好，但僅限於計算機。但是該解決方案在所有設備上都起作用，並且是迄今為止解決此問題的最佳解決方案。-
在本教程中，要在WordPress登錄和密碼重置表單上更好地掩蓋密碼，我將在表單上添加一個複選框以隱藏或顯示密碼。
- > 插件目錄和文件
- >在您的
- wp-content/插件中啟動插件開發 目錄創建一個名為
的目錄，然後創建一個稱為
passwort basking的文件。 php和另一個稱為
password-masking.js的文件。 out目錄結構應該看起來像> >在> password-masking.php文件中，添加以下文本以使插件可安裝。
我們需要在登錄頁和密碼重置頁面中加入
password-masking.js--password-masking -password-masking.php -password-masking.js文件。為了提出腳本文件，將此代碼添加到您的
password-masking.php文件：
< ?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 */在這裡，我們首先使用WP_REGISTER_SCRIPT函數註冊腳本，然後使用WP_ENQUEUE_SCRIPT。
> login_enqueue腳本操作掛鉤用於將腳本和样式表納入管理員登錄，註冊和密碼重置頁面。 >向登錄表單添加一個複選框 >要在登錄表單中添加一個複選框，我們需要使用login_form Action Hook。此掛鉤用於通過添加新字段來自定義內置的WordPress登錄表單。
>將此代碼放在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");
password-masking.php文件中，將復選框添加到登錄表單：
--password-masking -password-masking.php -password-masking.js
>在這裡，我們添加了一個帶有ID passwordmask的複選框。單擊檢查調用passwordMasking_loginform（）函數。
現在，登錄表格應該看起來像這樣：
單擊複選框不會揭示密碼字段，因為我們尚未為該功能編寫JavaScript代碼。
上添加一個複選框
>要將復選框添加到密碼重置表格，我們需要使用resetpass_form操作鉤。此掛鉤用於通過添加新字段來自定義內置的WordPress密碼重置表單。>將此代碼放在
> password-masking.php文件中，以將復選框添加到密碼重置表格：>
>在這裡，我們還添加了一個帶有ID passwordmask的複選框。單擊“檢查”調用passwordMasking_resetform（）函數。< ?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 */>
現在，密碼重置表格應該看起來像：
>>但是，單擊複選框不會揭示密碼字段，因為我們尚未為該功能編寫JavaScript代碼。
>刪除登錄表單的密碼字段
>在用戶單擊
顯示密碼複選框時，請刪除登錄表單的密碼字段，我們需要將密碼字段的類型屬性更改為文本。
>將此代碼放在passwess basking.js文件中以添加此功能：
>在此處，當用戶單擊複選框時，請調用passwordmasking_loginform（）。
。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");
>在此處，如果密碼字段未刪除，那麼我們將其掩蓋在復選框切換和反之亦然。這是登錄表格上的未掩蓋密碼字段的外觀：
>刪除密碼重置表格的密碼字段
>在用戶單擊>顯示密碼
複選框時，請刪除密碼重置表單的密碼字段，我們需要將密碼字段的類型屬性更改為文本。>將此代碼放在passwess basking.js文件中以添加此功能：
>在此處，如果密碼字段未刪除，那麼我們將其掩蓋在復選框切換和反之亦然。這是密碼重置表格上未掩蓋的密碼字段的外觀：
>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");
結論
>在本文中，我向您展示瞭如何輕鬆構建插件以在登錄名和密碼重置表單上添加
show password
複選框。我們還看到了掩蓋密碼字段的可用性問題以及解決此問題的各種解決方案。
>您現在可以繼續並在網站上的WordPress前端表單上使用此技術。
>您可以在此處獲取插件的完整副本。請讓我知道您在下面的評論中的想法。
>常見問題（常見問題解答）有關WordPress表單中更好的密碼掩碼
>密碼掩蔽如何增強我的WordPress表單的安全性？
> password屏蔽是一個安全功能，它將密碼的實際字符隱藏在用戶將其鍵入表單中。該表格沒有顯示實際字符，而是顯示一系列點或星號。此功能通過防止旁觀者在輸入密碼時看到您的WordPress表單的安全性。它還增加了針對惡意軟件的額外保護層，該保護可能試圖捕獲您的擊鍵。
我可以在我的WordPress表單中自定義密碼掩碼功能嗎？
是的，您可以自定義密碼。您的WordPress表單中的屏蔽功能。您可以將蒙版字符從默認的星號更改為您選擇的任何其他字符。您還可以在出現屏蔽字符之前調整延遲時間。此自定義使您可以在保持高度安全性的同時增強網站上的用戶體驗。 如何在我的WordPress表單中實現更好的密碼掩模？>在您的WordPress表單中？ WordPress表單涉及修改表單的HTML和JavaScript代碼。您需要在表單的HTML代碼中添加密碼輸入字段，然後使用JavaScript來控制掩蔽行為。此過程可能需要一些Web編程的知識，但是也有可用的插件可以簡化任務。
是否有任何插件可以幫助我使用WordPress表單中的密碼掩模？ ，有幾個可用的插件可以幫助您在WordPress表單中使用密碼掩蓋。這些插件提供了一個用戶友好的接口，用於自定義密碼掩蔽功能。他們還提供了其他安全功能，例如密碼強度指示器和兩因素身份驗證。
>>在WordPress表單中使用插件進行密碼掩模有什麼好處WordPress表格中的掩蓋帶來了一些好處。首先，它簡化了實現和自定義密碼掩蔽功能的過程。您無需手動修改表單代碼。其次，它提供了其他安全功能，可以增強您網站的整體安全性。最後，它確保密碼掩碼功能在不同的瀏覽器和設備上正常工作。>我可以在WordPress表單中禁用密碼屏蔽功能嗎？但是，不建議這樣做，因為它可以將用戶的密碼暴露於旁觀者和惡意軟件。如果由於某種原因需要禁用密碼掩蔽功能，請確保通知您的用戶並鼓勵他們在輸入密碼時使用安全的環境。
密碼屏蔽如何影響我網站上的用戶體驗？
密碼掩蔽可以通過提供安全感來增強您網站上的用戶體驗。用戶可以自信地輸入密碼，因為他們知道圍觀者看不到他們的實際角色。但是，密碼掩蔽也會引起一些不便，因為用戶看不到他們要鍵入的字符。為了減輕此問題，您可以提供一個“顯示密碼”選項，允許用戶打開和關閉掩碼。
>>如果密碼掩蔽功能在我的WordPress表單中無法正常工作，該怎麼辦？ 🎜>
>如果密碼掩蔽功能在WordPress表單中無法正常工作，則應首先檢查表格的代碼，以確保其正確實現。如果代碼正確，則問題可能是由與另一個插件或主題的衝突引起的。在這種情況下，您可以嘗試停用其他插件或切換到默認主題以識別衝突的源頭。>
>我可以在我的WordPress網站上使用其他類型的表單中使用密碼掩碼？ >是的，您可以在WordPress網站上使用任何類型的表單中使用密碼掩碼，以要求用戶輸入敏感信息。這包括用於重置密碼的登錄表，註冊表格和表格。在這些表格中使用密碼掩碼可以增強其安全性並保護您的用戶信息。>
>除了使用密碼屏蔽外，還可以確保我的用戶密碼安全？您可以採取其他一些措施，以確保用戶的密碼安全。您可以執行強大的密碼策略，例如需要最小長度和不同類型的字符的混合。您還可以提供密碼強度指示器，以鼓勵用戶選擇強密碼。此外，您可以實現兩因素身份驗證以添加額外的保護層。>
以上是更好的密碼掩蓋您的WordPress表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！