Bessere Passwortmaskierung in Ihren WordPress -Formularen

Passwortmaskierung ist eine Technik, die von Entwicklern verwendet wird, um zu verhindern, dass jemand das Kennwort auf dem Bildschirm liest, während der Benutzer das Kennwort eingreift. Die Kennwortmaskierung verursacht jedoch viele Probleme, wenn es um die Benutzererfahrung geht. In diesem Artikel werden wir einige dieser Probleme skizzieren, die durch Kennwortmaskierung und einige Lösungen verursacht werden.

Insbesondere

konzentrieren wir uns auf die Probleme der Benutzererfahrung im Zusammenhang mit der Kennwortmaskierung in den Formularen des WordPress Admin -Anmelde- und Kennwortresets. Wir erstellen auch ein WordPress -Plugin, das den Anmeldungs- und Kennwortreset -Formularen ein Kontrollkästchen hinzufügt, um Text in einem maskierten Feldkennwort anzuzeigen oder auszublenden.

Key Takeaways

• Kennwortmaskierung, während sie die Sicherheit verbessern, kann zu Usability -Problemen führen, insbesondere auf Geräten mit kleineren Schlüssel oder Touchscreens, da Benutzer möglicherweise mehr Tippfehler machen und frustriert werden, wenn sie nicht überprüfen, was sie eingegeben haben.
• Verschiedene Lösungen zur Verbesserung der Verwendbarkeit der Kennwortmaskierung umfassen das Entlösen des zuletzt getippten Zeichens, die Entlarven des Kennworts, wenn der Cursor über das Feld verschoben wird, und ermöglicht es den Benutzern, das Feld Kennwort mithilfe eines Kontrollkästchens zu entlarven und zu maskieren.
.
Ein WordPress -Plugin kann erstellt werden, um die Kennwortmaskierung in den Formularen Anmeldungs- und Kennwortreset -Formulare zu verbessern, indem ein Kontrollkästchen zum Anzeigen oder Ausblenden des Kennworts hinzugefügt werden. Dies beinhaltet das Erstellen eines Verzeichnisses und die Dateien, das Hinzufügen von Skript, um die JavaScript -Datei zu untertreffen und zu den Formularen ein Kontrollkästchen hinzuzufügen.
Entlarven des Kennworts, wenn das Kontrollkästchen klickt wird, indem das Attribut des Typs des Kennworts in Text geändert wird. Diese Funktionalität wird mit JavaScript -Code hinzugefügt.

Was ist Passwortmaskierung?

Passwortmaskierung ist eine Praxis, alle Zeichen eines Kennwortfeldes zu verdecken. Dies geschieht, um zu verhindern, dass jemand das Passwort auf dem Bildschirm liest, während der Benutzer es eingreift.

Hier ist, wie ein maskiertes Kennwortfeld aussieht:

In der Praxis kann dies jedoch in vielen modernen Computergeräten, die entweder kleinere Schlüssel zum Eingeben haben oder Touchscreens verwenden, zu Benutzerfreundlichkeitsproblemen führen.

.

Usability -Probleme, die durch Kennwortmaskierung verursacht werden

Benutzer neigen dazu, weniger Tippfehler auf Geräten mit größeren Schlüssel zu machen, da die Finger beim Eingeben einfacher sind. Benutzer tendieren auch dazu, mehr Tippfehler mit Geräten (wie Mobilgeräten und Tablets) mit kleineren Schlüssel zu machen, da ihre Finger nicht so gut zum Tippen passen.

Wenn es ein Kennwortfeld gibt, das auf dem mobilen Bildschirm maskiert wird und ein Benutzer auf keinen Fall überprüfen kann, was das eingegebene Passwort ist (was der Benutzer eingeben soll), kann dies dazu führen Site Da besteht die Möglichkeit, dass der Benutzer aufgrund kleinerer Schlüssel mehrmals ein falsches Passwort mehrmals eingeben kann.

Jakob Nielsen, ein Web -Usability -Berater, der einen Ph.D. In der Interaktion zwischen Mensch und Compute, einmal gesagt:

