Login Versuche und Redirect

Question

Ich habe einen Code für eine Login-Seite erstellt. Was ich will ist, wenn der Benutzername und das Passwort korrekt sind, dann gehe auf die Home.html Seite. Andernfalls bleiben Sie auf der Login-Seite, aber geben Sie dem Benutzer nur 3 Versuche, sich anzumelden. Ich kann nicht herausfinden, was falsch ist, da es nicht zählt, wie viele Versuche ich mache, noch wird es auf die Home.html-Seite umgeleitet wenn ich es richtig verstehe.

var counter = 0; 
 

 
function checkdetails() { 
 
    var name = "", 
 
    password = ""; 
 

 
    name = form1.txtusername.value 
 
    password = form1.txtpassword.value 
 

 
    if (name == "Shauna" && password == "8nss") { 
 
    window.alert("Both right") 
 
    window.location.replace("Home.html"); 
 

 
    form1.txtusername.value = "" 
 
    form1.txtpassword.value = "" 
 

 
    } else if (name == "Shauna" && password != "8nss") { 
 
    window.alert("Incorrect Password.") 
 
    counter = counter + 1 
 

 
    window.alert(3 - counter + " attempts left") 
 
    form1.txtusername.value = "" 
 
    form1.txtpassword.value = "" 
 

 
    } else if (name != "Shauna" && password == "8nss") { 
 
    window.alert("Incorrect Username") 
 
    counter = counter + 1 
 

 
    window.alert(3 - counter + " attempts left") 
 
    form1.txtusername.value = "" 
 
    form1.txtpassword.value = "" 
 
    } else if (name != "Shauna" && password != "8nss") { 
 
    window.alert("Both Wrong") 
 
    counter = counter + 1 
 

 
    window.alert(3 - counter + " attempts left") 
 
    form1.txtusername.value = "" 
 
    form1.txtpassword.value = "" 
 
    } 
 
    if (counter == 3) { 
 
    window.alert("Incorrect details - Login failed") 
 
    window.close() 
 
    } 
 

 
}

<form action="" method="post" name="form1" onsubmit="checkdetails()"> 
 
    <table bgcolor="white" width="500" border="0" align="center"> 
 
    <col width="200"> 
 
     <col width="200"> 
 

 

 
     <tr> 
 
      <th colspan="2" align="center" bgcolor="grey">Login</th> 
 
     </tr> 
 

 

 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" align="center">Username</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td colspan="2" align="center"> 
 
      <label> 
 
       <input type="text" name="txtusername" id="txtusername" class="info" required/> 
 
      </label> 
 
      </td> 
 

 
      <tr> 
 
      <td>&nbsp;</td> 
 
      </tr> 
 
      <tr> 
 
      <td colspan="2" align="center">Password</td> 
 
      </tr> 
 

 

 
      <tr> 
 
      <td colspan="2" align="center"> 
 
       <label> 
 
       <input type="password" name="txtpassword" id="txtpassword" class="info" required/> 
 
       </label> 
 
      </td> 
 
      </tr> 
 

 

 

 
      <tr> 
 
      <td>&nbsp;</td> 
 
      </tr> 
 

 

 
      <tr> 
 
      <td colspan="2"> 
 
       <label> 
 
       <input type="checkbox" name="terms" value="terms" id="terms" />Remember Me</label> 
 
      </td> 
 
      </tr> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <tr> 
 
      </tr> 
 

 

 
      <tr> 
 
      <td>&nbsp;</td> 
 
      </tr> 
 

 
      <tr> 
 
      <td> 
 
       <label> 
 
       <input type="submit" name="Login" id="Login" value="Login" /> 
 
       </label> 
 
      </td> 
 
      <td> 
 
       <label> 
 
       <input type="reset" name="Reset" id="Reset" value="Reset" /> 
 
       </label> 
 
      </td> 
 
      </tr> 
 
    </table> 
 
</form>

Answer 1

