登录尝试和重定向

Login attempts and redirect

本文关键字：重定向 登录      更新时间：2023-09-26

我已经为登录页面创建了一些代码。我想要的是，如果用户名和密码正确，则转到主页.html页面。否则，请停留在登录页面上，但只让用户尝试登录 3 次。我似乎无法弄清楚出了什么问题，因为它不计算我进行了多少次尝试，也不会在我正确时重定向到 Home.html 页面。

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>

这是通过JavaScript完成任务的一种方法。我正在处理表单的提交并使用 JavaScript 对其进行验证并向处理程序返回 true 或 false，具体取决于它的验证程度。我也删除了相当多的代码重复工作并简化了逻辑。

注意，这是处理登录和客户端验证登录尝试的一种非常糟糕的方法，但鉴于它仅用于分配练习，这只是执行所需操作的一种方法。 

<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>

在客户端强制限制登录尝试是一个严重的安全问题。我编写了抓取工具，对页面上的JavaScript进行了逆向工程，并提交了有效的查找请求。程序员可以轻松地编写一个脚本，该脚本使用curl不断尝试用户名/密码组合，直到它们成功，而无需担心您的JavaScript。在担心客户端的工作方式之前，应确保服务器阻止过多的登录尝试。

如果你想

在JavaScript中重定向用户，你应该这样做 

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

同化了这一点，在 JavaScript 中管理登录是愚蠢的，所以我认为你应该阅读一些解释客户端和服务器端执行代码之间差异的东西。

编辑。为了管理最多三次登录，您可以将数据存储在本地存储中

相关文章：