Usability leidet, wenn Benutzer Passwörter eingeben, und das einzige Feedback, das sie erhalten, ist eine Reihe von Kugeln. In der Regel erhöht das Maskieren von Passwörtern nicht einmal die Sicherheit, kostet Sie jedoch aufgrund von Anmeldungsfehlern.

.

Seitdem haben Entwickler begonnen, dieses Problem zu überdenken, und auch die potenziellen Lösungen, um es anzugehen.

Lösungen für Usability -Probleme, die durch Kennwortmaskierung verursacht werden

Es gibt mehrere Lösungen, die von mehreren Entwicklern vorgeschlagen wurden, um das Usability -Problem der Kennwortmaskierung auf Mobiltelefonen anzugehen. Hier sind einige der beliebten:

1. Last Charakter entlarven: Wir können das letzte Zeichen der Kennwortdatei entlarven, während der Benutzer eingeben, so
Entlarven auf Feldfokus: Wir können das Kennwort einfach entlarven, wenn der Benutzer den Cursor über das Feld Passwort bewegt. Diese Methode ist eine Lösung nur für Geräte, die einen Mauszeiger haben, daher keine Lösung für mobile Geräte.
Entlarven mit dem Kontrollkästchen: Wir können den Benutzern auch das Feld Kennwort mithilfe eines Kontrollkästchen entlarven und maskieren lassen. Die vorherige Lösung war gut, aber nur auf Computer beschränkt. Diese Lösung funktioniert jedoch auf allen Geräten und ist bei weitem die beste Lösung für dieses Problem.

In diesem Tutorial, damit die Kennwortmaskierung in den Formularen von WordPress -Anmeldung und Kennwort zurückgesetzt wird, füge ich den Formularen ein Kontrollkästchen hinzu, um das Passwort auszublenden oder anzuzeigen.

Plugin -Verzeichnis und Dateien

Um die Plugin-Entwicklung zu starten, erstellen Sie in Ihrem

WP-Content/Plugins Verzeichnis ein Verzeichnis namens Kennwort-Masking und erstellen Sie dann eine Datei namens Kennwortmasken. php und eine andere Datei namens password-masking.js darin.

Out Directory -Struktur sollte so aussehen

--password-masking
	-password-masking.php
	-password-masking.js

In der Datei

password-masking.php fügen Sie den folgenden Text hinzu, um das Plugin installierbar zu machen.

< ?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
 */

Wir müssen die Datei

password-masking.js in Anmeldungs- und Kennwort-Reset-Seiten unterteilen. Um die Skriptdatei zu untertreffen, fügen Sie diesen Code Ihrem password-masking.php Datei hinzu:

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");

Hier haben wir das Skript zuerst mit WP_register_Script -Funktion registriert und dann mit wp_enqueue_script untergebracht.

login_enqueue script action action action actions actions action

Hinzufügen eines Kontrollkästchens zum Anmeldeformular

Um ein Kontrollkästchen zum Anmeldformular hinzuzufügen, müssen wir den Action -Hook Login_form verwenden. Dieser Haken wird verwendet, um das integrierte WordPress-Anmeldeformular anzupassen, indem wir neue Felder hinzufügen können.

platzieren Sie diesen Code in der Datei

password-masking.php

, um das Kontrollkästchen zum Anmeldeformular hinzuzufügen:

--password-masking
	-password-masking.php
	-password-masking.js

Hier haben wir ein Kontrollkästchen mit id passwordmask hinzugefügt. Wenn Sie auf die Prüfung klicken, wird die Funktion passwordmasking_loginform () aufgerufen.

Jetzt sollte das Anmeldeformular so aussehen: Wenn Sie auf das Kontrollkästchen klicken, wird das Feld Kennwort nicht entlarvt, da wir den JavaScript -Code für diese Funktionalität noch nicht geschrieben haben.

Hinzufügen eines Kontrollkästchens zum Kennwort Reset Formular

Um das Kontrollkästchen zum Kennwort -Reset -Formular hinzuzufügen, müssen wir den Action -Hook resetpass_form verwenden. Dieser Haken wird verwendet, um das integrierte Formular für das WordPress-Passwort zurückzusetzen, indem wir neue Felder hinzufügen können.

