三次输错密码后，系统是怎么做到不让我继续尝试的？

1故事背景

忘记密码这件事，相信绝大多数人都遇到过，输一次错一次，错到几次以上，就不允许你继续尝试了。

但当你尝试重置密码，又发现新密码不能和原密码重复：

图片

相信此刻心情只能用一张图形容：

图片

虽然，但是，密码还是很重要的，顺便我有了一个问题：三次输错密码后，系统是怎么做到不让我继续尝试的？

2我想了想，有如下几个问题需要搞定

是只有输错密码才锁定，还是账户名和密码任何一个输错就锁定？
输错之后也不是完全冻结，为啥隔了几分钟又可以重新输了？
技术栈到底麻不麻烦？

去网上搜了搜，也问了下ChatGPT，找到一套解决方案：SpringBoot+Redis+Lua脚本。

这套方案也不算新，很早就有人在用了，不过难得是自己想到的问题和解法，就记录一下吧。

顺便回答一下上面的三个问题：

锁定的是IP，不是输入的账户名或者密码，也就是说任一一个输错3次就会被锁定
Redis的Lua脚本中实现了key过期策略，当key消失时锁定自然也就消失了
技术栈同SpringBoot+Redis+Lua脚本

3那么自己动手实现一下

前端部分

首先写一个账密输入页面，使用很简单HTML加表单提交

<!DOCTYPE html>
<html>
<head>
 <title>登录页面</title>
 <style>
  body {
   background-color: #F5F5F5;
  }
  form {
   width: 300px;
   margin: 0 auto;
   margin-top: 100px;
   padding: 20px;
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }
  label {
   display: block;
   margin-bottom: 10px;
  }
  input[type="text"], input[type="password"] {
   border: none;
   padding: 10px;
   margin-bottom: 20px;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   width: 100%;
   box-sizing: border-box;
   font-size: 16px;
  }
  input[type="submit"] {
   background-color: #30B0F0;
   color: white;
   border: none;
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   width: 100%;
   font-size: 16px;
   cursor: pointer;
  }
  input[type="submit"]:hover {
   background-color: #1C90D6;
  }
 </style>
</head>
<body>
 <form action="http://localhost:8080/login" method="get">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  <label for="password">密码</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>
  <input type="submit" value="登录">
 </form>
</body>
</html>

效果如下: