怎样申请个人网站,推广普通话写好规范字手抄报内容,wordpress字母头像,自己做的网站给人攻击了怎么办一、验证码
一般来说#xff0c;网站在登录的时候会生成一个验证码来验证是否是人类还是爬虫#xff0c;还有一个好处是防止恶意人士对密码进行爆破。
二、流程图 三、详细说明
3.1 后端生成验证码
Override
public ResultMapString, String getVerifica…一、验证码
一般来说网站在登录的时候会生成一个验证码来验证是否是人类还是爬虫还有一个好处是防止恶意人士对密码进行爆破。
二、流程图 三、详细说明
3.1 后端生成验证码
Override
public ResultMapString, String getVerificationCode() {// HuTool 定义图形验证码的长和宽, 验证码的位数干扰线的条数// 线段干扰的验证码LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(116, 36, 4, 50);String uuid UUID.randomUUID().toString();String verificationCodeKey VerificationCode: uuid;// 存到 redis 中ValueOperationsString, String ops redisTemplate.opsForValue();ops.set(verificationCodeKey, lineCaptcha.getCode());// 设置 15 分钟的过期时间redisTemplate.expire(verificationCodeKey, 15, TimeUnit.MINUTES);MapString, String map new HashMap(2);map.put(verificationCodeBase64, lineCaptcha.getImageBase64());map.put(uuid, uuid);return Result.success(map);
}记得设置验证码过期时间否则每一次生成验证码都会在 redis 里面产生数据造成内存浪费。 返回给前端的 json
{code: 200,msg: 操作成功,data: {uuid: bc814884-fffb-4943-834a-40cc92decfa6,verificationCodeBase64: iVBORw0KGgoAAAANSUhEUgAAAHQAAAAkCAYAAABYFB7QAAAFtUlEQVR4Xu3YfUxVdRjAcW0zM6atSX84X1JhleMPI6VmtcxexFZs5qq5/mhNpxKV06TMiQrpVssxopClZr7QdFCycutFpmn4QhgkAJ2GaK8eUWUCxeIe70vT/f33J2zc557zr33nPM7B1C2zPvPc9BNz4751zvGBjttmoMPTCavrzxc3CGOgR9p/klepxbr/WRw8N2wq3ZeMYaahhxSuUoeqFdTRPxFHLCtS3en8Xh5ZxLlM2t3Nht9w3FteFTawJsEq4DHXem/eEjZkdyX8puEN7c5ZDkHNokTa2/f/7Fs9BQGyisprhRYuFrnl/yGQ4HNRlZr3MI8cXgCU1w16E83bpe9ZkBNg2URmGFBNjhlBSXjVlRXIaqBKsly0CjNRxhhXgCv3rykjhqGUFF0H/yxmsaXvmvJOOMtHjhFqUVgO3uVTEhx5pmUNuuBjfoTsKtOGkzh3Qr0lFxCTjTSjuDHfcrvr9iGoqkYXXFPgB2OuCsnpNFDmnOVVsO/cemKoEaLCXSwqxYavpwEV09k0JXp8cId15uKYzRDoD4/XM8qBdv41SKm5aABvxcuFc0H7p4Pf00rUpJazbKhshs2CffPlF2ftI6QXtL6uH5uRsEfHygh1DA3qjKhdvtc76g3RlOPoMVYsCU2itBQIAcZVrIX73fpiS8wvM3HgWZqz7GR5atQvs1wbo6bCsY6z4moK2LUzEiZZ4RU5YA52ZxRAYvGU9qO/ruCHoHhoOjg3Fvw0bXhYgVVSw9wv9sHKw80wNTMM4ozbcNpSF7Pv2xqAmwasDsNtu29Ctw17bh7FnvhVB2WteRQR1nM7Eq7PHdhjfZ8EzOGqlTdf2izAKqqe1RwIN2dLBewt74AOpxvcXj/YrvZDepENdwmbzkHK0tc13YppFNZjd0i2oaRXKEOloydVUJ/bCbaCyWDfMyN4cXpkOwE2Em4sRQPtnfUBPWSoi60uBEsMgjFAGrsVC1fv5tImuuaepbfcrr924tV5vSLytxZGcKOBshgqL9icY82I9dmvVhKrK69D895fMcFuuKedaDB52Xj3tnQkB8H3oFOulVNK6waqMN/Fz3EBTU17yJi1bT20RVsHrst5uGVZaD9rafx6rzywxLxWNe0BZIzKQGylJCNdrc7D8R1DWo/wNeR9kUHB5ZBuo4tR5Bb9YUyo7zRo0EymKoPGEf/Ogsgvr8AbqSlfrwCtkoJcAaAbYMtPGbBAS95Qp9xJbGUHnBUtD8Nd9JtqHW5D0njtEeyTqPoH1ubVcoBVZC1gNsCaj7Rj1iNh16jK5k8UAVQNsLs3BYDFUJliXF1QO8aGc1gta2hz9Dha67PHhO8ieVP7dtqdxtBYLrCWg3bV7EbSjjO8/pBS9QgVYYdRghbQCbyhuRKz8E610JfZ9VSees/qQTXZcgNWDq5YloOwLeAbaXfM1XXGPgtIocLSi4Z5v6kGspK0V0O500zUMeHyw8PMqPOd4/U265p4loJeLn0XQ/tZTdMW9aKA0LbhqrdgfuJg3vZKOFrdCc4BL37qLW90wgu5fNuWWEt/TFTsgTUvmcmgnq67XTFPSXQpJRZsuGda9CLYAxOadhzlj1Hrch00Lh9BVDzxb0I6ve4pCtTUgKlUWAtyMltcYrzaMtEOFx5DWHZd7pTPyzHW23u8Rb88t6qTAcVYrBszM0fAm1JoYuwls/OxuEZRU44VYLDXlvdkUk/ysZIiqBCAqwpuL4bIdDWRXSjmhpsYfUJ2RhJgFWqc/F9OGZnBDciqDRusEFICLgh0LMnBOoI/096tNRghSiwUWRaJNi6pFdwhqqYQfkUvM22PCUO9kEo7Sk0ZMAiybjDyxWEJsFYDWwvqdYC/PS2IkTwzyXBq3QfPWPEJr1qpbgU2EiTlyXgRMpa0DukLeWJsuFdJNhR0BGcEuwo6G3W/2buccxVrdRAAAAAAElFTkSuQmCC}
}Base64 是一种用于将二进制数据编码为 ASCII 字符的编码方法我们这边用这个编码传递验证码图片数据在 verificationCodeBase64。
3.2 前端生成验证码图片
3.2.1 获取验证码 Base64 并且拼接
const updateVerificationCodeImage async () {// 图像类型const imageType image/png;const res await userGetVerificationCodeApi();if (res.data) {if (res.data.data) {verificationCodeBase64.value res.data.data.verificationCodeBase64;uuid.value res.data.data.uuid;// 拼接 Base64 图像数据verificationCodeImageSrc.value data:${imageType};base64,${verificationCodeBase64.value};}}
};3.2.2 渲染到页面上
div classverificationCode-classimg :srcverificationCodeImageSrc alt验证码加载失败 /el-link classmx-1 clickupdateVerificationCodeImage看不清楚, 换一张/el-link
/div3.3 前端用户点击登录
登录表单的数据加上 uuid 和验证码确保唯一性。
const form reactive({username: ,password: ,uuid: ,verificationCode: ,
});3.4 后端验证用户输入的验证码是否正确
Override
public ResultAppUserLoginVO userLogin(AppUserLoginDTO appUserLoginDTO) {if (Objects.nonNull(appUserLoginDTO)) {// 先对验证码进行核对ValueOperationsString, String ops redisTemplate.opsForValue();String uuid appUserLoginDTO.getUuid();String verificationCode appUserLoginDTO.getVerificationCode();String verificationCodeKey VerificationCode: uuid;// redis 里面存的验证码String redisVerificationCode ops.get(verificationCodeKey);if (!Objects.equals(verificationCode, redisVerificationCode)) {// 用户填入的验证码与 redis 中的不相同return Result.success(new AppUserLoginVO(), 登录失败验证码错误);} else {// 相同ops.getOperations().delete(verificationCodeKey);}}
}四、结果 五、参考资料
hutool-图形验证码