platzieren Sie diesen Code in der Datei password-masking.php , um ein Kontrollkästchen zum Zurücksetzen des Kennworts hinzuzufügen:

< ?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
 */

Hier haben wir auch ein Kontrollkästchen mit id passwordmask hinzuge. Wenn Sie auf die Prüfung klicken, wird die Funktion passwordmasking_resetform () aufgerufen.

Jetzt sollte das Formular für das Kennwortreset wie folgt aussehen:

, aber wenn Sie auf das Kontrollkästchen klicken, wird das Feld Kennwort nicht entlarvt, da wir JavaScript -Code für diese Funktionalität noch nicht geschrieben haben.

Entlarven des Kennwortfelds eines Anmeldeformulars

, um das Kennwortfeld des Anmeldeformulars zu entlarven, wenn der Benutzer auf das Kontrollkästchen Passwort anzeigen. Wir müssen das Attribut des Typs des Kennworts in Text ändern.

Platzieren Sie diesen Code in die Datei Passwort-masking.js, um diese Funktionalität hinzuzufügen:

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");

Hier wird die passwordmasking_loginform () aufgerufen, wenn der Benutzer auf das Kontrollkästchen klickt.

Wenn das Feld Passwort nicht entlarvt ist, maskieren wir es auf dem Kontrollkästchen und umgekehrt. Hier ist, wie das Feld entlarvtes Kennwort im Anmeldesformular aussieht:

Entlarven eines Kennwortfelds des Kennwortreset -Formulars

, um die Kennwortfelder des Kennwortresetformulars zu entlarven, wenn der Benutzer auf das Kontrollkästchen

Passwort anzeigen. Platzieren Sie diesen Code in die Datei Passwort-masking.js, um diese Funktionalität hinzuzufügen:

Hier wird die passwordmasking_resetform () aufgerufen, wenn der Benutzer auf das Kontrollkästchen klickt.

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");

Wenn das Feld Passwort nicht entlarvt ist, maskieren wir es auf dem Kontrollkästchen und umgekehrt. So sehen sich die entlarvten Kennwortfelder im Formular für das Passwort zurückgesetzt aus:

Schlussfolgerung

In diesem Artikel habe ich Ihnen gezeigt, wie Sie einfach ein Plugin erstellen, um ein

-Kennwort

im Anmeldungs- und Kennwort -Reset -Formulare zu addieren. Wir haben auch die Usability -Probleme bei der Maskierung von Kennwortfeldern und verschiedenen Lösungen für dieses Problem gesehen.

Sie können jetzt diese Technik auf den WordPress -Frontend -Formularen auf Ihrer Website verwenden.

Sie können hier eine vollständige Kopie des Plugins erhalten. Bitte lassen Sie mich wissen, was Sie in den Kommentaren unten denken.

häufig gestellte Fragen (FAQs) zur besseren Kennwortmaskierung in WordPress -Formularen

Wie verbessert die Kennwortmaskierung die Sicherheit meiner WordPress -Formulare? Anstatt die tatsächlichen Zeichen anzuzeigen, zeigt die Form eine Reihe von Punkten oder Sternchen. Diese Funktion verbessert die Sicherheit Ihrer WordPress -Formulare, indem sie die Zuschauer daran hindern, Ihr Passwort beim Eingeben zu sehen. Es fügt auch eine zusätzliche Schutzebene gegen böswillige Software hinzu, die möglicherweise versucht, Ihre Tastenanschläge zu erfassen. Maskierungsfunktion in Ihren WordPress -Formularen. Sie können das Maskierungscharakter vom Standard -Sternchen in einen anderen Charakter Ihrer Wahl ändern. Sie können auch die Verzögerungszeit anpassen, bevor der Maskierungscharakter erscheint. Mit dieser Anpassung können Sie die Benutzererfahrung auf Ihrer Website verbessern und gleichzeitig ein hohes Maß an Sicherheit beibehalten. WordPress -Formulare beinhalten die Änderung des HTML- und JavaScript -Code des Formulars. Sie müssen dem HTML -Code des Formulars ein Kennworteingangsfeld hinzufügen und dann JavaScript verwenden, um das Maskierungsverhalten zu steuern. Dieser Prozess erfordert möglicherweise einige Kenntnisse über Webprogrammierung, aber es gibt auch Plugins, die die Aufgabe vereinfachen können. Es stehen mehrere Plugins zur Verfügung, die Ihnen bei der Kennwortmaskierung in WordPress -Formularen helfen können. Diese Plugins bieten eine benutzerfreundliche Schnittstelle zum Anpassen der Kennwortmaskierungsfunktion. Sie bieten auch zusätzliche Sicherheitsfunktionen wie Kennwortstärkeindikatoren und Zwei-Faktor-Authentifizierung. Die Maskierung in WordPress -Formularen bietet mehrere Vorteile. Zunächst vereinfacht es den Prozess der Implementierung und Anpassung der Kennwortmaskierungsfunktion. Sie müssen den Code des Formulars nicht manuell ändern. Zweitens bietet es zusätzliche Sicherheitsfunktionen, die die Gesamtsicherheit Ihrer Website verbessern können. Schließlich stellt es sicher, dass die Kennwortmaskierungsfunktion über verschiedene Browser und Geräte korrekt funktioniert.

