SpringBoot-04--整合登录注册动态验证码

效果展示

效果，每次进入页面展现出来不同的验证码。

技术 使用别人已经写好的验证码生成器，生成图片，转为Base64编码，将验证码存在Redis里面。前端根据传过来的验证码进行登录。登录完成之后将redis里面的验证码删除。

1.导入maven坐标

	<dependency>
			<groupId>com.github.whvcse</groupId>
			<artifactId>easy-captcha</artifactId>
			<version>1.6.2</version>
		</dependency>

easy-captcha 生成验证码的工具。

2.编写代码生成一个验证码图片

import com.wf.captcha.SpecCaptcha;

import java.io.FileOutputStream;
import java.io.IOException;

public class CaptchaExample {
    //将验证码传给前端 存储验证码 用户登录的时候 输入验证码进行比较
    public static void main(String[] args) throws IOException {
        // 创建一个SpecCaptcha对象，参数为宽度、高度、验证码字符数
        SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);

        // 设置验证码类型为数字+字母组合
        captcha.setCharType(SpecCaptcha.TYPE_DEFAULT);

        // 获取生成的验证码字符
        String text = captcha.text();
        System.out.println("验证码: " + text);

        // 输出验证码图片到文件
        FileOutputStream fos = new FileOutputStream("captcha.jpg");
        captcha.out(fos);
        fos.close();
    }
}

生成的验证码图片

3.前端如何拿到验证码

我们后端生成的是一个图片，可以将图片转为字符串即Base64编码的格式，前端通过image标签就可以展示图片。

4. 后端生成验证码

编写两个API, 在页面夹在的时候请求验证码。前端使用钩子函数。后端将验证码存在Redis里面。

那么如何保证每个用户都有不同的验证码，可以生成一个唯一的ID，这里用的是UUID，保证了用户的唯一性。

import java.io.FileOutputStream;
import java.io.IOException;
import java.util.UUID;
import java.util.concurrent.TimeUnit;

@RestController
public class LoginController {

    @Autowired
    private RedisTemplate<String, Object> redisTemplate;

    public static final String prefixCode = "njitzx:";

    //首先先请求一个code
    @GetMapping("/code")
    public Result getCode() throws IOException {
        SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);

        // 设置验证码类型为数字+字母组合
        captcha.setCharType(SpecCaptcha.TYPE_DEFAULT);

        String base64 = captcha.toBase64();


        // 获取生成的验证码字符
        String text = captcha.text();
        System.out.println("验证码: " + text);


        // 输出验证码图片到文件
        FileOutputStream fos = new FileOutputStream("captcha.jpg");
        captcha.out(fos);
        fos.close();

        //生成一个临时用户的id 对应每一个用户的验证码
        String uuid = UUID.randomUUID().toString();

        redisTemplate.opsForValue().set(prefixCode + uuid, text, TimeConstant.CODE_TIME, TimeUnit.DAYS);

        return Result.success(new CodeVo(uuid, base64));
    }

    @GetMapping("/login")
    public Result login(LoginDTO loginDTO) {
        String code = loginDTO.getCode();

        String key = prefixCode + loginDTO.getUuid();
        String getCode = (String) redisTemplate.opsForValue().get(key);

        if (getCode == null) {
            throw new RuntimeException("验证码已过期");
        }

        if (!getCode.equalsIgnoreCase(code)) {
            throw new RuntimeException("验证码错误");
        }
        redisTemplate.delete(key);
        return Result.success("登录成功");
    }
}

5前端代码

前端 用了vue3+element组件开发

<script setup>
import {ref} from "vue";

import {Search} from '@element-plus/icons-vue'
import {onMounted} from 'vue'
import {ElMessage} from 'element-plus'

onMounted(() => {
  reloadCode();
})
import {getCode,UserLogin} from '@/util/user.js'

const reloadCode = async () => {
  const res = await getCode();
  url.value = res.data.data.codeURL;
  loginData.value.uuid = res.data.data.uuid;
}

const loginData = ref({
  username: '',
  password: '',
  code: '',
  uuid: ''
})
// const url =data:image/png;base64,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 ref"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");
// const url = ref('data:image/png;base64,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')
const url = ref('')
import {useRouter} from 'vue-router'

const router = useRouter()

const login = async () => {
  const res = await UserLogin(loginData.value)
  if (res.data.code == 200) {
    ElMessage.success('登录成功')
    router.push('/container')
  } else {
    ElMessage.error(res.data.msg)
  }
}
</script>

<template>
  <el-form :inline="true">
    <el-form-item>
      <el-input
          v-model="loginData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
      />
    </el-form-item>
    <el-form-item>
      <el-input
          v-model="loginData.password"
          style="width: 240px"
          type="password"
          placeholder="Please input password"
          show-password
      />
    </el-form-item>

    <el-form-item>
      <el-input
          v-model="loginData.code"
          style="width: 120px"
          placeholder="输入验证码"
          :suffix-icon="Search"
      />
      <el-image :src="url" style="width: 120px;height: 40px"/>

    </el-form-item>

  </el-form>


  <!--  <el-button type="success" @click="()=>{router.push('/container')}">Login</el-button>-->
  <el-button type="success" @click="login()">Login</el-button>

</template>

<style scoped>

</style>

请求的js代码

import request from '@/util/request.js'

export const getCode = () => {
    return request.get('/code')
}

export const UserLogin = (data) => {
    var params = new URLSearchParams();
    for (let key in data) {
        params.append(key, data[key])
    }
    return request.get('/login', {params})
}

不传验证码会报错。验证码过期会显示验证码已经过期

Redis图形化界面：