Hier ist eine Möglichkeit zu tun, was Sie versuchen, über JavaScript zu tun. Ich bearbeite das On-Submit des Formulars und benutze JavaScript, um es zu validieren und true oder false an den Handler zurückzugeben, je nachdem wie gut es validiert wurde. Ich habe auch einiges an Code-Aufwand entfernt und die Logik vereinfacht.

NB dies ist eine sehr schlechte Art der Handhabung von Logins und Client-Seite Validierung von Login-Versuchen, aber da es nur für eine Aufgabe Aufgabe ist, ist dies nur eine Möglichkeit zu tun, was Sie brauchen.

<meta charset="UTF-8"> 
<script> 
var remainingAttempts = 3; 

function checkDetails() { 
    var name = form1.txtusername.value; 
    var password = form1.txtpassword.value; 
    console.log('name', name); 
    console.log('password', password); 
    var validUsername = validateUsername(name); 
    var validPassword = validatePassword(password); 
    if (validUsername && validPassword) { 
     alert('Login successful'); 
    } else { 
     form1.txtusername.value = ''; 
     form1.txtpassword.value = ''; 
     remainingAttempts--; 

     var msg = ''; 
     if (validPassword) { 
      msg += 'Username incorrect: '; 
     } else if (validUsername) { 
      msg += 'Password incorrect: '; 
     } else { 
      msg += 'Both username and password are incorrect: '; 
     } 

     msg += remainingAttempts + ' attempts left.'; 
     alert(msg); 

     if (remainingAttempts <= 0) { 
      alert('Closing window...'); 
      window.close(); 
     } 
    } 

    return validUsername && validPassword; 
} 

function validateUsername(username) { 
    return username == 'Shauna'; 
} 

function validatePassword(password) { 
    return password == '8nss'; 
} 
</script> 

<form id="form1" name="form1" method="post" action="Home.html" onsubmit="return checkDetails();"> 
<table> 
<tr> 
<th colspan="2" align="center" bgcolor="grey">Login</th></tr> 
Username 
<tr><td colspan="2" align="center"><label><input type="text" name="txtusername" id="txtusername" class="info" required /></tr> 
<tr><td>&nbsp;</td></tr> 
<tr><td colspan="2" align="center">Password</td></tr> 
<tr> 
    <td colspan="2" align="center"><label> 
    <input type="password" name="txtpassword" id="txtpassword" class="info" required/> 
    </label></td> 
</tr> 
<tr> 
    <td colspan="2"> 
     <label> 
     <input type="checkbox" name="terms" value="terms" id="terms"/>Remember Me</label> 
    </td> 
</tr> 
<br><br><br> 
<tr> 
</tr> 
<tr> 
    <td> 
     <label> 
     <input type="submit" name="Login" id="Login" value="Login"/> 
     </label> 
    </td> 
    <td> 
     <label> 
     <input type="reset" name="Reset" id="Reset" value="Reset" /> 
     </label> 
    </td> 
</tr> 
</table> 
</form> 

Answer 2

Wenn Sie in JavaScript umleiten Benutzer möchten, sollten Sie

function Redirect() { 
    window.location="http://target.url"; 
} 

diese Assimilated tun, ist töricht verwalten Login in JavaScript, so denke ich Ihnen etwas lesen sollte, die Unterschiede erklären zwischen clientseitigem und serverseitigem ausgeführtem Code.

BEARBEITEN. Zur Verwaltung der maximalen dreimaligen Anmeldung können Sie Daten in Local Storage speichern

Answer 3

eine Grenze für Login-Versuche auf dem Client-Ende Erzwingen ist ein ernsthaftes Sicherheitsproblem. Ich schrieb Scraper, die reverse-engineering, was das JavaScript auf einer Seite tat und übermittelte gültige Anfragen. Ein Programmierer könnte leicht ein Skript schreiben, das curl verwendet, um weiterhin Benutzernamen/Passwort-Kombinationen auszuprobieren, bis sie Erfolg haben, ohne sich um JavaScript zu kümmern. Sie sollten sicherstellen, dass der Server übermäßige Anmeldeversuche blockiert, bevor Sie sich Gedanken darüber machen, wie das Client-Ende funktioniert.