Textbox

[Lenhartz]

Hallo, ich bräuchte eure Hilfe, ich habe einen Login für meine Website gemacht(noch nicht online) und würde gerne nur ein paar Freunden Namen und Passwörter geben. Gibt es eine Möglichkeit,dass der Login Button nur funktioniert wenn er vorher den Namen und das Passwort in der Textbox überprüft und mit einer Liste abgeglichen hat?

Code:

<div id="id01" class="modal">

  <form class="modal-content animate" action="/action_page.php" method="post">

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <button type="submit">Login</button>
    </div>

Ich hätte halt gerne dass er nur bestimmte Begriffe zulässt. Kann man da was machen? Wie z.b: Name: Gustav Schmitz _ Passwort: hdbche5

[Rolf B]

Hallo Lenhartz,

kann man. Aber sollte man?

Die dümmste Lösung wäre eine select-Liste oder datalist mit den Passwörtern.

Nur eine Spur klüger ist: clientseitige JavaScript Prüfung gegen im Script hinterlegte Passwörter. Damit kann jeder, der die Taste F12 findet, die Passwörter sofort auslesen. Autsch.

Die etwa bessere Lösung: nach jeder Zeicheneingabe im Passwortfeld (input event) einen HTTP Request zum Server schicken, der User+Passwort validiert und je nach Antwort den Login-Button freischaltet. Reicht aber nicht, was ist, wenn das Passwort korrekt ist und der User dann sieht: ach, mein Username ist ja nicht Qilly, sondern Willy. Heißt: Man müsste den Validator auch nach input im Username anstoßen. Konsequenz: dein Server wird beim Login pro Zeichen mit einem Request bombardiert. Und du kannst den User nicht nach bspw. 5 Fehlversuchen sperren, weil Du Fehlversuch und laufende Eingabe nicht unterscheiden kannst.

Das change Event auf user und passwort hilft Dir noch weniger. Change feuert erst, wenn das Feld verlassen wurde. Ein User, der sein Passwort tippen und dann direkt ENTER drücken oder Login klicken möchte, statt das Passwortfeld erstmal mit Tab zu verlassen, kommt nicht weiter.

Schlau ist das alles nicht. Man gibt Usern keine Hilfestellung beim Erraten von Passwörtern.

Was sinnvoll sein kann, ist ein Prüfung darauf, ob in Username und Passwort etwas drin steht. Das Script sperrt zunächst den Login-Button und schaltet ihn nur frei, wenn die Felder gefüllt sind. Aber das hilft nur ganz wenig und lohnt die Mühe nicht.

Vor allem geht's einfacher: setze an den beiden Eingabefeldern für User und Passwort das required Attribut. Das reicht.

Rolf

[Der Martin]

Hallo,

ich bräuchte eure Hilfe, ich habe einen Login für meine Website gemacht(noch nicht online) und würde gerne nur ein paar Freunden Namen und Passwörter geben. Gibt es eine Möglichkeit,dass der Login Button nur funktioniert wenn er vorher den Namen und das Passwort in der Textbox überprüft und mit einer Liste abgeglichen hat?

ja, aber das würde den Sinn eines Logins ad absurdum führen. Um clientseitig zu überprüfen, ob eine gültige Name/Kennwort-Kombination eingegeben wurde, muss der Client eine Liste mit gültigen Pärchen haben.

Diese Liste kann dann aber auch jeder unbefugte Nutzer einsehen und sich dann eben als Klaus Schweinebacke^[1] mit dem Kennwort yippiyayee anmelden, wenn das eine gültige Kombination ist.

Live long and pros healthy,
 Martin

---

1. Ja, ich weiß auch, wie es im englischen Original heißt. ↩︎

[Mitleser 2.0]

…dann eben als Klaus Schweinebacke (1) mit dem Kennwort yippiyayee anmelden…
(1) Ja, ich weiß auch, wie es im englischen Original heißt.

Das sagte mir gerade überhaupt nichts und musste recherchieren. LOL, YMMD.

[Rolf B]

Hallo Lenhartz,

du schriebst anderswo:

Ich sitze gerade an einem kleinen Versuch: der Button ist zum Anfang deaktiviert und durch das richtige Wort in der Textbox soll er freigeschaltet werden. Ich benutze HTML und möchte das auch damit geregelt haben.Geht das und wenn ja hat jemand eine ergänzung parat?

<label for="bar"><b>Text</b></label>
      <input type="Text" placeholder="Text" name="bar" required pattern="Brokkoli">

      <button type="submit" disabled>Login</button>

DER BUTTON SOLL AKTIVIERT WERDEN WENN Brokkoli INS FELD EINGETRAGEN WIRD

Schrei nicht so 😉. Fettschrift erreichst Du durch Sternchen: **fett** ergibt fett

Das Aktivieren und Deaktivieren des Buttons erreichst Du nur mit JavaScript. Wenn Du es tatsächlich basierend auf der Pattern-Validierung steuern willst, musst Du die checkValidity Methode zur Prüfung verwenden

Wieviel JavaScript kannst Du?

Aber wie ich Dir schon schrieb: Das ist der falsche Weg. Überlass die Prüfung dem Server, verrate dem Anwender nicht während des Tippens ob er richtig liegt. Das ist ein Sicherheitsloch. Und das Passwort als Pattern abzulegen ist grober Unfug. Alles, was vom Server in den Browser geladen wird, kann vom Benutzer betrachtet und ggf. auch geändert werden.

Wie man den Login-Button aktiviert, wenn die Gültigkeitsregeln erfüllt sind, kannst Du Dir im verlinkten Fiddle angucken. Ich war vorhin im Irrtum, das Event heißt input, nicht change. Ich verwechsle die beiden ständig 😉

https://jsfiddle.net/Rolf_b/tjwbpL4c/

Wichtig ist: Der Button darf nicht durch HTML deaktiviert werden, sondern das muss das Script tun. Grund: Falls das Script nicht ausgeführt wird, würde der Button nie aktiv werden. Das nennt man progressive enhancement.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wie man den Login-Button aktiviert, wenn die Gültigkeitsregeln erfüllt sind, kannst Du Dir im verlinkten Fiddle angucken.

Und warum man genau das nicht tun sollte, kannst du dir auf Seite 63 in Form Design Patterns von Adam Silver ankucken.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wie man den Login-Button aktiviert, wenn die Gültigkeitsregeln erfüllt sind, kannst Du Dir im verlinkten Fiddle angucken.

Und warum man genau das nicht tun sollte, kannst du dir auf Seite 63 in Form Design Patterns von Adam Silver ankucken.

Heute im Smashing Newsletter: ein Link zu Disabled buttons suck

🖖 Stay hard! Stay hungry! Stay alive! Stay home!