Springboot+redis实现手机短信验证功能

2023-12-07 13:59:37 浏览数 (3)

项目创建

spring initializr 地址:https://start.springboot.io

添加依赖

因为我这里是学习阶段 没用官方的redis集成依赖

业务需求

用户在客户端输入手机号,点击发送后随机生成4位数字码。有效期为60秒。 输入验证码,点击验证,返回成功或者失败。 且每个IP地址。在5分钟内只能验证3次。并给相应信息提示。锁定这个IP 12小时。

需求流程

需求1流程: 后台Redis生成一个KEY,value:验证码4位数字码。 (过期时间60秒) expire。 前端用户输入的验证码和后台生成的Redis key验证码进行比较, 如果不相等: 验证码校验失败, 如果相等:恭喜你,注册成功。

代码语言:javascript复制
spring:
  redis:
    database: 0
    host: 192.168.190.145
    password: 317311
    port: 6379
    timeout: 2000
    jedis: # jedis连接池配置
      pool:
        max-idle: 10
        min-idle: 0
        max-active: 10
        max-wait: 2000

config配置类

代码语言:javascript复制
@Configuration
@ConfigurationProperties(prefix = "spring.redis")
public class JedisConfig {
    /**
     * 数据库
     */
    @Value("${spring.redis.database}")
    private int database;
    /**
     * ip地址
     */
    @Value("${spring.redis.host}")
    private String host ;
    /**
     * 密码
     */
    @Value("${spring.redis.password}")
    private String password;
    /**
     * 端口号
     */
    @Value("${spring.redis.port}")
    private int port;
    /**
     * 等待时间
     */
    @Value("${spring.redis.timeout}")
    private int timeout;
    /** 最大连接数*/
    @Value("${spring.redis.jedis.pool.max-active}")
    private int maxActive;
    /** 最大空闲数*/
    @Value("${spring.redis.jedis.pool.max-idle}")
    private int maxIdle;
    /** 最小空闲数*/
    @Value("${spring.redis.jedis.pool.min-idle}")
    private int minIdle;

    /**
     *  jedis连接池的配置 (得到jdbc连接池)
     * @return
     */
    @Bean
    public JedisPool jedisPool(){
        /*
           连接池的配置
         */
        JedisPoolConfig poolConfig = new JedisPoolConfig();
        poolConfig.setMaxIdle(maxIdle);
        poolConfig.setMinIdle(minIdle);
        poolConfig.setMaxTotal(maxActive);

        JedisPool jedisPool = new JedisPool(poolConfig,host,port,timeout,password);

        return jedisPool;
    }

}

controller层

代码语言:javascript复制
@RestController
@Slf4j
public class PhoneValidateController {
    /**
     * 手机验证码过期时间
     */
    static int PHONE_NUMBER_CODE_EXPIRE_SECONDS=60;
    /**
     * redis连接池
     */
    @Autowired
    private JedisPool jedisPool;
    /**
     * 生成四位数验证码
     * @return 验证码
     */
    public int  generatorCode(){
        return (int) (Math.random()*10000);
    }

    /**
     * 获取验证码
     * @param phone 手机号码
     * @return
     */
    @RequestMapping("/getValidataCode")
    public String getValidataCode(String phone){
        // 随机生成的验证码
        String verificationCode= String.valueOf(generatorCode());
            String key = "phone:code:" phone;
        // 得到jedis连接
        Jedis jedis = jedisPool.getResource();
        // 不存在 设置key 存在 验证value
        if (!jedis.exists(key)){
            log.info("验证码已发送" verificationCode);
            jedis.setex(key,PHONE_NUMBER_CODE_EXPIRE_SECONDS,verificationCode);
            jedis.close();
            return "验证码已发送";
        }else {
            Long timeNum = jedis.ttl(key);
            if (timeNum==-2){
                jedis.del(key);
            }
            jedis.close();
            return "验证码获取失败,请避免重复获取 还剩" timeNum "秒";
        }
    }

    /**
     * 验证验证码
     * @param phone 手机号码
     * @param verificationCode  用户输入的验证码
     * @return
     */
    @GetMapping("/verifyVerificationCode")
    public String verifyVerificationCode(String phone,@RequestParam("code") String verificationCode){
        //获取jedis连接
        Jedis jedis = jedisPool.getResource();
        String key = "phone:code:" phone;
        String code = jedis.get(key);
        if (code.equals(verificationCode)){
            return "登陆成功";
        }else {
            return "验证码错误";
        }
    }
}

前端页面

我这里的前端页面很简陋 本人技术有限 需要导入jquery依赖

代码语言:javascript复制
<!DOCTYPE html>
<!-- saved from url=(0092)http://localhost:63342/redis_code/01-jedis/static/index.html?_ijt=328ftjtejq6t0jsch7q5m3q0pu -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>注册</title>
    <script src="./jquery-1.9.1.min.js"></script>
    <style>
        #mydiv{
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="mydiv">

        <p>注册手机号:</p>
        <input name="phone" id="phone">
        <p>验证码:</p>
        <input name="code" id="code"> <button id="getCode">获取验证码</button>
        <p><button id="sub" >提交</button></p>

</div>
<script>
// 获取验证码
    $("#getCode").click(function () {
        console.log($("#phone").val())
        $.ajax({
            url:"/getValidataCode",
            type:"get",
            data:"phone=" $("#phone").val(),
            success:function (result) {
                console.log(result)
                $("#getCode").text(result);
            }
        })
    })
//    验证 验证码
    $("#sub").click(function () {
        $.ajax({
            url:"/verifyVerificationCode",
            type:"GET",
            data:"phone=" $("#phone").val() "&code=" $("#code").val(),
            success:function (result) {
                alert(result)
            }
        })
    })
</script>

</body></html>```

1 人点赞