手把手教你验证码检验的登录

旧城等待， 2024-03-25 20:31 21阅读 0赞

在网站实际应用过程中，为了防止网站登录接口被机器人轻易地使用，产生一些没有意义的用户数据，所以，采用验证码进行一定程度上的拦截，当然，我们采用的还是一个数字与字母结合的图片验证码形式，后续会讲到更加复杂的数字计算类型的图片验证码，请持续关注我的博客。

### 实现思路 ###

博主环境：springboot3 、java17、thymeleaf

1.  访问登录页面
2.  登录
    
     *  验证验证码
     *  验证账号、密码
     *  验证成功时，生成登录凭证，发放给客户端
     *  验证失败时，跳转回登录信息，并保留原有填入信息
3.  退出
    
     *  将登录凭证修改为失效状态
     *  跳转至首页

访问登录页面的方法已经在前文说明过了，就不多加赘述了，展示一下代码：

// 登录页面
    @RequestMapping(path = "/login", method = RequestMethod.GET)
    public String getLoginPage() {
        return "/site/login";
    }
    复制代码

访问完登录页面，我们就要进行信息输入，然而，现在，还没有把验证码信息正确展现出来，所以，接下来，我们先来实现验证码的部分。

所需两个数据表 SQL 代码如下：

-- user表
    DROP TABLE IF EXISTS `user`;
     SET character_set_client = utf8mb4 ;
    CREATE TABLE `user` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(50) DEFAULT NULL,
      `password` varchar(50) DEFAULT NULL,
      `salt` varchar(50) DEFAULT NULL,
      `email` varchar(100) DEFAULT NULL,
      `type` int(11) DEFAULT NULL COMMENT '0-普通用户; 1-超级管理员; 2-版主;',
      `status` int(11) DEFAULT NULL COMMENT '0-未激活; 1-已激活;',
      `activation_code` varchar(100) DEFAULT NULL,
      `header_url` varchar(200) DEFAULT NULL,
      `create_time` timestamp NULL DEFAULT NULL,
      PRIMARY KEY (`id`),
      KEY `index_username` (`username`(20)),
      KEY `index_email` (`email`(20))
    ) ENGINE=InnoDB AUTO_INCREMENT=101 DEFAULT CHARSET=utf8;
    
    -- 登录凭证表
    DROP TABLE IF EXISTS `login_ticket`;
     SET character_set_client = utf8mb4 ;
    CREATE TABLE `login_ticket` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `user_id` int(11) NOT NULL,
      `ticket` varchar(45) NOT NULL,
      `status` int(11) DEFAULT '0' COMMENT '1-有效; 0-无效;',
      `expired` timestamp NOT NULL,
      PRIMARY KEY (`id`),
      KEY `index_ticket` (`ticket`(20))
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    复制代码

### Kaptcha 验证码设计和校验 ###

目前使用图片验证码较为广泛的是 Kaptcha ，它只有一个版本：2.3.2，值得注意的是，在 springboot 3的环境下，使用该插件包大部分会使用到的 http 包，不能导入 javax 包内的，而是应该导入jakarta 包内的。

它能够实现以下效果：水纹有干扰、鱼眼无干扰、水纹无干扰、阴影无干扰、阴影有干扰