Redis使用验证码

Redis使用验证码

前后端分离使用EasyCaptcha验证码

EasyCaptcha链接：

EasyCaptcha: Java图形验证码，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。?_from=gitee_search

一、环境引用

1. xml引入验证码及redis依赖

<!--验证码-->
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
<!--reids-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
<version>2.7.13</version>
</dependency>

1. yml配置redis

   redis:
   password: #密码
   host: localhost
   port: 6379

   host本机地址，post端口号 password连接redis的密码（我docker运行redis是没有设置密码，password可注释掉）

二、后端生成验证码

1. 注入RedisTemplate

   @Autowired
   RedisTemplate redisTemplate;

2. 后端生成验证码

       @GetMapping("/user/captcha")
       public ResultBean captcha() {
           //产生验证码图片大小及长度130 宽  48 长 4 验证码长度
           GifCaptcha captcha=new GifCaptcha(130,48,4);
           //验证码的值
           String code=captcha.text();
           Map map =new HashMap<>();
           String key= UUID.randomUUID().toString().toLowerCase();
           map.put("key",key);
           //img标签可以解码base64格式显示图片
           map.put("captcha",captcha.toBase64());
           redisTemplate.opsForValue().set(key,code,5, TimeUnit.MINUTES);
           return success("验证码",map);
       }

3. 登录验证

   //前端传过来的自己输入的验证码
   String verCode= login.getVerCode();
   //前端自己产生的验证码
   String aa=login.getVerKey();
   //从redis取出验证码根据verkey取出vercode
   String ver_Code= (String) redisTemplate.opsForValue().get(aa);
   //判断验证码是否相等
      if(verCode==null||"".equals(verCode)||!ver_Code.equalsIgnoreCase(verCode)){
         return fail(("验证码不正确！"));
      }

   最后别忘了把登录的Javabean加上VerCode、VerKey，否则后端将前端数据转换为javabean形式接收，会收不到VerCode、VerKey的值

三、前端页面（vue3组合式）

1. 前端接口

   verification:"/api/sys/user/captcha"//产生验证码
   export function verification(){
       return http.get(Apis.verification,{});
   }

   api/sys自己项目接口路径的前缀

2. 前端页面

   <el-form ref="loginForm" label-width="90px" :model="user" :rules="rules">
   <el-form-item label="用户名" prop="username">
   <el-input class="ipt" placeholder="请输入用户名" v-model="user.username" />
   </el-form-item>
   <el-form-item label="密码" prop="password">
   <el-input type="password" class="ipt" placeholder="请输入密码" v-model="user.password" />
   </el-form-item>
   <el-form-item label="验证码" prop="verCode">
   <el-input class="ipt" placeholder="请输入验证码" v-model="user.verCode" style="width: 220px;" />
   <img :src="src" @click="clk">
   </el-form-item>
   </el-form>

   //定义响应式对象 
   //登录绑定数据
   import {
       ref,
       reactive,
       onBeforeMount
   } from "vue";
   import {
       ElMessage
   } from 'element-plus'
   import {
       userLogin,
       verification
   } from '@/api'
   const user = reactive({
       username: "",
       password: "",
       verCode: "",
        verKey:"",
   });
   //要求与form表单中的ref值一样  
   const loginForm = ref(null);
   //刷新次数
   const clkNum = ref(0);
   //产生的验证码
   const src = ref(null);
   async function clk() {
    //默认刷新0次，每次点击验证码重新产生新的验证码，当刷新10次不能在重新产生验证码，需要刷新页面
   clkNum.value++;
   if (clkNum.value < 11) {
        //刷新一次调用一次产生验证码方法
       getverCode();
       return;
       }
           ElMessage({
               message: "请勿重复操作,请刷新页面",
               type: "warning"
           });
       }
   //产生验证码
   async function getverCode() {
   const res = await verification();
   src.value=res.data.captcha;
   user.verKey=res.data.key;
   }
   /*********生命周期****** */
           onBeforeMount(() => {
                });

要将getverCode放到生命周期里面，注意引入产生验证码的接口和引入相对于的vue包

登录页面

 

验证码样式有很多，可根据上面链接自行调试