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 {@Autowiredprivate 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,iVBORw0KGgoAAAANSUhEUgAAAIIAAAAwCAIAAABSYzXUAAAP+ElEQVR42u1bC1BTVxp2pu12ut1O12m30+l0Ot1OO91Ot7O7Y6mtYx1rW12mOq116o6ta60PBkQE8cFjwRfVVaCiopUQiLyf0qAREHkJ8hAJhFd4Y0KA8H4EwRAgnP2OJ9yEEJK4be0rZ85kzjn3cE3+7/z/93//vS4gtvYzaAtsJrDBYGs2GGww2JoNhl8CDC0DA8L6+tKODoVKNaXV2gw0b9NOEpmQZH5CBH8gvAX0M/2fpCWeTKl/ABguSCSLeDzWl1+4sOHiRd/c3LDy8jyZrHNkxGZ8XRttJ8K3yZUPSJuIqPvoimaIKDIoEsl/pVe/JwzZra1e2dmbhcKV0dEcHlx/VyBwEImCS0uxrX9s7LeLQfzLpDaYOsTcVs+nSIzIfjBugKHFnZ2JtbWnSkqcrlwBBkaorImL88vPRxD7DTkKTA8/AAZmGkNi4s6PRdEwd0FbG7zBJT3dCJX1yclAC6SimZr6NcMAPkAsMukHho3xxAPIlGBuaW8vuMQtIwMswuHxfmQkXORXi0fGasoHFhvjiR8EBu00uSUbTasZLmi6g7F5SCRdXd+Wla1LTDRk+G+KixHWflUZFzIixskWDukQ3fk9YajpvLsupPXRHeUfBTd/fK7lFZ+aR5zKV51u4hX03RnXWgxcsdXVIPm3+HyGh31MDPBABqz/kmqNvFJellqWeT4zwi0ibEdYNj/7J7StkscrX7y4auXKthMn1DKz7MqzLn5Ma+lOhK+wR2m/8CQdlx0gw43WwhBV0v+QY/nrh6TNPePcIsZbIuULHMSPu1R4pHT0j05a/CbAI6qq6pP4eAbGsrO8fSGJEaeECQcTeQ68FL+UW8JbXU1d09PTqSdSsdIubX/wAEypVI2OjuJFi+R+fhqlEoOKpUu/rzfcTiFxL5LQBUR8iGg1ZKCKDuJfosCg33CaSy3GMFxvHIGtX/Sq7h0xYWihZOgx5wpseNq9MqNWZc3v7JX1igTZ59wFMPRZJ56nB2+Lf/iRjGxD57h69iquSq5KrLnh+DjZu5c4OBAnJ7JjB3FxIT4+pKLC4CBO0z3o1sRCJZ8P06Mrw8OHcnIwaN237//nBnU/yfyY2lq4mFxebnxVtEKHRKmHBRjeOCyFlQEGxkeuKJ/YJcEU0WlZQENKxRAWQRVYYT23YcQiBrAvOmJOU7X8QkUFEirmHAhZSLfSCiVVmVVxXnHYU5RYZA0MZWUUA3//e+ylJcXFdOrsTJTKGW+OoiusA6o9e8iZMyQlZZ7ccvNmBsNQXh5zi57YWKxPDAwAIdmBA/KjR/tSU4cLCycHB/WZkukDMkgSX6NWrjlN0TLKlEY7aHRiMMBXzMAgUYzBuG8fr8f46zQlxm8dq+eMjo54hUsO0XKGzQue1eapOycsh8HQKm7lFktrW47zhd7efDgHu8q6slFpDQywEuwrmjmR6enE1ZWuHDyoW/H1pdO6OgJ/q60lfn506uhI/cM4gE9NldvZgRVgfVVREcNjtKYGRmeLjQ4O/Wlp7UFBNFgtWaLTDd+9aVo3lOyhJi7eTXVD/J+pQ4Q/Rldg/fDHScRCHQZsxQwMsDLsuye5fVI7DQ5A/EkoG8TKq761z+6twuC5/VWMJzhgMqXmQhO4l5m4NrcWU2m+lB18o+7vwvvSj4csC7lWY3+/eRiCg6lZGxp0Uz6f7N9PQxMOPotIsDg2TM7EVLgC84zKSuNbqUpKmOkl777bGRLC2brZ1ZWtDwBknOOqKoylGzZYUNExz1MTVwZQ7Rb1J73R0XM+J5eX6aeCJ8zBgCjEjnxWnQqDRUfrgMTzHpQnxjRanH0sSpW0dLXQTcJg8BZ2mDFZuEs4M/T1yOuYFsUXcaZPOZpyI/ZG863mkrqWQ3l5hmIQeECOyIaGTN4T8QcWn57xwuPHKQxeXtQnaF7QSS2+a5d+Py6hYzE11fhWXQIBM7f88OG6jRsxaHF3py6yeHHlhx8CEq1GQ8ude/fiUm9S0qx6BnyC1ZQ0Q7oMNfRhamJWyUBqZAiDUW+OMwdDQGY3LCso6r9UOYQBklR8ns/vZVeRvGIKhDD+IKiJwbA5wlx6l3Y6jRkdA0ybSpowTjyYOD42Pld5XG5sBFsYFUtOFBbmyWRjExNsW3c3NeiJE/o/hB8AGE9PcuQIxYYxBzyAa6BxgYAunj9v/PUavvqKwYCIhOiEQe2nnwISDOAQiEXYM1ZXh2n1mjXGjA9XaE2mHMBVWMPvDVT3wq/kGB1HPk0zpTElaUsj0vMkbzO5uY/0SywkrEliGoI2CWSKQQ0XdsDJ7CrUA6Ysg4KLsKvYbAYGpKQMBsEuAaZtNW0YhzuHK2oVLWUtFWkVeYI8SAesGxayhPX1ezIzjYolWy9dQsiKzuiDQaOj9f/E2bPEzY0ef7gI42R8gqVZQ2jClNG4u/ts4Lu7uYgEE99taRkuKOiKiGjYvh2QAI/JYfrDb3t5YU/ffBQ/K3nwoaYHAKxVfUMpAbFoHq0wLwyQZqAE9G7VxLYoOTN0WCFNk4tbRzFecoKG5MZuNQfSvovmkn2ZRMZFIe2kVj2iZmNwBpJUZKihjqGY5kflm/zzIoUCus9Qma/9jxQG/fe5m6dKStKamiBNDCU6SBicfPMmUSh0K5gynmDZlGHrjolhMCAdmismpmcqMeXvvENhSE2dnvHIedsdBeE/QmlZeX0mf+2l2CBAZX1G+sT3oaJ9Uju5M+4c14bxM3sqj6V34RNaoar9LtY/47VinQkIhC8zdx9oH+Bg6KijLIJPVZ+e1WM9Y7mQZab1jI7C6H75+Vs8emHQJcHxhiUsKHZcglQs7egYUs966pKbS4MS+Bx/hahl2JpdXBgMYAXkpnAFdvyNlUBbW8e5c9X29pB1ENsWkEDMgUOEPkStf7d7BlU1qQ4i0c+SjI/0i+a9AeaGN+Ds69LqLnVwbs/upPaYmwODY/SAHLjcybnCawdrLVWFtRwMYGP9cZuYQiBC+sRgAJNbKXph050uBGzBqrxrQ9M/CLy6IiB9eaDo7bPRb/L47KEIgPHKzsYe3wCVp+/Et2ETgCEiYtatwMAMBsOOANW8ezfMrW5tNfqnm3buhGdYEuVqWgZnPAzPKHTWUQUNgipybR1JfJXKC/MwnM7pgXHhEGwq79eALdBBy5P3BIJYPsZh8KSrBBRi0XBcssSpM5x9Fou4fsn/klWVH6Ux0zI5bdi3OU2s95BxvrJlhxrTrU4aXPo48AbEI+BBoEMmVrLGfi4MXGclDWgIljXBIW77+rYY0ct8Io4JadbhGchWRzt0rJ70OilytQDDuhAabQqa6PMKfMItWLLEsiZEKvAzr6CPQwJji9+K1YvQr4VcYyucdABDXDxyMYuX1SfvswYGsZgaOjl5pnJzW8/Jhv2/AVMgFfD8mWt1mG7fN8TWl5yON+R8u5AQBw+PkPXrs5ctMwSg9J5wS9+48diNG9+dPDkLHqGwZWAAhGT5MReYIN1eD0bUM0R1Lxg0RlAvuaMwBwNkGoyrntCy8UOO5QhEENWc3V/0qsYK4wwmpOEx5r8PrMyMHukeyVaQGokCRaDr+y3DIfGHNZGS6iR6Dp3m5+v0Gte54ANiwPToUfoJvwHBVPf0IKAJRQd48a5+eVnIxxC+kBa/f+bMdk9P4cqVpXZ23jt2wOK73dwA1akvvuAwiFu9eu5TYVbPxx3QkUqEJu33SQ11EIl8c3Mhhs5mRlbE22v4vwcSivglPLE48mYWxpWXNok7O+eFAXEGxmWugMGygAaJYgxsAfG8JVLOQELI0kxOv+RdY02mRG8VXcAFnzuD1M+Kk4rhEOzqXdVdZFNlqWU5YTmABx7TUNQw361CQnRVCsMp8wmkrRicPEnHRTOlKRAqpqATfIaFzdylI4uWdDQmMovK1aurXZzFG6g3ZJSUJNbWZm/bFi0QBCQnx3p7uwuFsC/CGixuHxPDlfG5HsD7Fzv7Et7LX/I8ufX3eEFY1PAeZlOMO3lPAZJ5YUAuBMuCBiKK+1m+BOUMbFr7xhmBIzti9QxoOgYDsDEPA5NsrMPiVJSWtWCcG55rWNgAV18OuIxBgk/CfLdCxgmDstIQlBqmSH4qKugi+1FMptXU6PYzP2Cdw4YKruogE9nE2Bisjyy2etV7kqV2uucua9cOFxaa/4EjGg1ilHKwayriKZi4I997IvIZDHpSVty4lSBqqG9N24zpSMwr0KcC8S2Mp/i/M+cNq05TbYzsCFqBkTA+kRpxG5iQhqpgRUB0BC7z37Ktqo2ztTRPSksITV0YR++NxtmHgsOGSQ2VhBPjE2wb8iiTt/L21uWd0FJZWXScmEg7hDQTD/7+dHF0VJ9WcTAMcukJlK2p1yZYlXvg6lVa0lj/F51osLOzCMNM4vU1dYW0VfdE4xhFWrSclvBA0dANYOk7cp0vYlvqEnPcwII+clNWzGA9oUyfYC31b8AKEiSm5qyBAWGHgwEewCWyRttGh0Y5vzEU1YYNFjdiY+ARGEgiI/XuAtOzBg3Aikv49PKy/PisPSgIRh/MygIMnQ7Pcf5hLQzsqY7Fx9SXltJtcwq0s75TbsMIowRkp6x0YZi/sqv/8KvjioCcrraQszqHcyUN7ezKTK+st+xyWYpfimH+Kq+Um37MrjBmYw8Pmik1NemPv6srpW6JhCQl0Q2ZmbNqG2a8odHBoe7zzxWBgdT0BykMI+Xl9wFDwiv04JuvWzBxB5mtUVlQ0bAyjJtRq8KR/9sRKVPLQdk9CE3IX0EMUqUaFI0BgwGuY/llhuAMzsQIQXAFkER+VD7i0tyiN/pw9/C8gXiEWhkewOHh6am/yucbuwuris8qcZvkBq0W+kB26BDAKLd7c1pEY8tQXt59wCA9p8tNEZeaY/Qp6bSWlvZup+j8AL0+zHIxo7FbvdBNguwIA/ZM9Fh617YoOYQ0otOYhp5lrty04mSjVWEzrYIzMUxvpN2MOjzDmnvCqaqqyJUrxNBKrLxq2OErSFWnDZ9NITrHPG+UKbEyqpLPBxj1a/7OYstAejotvpaWWgUDpBnEQfjjVCfPV9+Ofo60JFj7SgCkMhIkIMHVVvWPDLvU9meaGQZvHJaafF5tQsrI+8zYndVcQdfSfKkZP7ASG/hKeDgJCqKsAI/x8dE/INK3wp30UYEBEszihiWNhq1b6zdtwtjCixqzVP51kreJXF1DYl/QPXeDUgM/g6vzt9Gnp/O/ZGaar5CbHhIpn91b9daxeodoOagbHsA9EEVe65HSYfFNGcNmFP3R+U580UmRWCRmL2c80NcxYA4gAfXQeIHxRHf4OZMlDQV75P3jNwuvi0HHgRig3dARl6JK+i2+OmayQZTB7hFuEdBo5VfK26Xt2p/8HTJEJ/DEhT/i2Gr5C/uPLpPt2dro6AhXYI+AWj08Hth3sf03k59Fs8Fgg8HWbDDYYLA1Gww2GGzNBoMNBluzwfCLaP8DTqVG9p9iyJQAAAAASUVORK5CYII=')
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-inputv-model="loginData.username"style="width: 240px"placeholder="Please input"clearable/></el-form-item><el-form-item><el-inputv-model="loginData.password"style="width: 240px"type="password"placeholder="Please input password"show-password/></el-form-item><el-form-item><el-inputv-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图形化界面：