做汽车团购网站,html做的网站图片横着摆放,江苏省建设厅网站首页,wordpress主题读取不到一、简介 为了防止网站的用户被通过密码典爆破。引入验证码的功能是十分有必要的。而前端的验证码又仅仅是只防君子不防小人。通过burpsuit等工具很容易就会被绕过。所以后端实现的验证码才是对用户信息安全的一大重要保障。 实现思路#xff1a; 1.引入图形生成的依赖 2.生成…一、简介 为了防止网站的用户被通过密码典爆破。引入验证码的功能是十分有必要的。而前端的验证码又仅仅是只防君子不防小人。通过burpsuit等工具很容易就会被绕过。所以后端实现的验证码才是对用户信息安全的一大重要保障。 实现思路 1.引入图形生成的依赖 2.生成随机4字符并制作成图片 3.对图片进行Base64形式数据进行传输 4.前端显示 二、引入依赖
!-- 验证码模块--
dependencygroupIdorg.apache.commons/groupIdartifactIdcommons-lang3/artifactIdversion3.12.0/version
/dependency 三、验证码生成工具类
public class CaptchaUtil {private static final int WIDTH 200;private static final int HEIGHT 75;private static final int FONT_SIZE 36;private static final String DEFAULT_FONT Arial;/*** 生成验证码图像.** param captchaText 验证码原始文本* return Base64编码的图像字符串*/public static String generateCaptchaImage(String captchaText) {if (captchaText null || captchaText.isEmpty()) {throw new IllegalArgumentException(Captcha text cannot be null or empty.);}// 创建图像和图形上下文BufferedImage image new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);Graphics2D g (Graphics2D) image.getGraphics();// 设置背景颜色g.setColor(Color.WHITE);g.fillRect(0, 0, WIDTH, HEIGHT);// 绘制验证码文本g.setFont(new Font(DEFAULT_FONT, Font.BOLD, FONT_SIZE));g.setColor(getRandomColor());g.drawString(captchaText, 45, 50);// 添加随机线条作为干扰addNoiseLines(g);// 关闭图形上下文g.dispose();// 将图像转换为Base64编码的字符串try (ByteArrayOutputStream baos new ByteArrayOutputStream()) {ImageIO.write(image, png, baos);return Base64.getEncoder().encodeToString(baos.toByteArray());} catch (Exception e) {throw new RuntimeException(Error generating captcha image, e);}}private static void addNoiseLines(Graphics2D g) {for (int i 0; i 5; i) {g.setColor(getRandomColor());g.drawLine(getRandomNumber(WIDTH),getRandomNumber(HEIGHT),getRandomNumber(WIDTH),getRandomNumber(HEIGHT));}}private static Color getRandomColor() {return new Color((int) (Math.random() * 255),(int) (Math.random() * 255),(int) (Math.random() * 255));}private static int getRandomNumber(int bound) {return (int) (Math.random() * bound);}
} 四、通过Http Session存放验证码与验证
获取(a-z A-Z 0-9)随机四位的验证码功能 // 登陆时候获取验证码ApiOperation(获取验证码功能)GetMapping(/GetCaptcha)public String GetCaptcha(HttpSession session) {// 随机生成四位验证码原始数据String allowedChars 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ;String randomString generateRandomString(allowedChars, 4);System.out.println(captchaCode randomString);// 将验证码保存到session中session.setAttribute(captcha, randomString); // 使用方法参数sessionString ImageByBase64 CaptchaUtil.generateCaptchaImage(randomString);return ImageByBase64;}
用户登陆时候校验验证码功能
// 实现登陆功能ApiOperation(用户登陆功能)PostMapping(/login)public Result Login(RequestBody LoginDTO loginDTO, HttpSession session) { // 使用同一个HttpSession参数String captcha (String) session.getAttribute(captcha);log.info(用户调用login方法);if (loginDTO.getCaptcha() null || !loginDTO.getCaptcha().equalsIgnoreCase(captcha)) {session.removeAttribute(captcha);return Result.error(验证码出错了噢!);}// 对密码进行md5加密String encryptToMD5 MD5Util.encryptToMD5(loginDTO.getPassword());LambdaQueryWrapperUser lambdaQueryWrapper new LambdaQueryWrapper();lambdaQueryWrapper.eq(User::getAccount, loginDTO.getAccount()).eq(User::getPassword, encryptToMD5);User user userService.getOne(lambdaQueryWrapper);if (user null) {return Result.error(很抱歉查不到此用户);}user.setPassword(xxxxx);return Result.success(user);} 五、前端显示Base64格式的图片
前端实现注册的表单
el-tab-pane label登陆 namefirstel-form :modelloginForm refloginFormRef label-width80pxel-form-item label用户名:el-input v-modelloginForm.account/el-input/el-form-itemel-form-item label密码:el-input v-modelloginForm.password show-password/el-input/el-form-itemel-form-item label验证码el-input v-modelloginForm.captcha stylewidth: 20%;/el-inputimg :srccaptchaImageUrl alt验证码 clickrefreshCaptcha idcaptchaImage/el-form-item/el-form/el-tab-pane 先设置为空
export default {data() {return {captchaImageUrl: , // 初始化为一个空字符串}},
在点击登陆按钮后执行getCaptcha函数并设置captchaImageUrl的回显格式为Base64 fetchCaptcha() {axios.get(/api/user/GetCaptcha).then(response {this.captchaImageUrl data:image/png;base64, response.data;}).catch(error {console.error(获取验证码失败:, error);});},
最后进行测试 注意实现完成验证码功能后需要注意用户的操作。如果登陆失败刷新页面切换页面。都需要重新更新验证码