Kann ich die Kennwortmaskierungsfunktion in meinen WordPress -Formularen deaktivieren? Dies wird jedoch nicht empfohlen, da die Passwörter Ihrer Benutzer Zuschauer und böswillige Software aussetzen können. Wenn Sie aus irgendeinem Grund die Funktion für Kennwortmasking deaktivieren müssen, informieren Sie Ihre Benutzer und ermutigen Sie sie, eine sichere Umgebung beim Eingeben ihrer Passwörter zu verwenden.

Kennwortmaskierung kann die Benutzererfahrung auf Ihrer Website verbessern, indem Sie ein Gefühl der Sicherheit vermitteln. Benutzer können ihre Passwörter sicher eingeben, da sie wissen, dass Zuschauer ihre tatsächlichen Zeichen nicht sehen können. Die Kennwortmaskierung kann jedoch auch einige Unannehmlichkeiten verursachen, da Benutzer die von ihnen eingegebenen Zeichen nicht sehen können. Um dieses Problem zu mildern, können Sie eine Option „Passwort anzeigen“ angeben, mit der Benutzer die Maskierung ein- und ausschalten können. 🎜>

Wenn die Kennwortmaskierungsfunktion in Ihren WordPress -Formularen nicht korrekt funktioniert, sollten Sie zunächst den Code des Formulars überprüfen, um sicherzustellen, dass er korrekt implementiert ist. Wenn der Code korrekt ist, kann das Problem durch einen Konflikt mit einem anderen Plugin oder Thema verursacht werden. In diesem Fall können Sie versuchen, andere Plugins zu deaktivieren oder zu einem Standardthema zu wechseln, um die Quelle des Konflikts zu identifizieren. > Ja, Sie können auf Ihrer WordPress -Website eine Kennwortmaskierung in einer beliebigen Art von Form verwenden, bei der Benutzer sensible Informationen eingeben müssen. Dies umfasst Anmeldeformulare, Registrierungsformulare und Formulare zum Zurücksetzen von Passwörtern. Die Verwendung von Kennwortmaskierung in diesen Formularen kann ihre Sicherheit verbessern und die Informationen Ihrer Benutzer schützen.

Wie kann ich sicherstellen, dass die Kennwörter meiner Benutzer sicher sind? Mehrere andere Maßnahmen, die Sie ergreifen können, um sicherzustellen, dass die Passwörter Ihrer Benutzer sicher sind. Sie können starke Kennwortrichtlinien erzwingen, z. B. eine Mindestlänge und eine Mischung verschiedener Zeichenarten. Sie können auch einen Kennwortstärkeindikator angeben, um die Benutzer zu ermutigen, starke Passwörter auszuwählen. Darüber hinaus können Sie die Zwei-Faktor-Authentifizierung implementieren, um eine zusätzliche Schutzschicht hinzuzufügen.

Das obige ist der detaillierte Inhalt vonBessere Passwortmaskierung in Ihren WordPress -Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!