• 怎么实现一个登录时需要输入验证码的功能

    今天给项目换了一个登录页面，而这个登录页面设计了验证码，于是想着把这个验证码功能实现一下。

    这篇文章就如何实现登录时的验证码的验证功能结合代码进行详细地介绍，以及介绍功能实现的思路，文章不是一次写成的，中间考虑可能出现的问题，最后给出了一个比较稳定的版本。

    目录

    一、页面效果

    二、实现思路

    三、具体代码实现

    1、准备工作

    创建项目

    添加依赖

    修改配置

    2、功能实现

    后端代码

    CaptchaController.java

    UserLoginDTO.java

    UserController.java

    UserService.java

    UserServiceImpl.java

    前端代码

    login.html

    login.js

    一、页面效果

    登录的时候会把用户名、密码和验证码一起传到后端，并对验证码进行验证，只有验证码正确才能登录。

    二、实现思路

    那么，具体是如何实现的呢，首先大概介绍一下我实现这个功能的思路：

    • 验证码图片的url由后端的一个Controller生成，前端请求这个Controller接口的时候根据当前时间生成一个uuid，并把这个uuid在前端使用localStorage缓存起来，下一次还是从缓存中获取。
    • Controller生成验证码之后，把前端传过来的uuid通过redis缓存起来，这里分两次缓存
      • 缓存uuid
      • 以uuid为key，缓存验证码
    • 这样，当点击登录按钮将数据提交到后台登录接口时，会从redis中获取uuid，然后通过这个uuid去获取验证码，和前端用户输入的验证码进行比较。

    潜在问题：这样的设计可能会导致以下问题

    • 多个用户同一时间访问登录页面，导致生成的uuid一样，数据会互相覆盖；
    • uuid这个key被其他用户修改；

    改进方案

    • 前端生成随机的uuid，并缓存到localStorage，登陆的时候也把这个uuid传到后端，这样就解决了key重复和key被覆盖的问题。

    三、具体代码实现

    1、准备工作

    创建项目

    为了保存代码，在idea中新建一个springboot项目

    创建好的项目目录结构

    添加依赖

    删除多余的文件及文件夹（可选），在pom.xml中添加必要的依赖~

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.  
    6.     <parent>
    7.         <groupId>org.springframework.bootgroupId>
    8.         <artifactId>spring-boot-starter-parentartifactId>
    9.         <version>2.5.9version>
    10.         <relativePath />
    11.     parent>
    12.  
    13.     <groupId>cn.edu.sgu.wwwgroupId>
    14.     <artifactId>login-captchaartifactId>
    15.     <version>0.0.1-SNAPSHOTversion>
    16.     <name>login-captchaname>
    17.     <description>Java实现登录验证码功能description>
    18.  
    19.     <properties>
    20.         <java.version>1.8java.version>
    21.     properties>
    22.  
    23.     <dependencies>
    24.         <dependency>
    25.             <groupId>org.springframework.bootgroupId>
    26.             <artifactId>spring-boot-starter-webartifactId>
    27.         dependency>
    28.  
    29.         
    30.         <dependency>
    31.             <groupId>org.springframework.bootgroupId>
    32.             <artifactId>spring-boot-starter-validationartifactId>
    33.         dependency>
    34.  
    35.         
    36.         <dependency>
    37.             <groupId>org.springframework.bootgroupId>
    38.             <artifactId>spring-boot-starter-data-redisartifactId>
    39.         dependency>
    40.  
    41.         
    42.         <dependency>
    43.             <groupId>org.projectlombokgroupId>
    44.             <artifactId>lombokartifactId>
    45.             <version>1.18.22version>
    46.         dependency>
    47.  
    48.         
    49.         <dependency>
    50.             <groupId>com.github.whvcsegroupId>
    51.             <artifactId>easy-captchaartifactId>
    52.             <version>1.6.2version>
    53.         dependency>
    54.     dependencies>
    55.  
    56.     <build>
    57.         <plugins>
    58.             <plugin>
    59.                 <groupId>org.springframework.bootgroupId>
    60.                 <artifactId>spring-boot-maven-pluginartifactId>
    61.             plugin>
    62.         plugins>
    63.     build>
    64. project>

    修改配置

    修改application.yml

    1. server:
    2.   port: 8888
    3.  
    4. logging:
    5.   level:
    6.     springfox: error
    7.     cn.edu.sgu.www.logincaptcha: debug
    8.  
    9. spring:
    10.   application:
    11.     name: login-captcha
    12.   redis:
    13.     port: 6379
    14.     host: localhost
    15.     timeout: PT5s
    16.     # password: mhxy1218
    17.  
    18. # 验证码图片设置
    19. captcha:
    20.   image:
    21.     width: 66
    22.     height: 22

    最后，把必要的一些基础类复制过来。

    2、功能实现

    后端代码

    CaptchaController.java

    给前端登录页面生成随机验证码的控制器类。

    1. package cn.edu.sgu.www.logincaptcha.controller;
    2.  
    3. import cn.edu.sgu.www.logincaptcha.consts.RedisKeyPrefixes;
    4. import cn.edu.sgu.www.logincaptcha.exception.GlobalException;
    5. import cn.edu.sgu.www.logincaptcha.property.CaptchaImageProperties;
    6. import cn.edu.sgu.www.logincaptcha.redis.StringRedisUtils;
    7. import cn.edu.sgu.www.logincaptcha.restful.ResponseCode;
    8. import com.wf.captcha.GifCaptcha;
    9. import com.wf.captcha.SpecCaptcha;
    10. import com.wf.captcha.base.Captcha;
    11. import lombok.extern.slf4j.Slf4j;
    12. import org.springframework.beans.factory.annotation.Autowired;
    13. import org.springframework.web.bind.annotation.RequestMapping;
    14. import org.springframework.web.bind.annotation.RequestMethod;
    15. import org.springframework.web.bind.annotation.RequestParam;
    16. import org.springframework.web.bind.annotation.RestController;
    17. import org.springframework.web.context.request.RequestAttributes;
    18. import org.springframework.web.context.request.RequestContextHolder;
    19. import org.springframework.web.context.request.ServletRequestAttributes;
    20.  
    21. import javax.servlet.http.HttpServletResponse;
    22. import java.io.IOException;
    23. import java.util.concurrent.TimeUnit;
    24.  
    25. /**
    26.  * @author heyunlin
    27.  * @version 1.0
    28.  */
    29. @Slf4j
    30. @RestController
    31. @RequestMapping(value = "/captcha", produces = "application/json;charset=utf-8")
    32. public class CaptchaController {
    33.  
    34.     private final StringRedisUtils stringRedisUtils;
    35.     private final CaptchaImageProperties captchaImageProperties;
    36.  
    37.     @Autowired
    38.     public CaptchaController(StringRedisUtils stringRedisUtils, CaptchaImageProperties captchaImageProperties) {
    39.         this.stringRedisUtils = stringRedisUtils;
    40.         this.captchaImageProperties = captchaImageProperties;
    41.     }
    42.  
    43.     /**
    44.      * 生成验证码
    45.      * @param type 验证码图片类型
    46.      * @param uuid 前端生成的uuid
    47.      */
    48.     @RequestMapping(value = "/generate", method = RequestMethod.GET)
    49.     public void generate(@RequestParam String type, @RequestParam String uuid) throws IOException {
    50.         Captcha captcha;
    51.         Integer width = captchaImageProperties.getWidth();
    52.         Integer height = captchaImageProperties.getHeight();
    53.  
    54.         switch (type) {
    55.             case "png":
    56.                 captcha = new SpecCaptcha(width, height);
    57.                 break;
    58.             case "gif":
    59.                 captcha = new GifCaptcha(width, height);
    60.                 break;
    61.             default:
    62.                 throw new GlobalException(ResponseCode.BAD_REQUEST, "不合法的验证码类型：" + type);
    63.         }
    64.  
    65.         captcha.setLen(4);
    66.         captcha.setCharType(Captcha.TYPE_DEFAULT);
    67.  
    68.         String code = captcha.text();
    69.         log.debug("生成的验证码：{}", code);
    70.  
    71.         // 根据uuid拼接前缀得到验证码的key
    72.         String key = RedisKeyPrefixes.PREFIX_CAPTCHA + uuid;
    73.  
    74.         // 缓存验证码
    75.         stringRedisUtils.set(key , code);
    76.         // 设置验证码3分钟后过期
    77.         stringRedisUtils.expire(key, 3, TimeUnit.MINUTES);
    78.  
    79.         // 获取HttpServletResponse对象
    80.         HttpServletResponse response = getResponse();
    81.  
    82.         // 设置响应头
    83.         response.setContentType("image/" + type);
    84.         response.setDateHeader("Expires", 0);
    85.         response.setHeader("Pragma", "No-cache");
    86.         response.setHeader("Cache-Control", "no-cache");
    87.  
    88.         // 输出图片流
    89.         captcha.out(response.getOutputStream());
    90.     }
    91.  
    92.     /**
    93.      * 获取HttpServletResponse对象
    94.      * @return HttpServletResponse
    95.      */
    96.     private HttpServletResponse getResponse() {
    97.         RequestAttributes attributes = RequestContextHolder.getRequestAttributes();
    98.  
    99.         if (attributes != null ) {
    100.             HttpServletResponse response = ((ServletRequestAttributes) attributes).getResponse();
    101.  
    102.             if (response != null) {
    103.                 // 设置内容类型为json
    104.                 response.setContentType("application/json;charset=utf-8");
    105.  
    106.                 return response;
    107.             }
    108.         }
    109.  
    110.         throw new GlobalException(ResponseCode.ERROR, "获取response对象失败");
    111.     }
    112.  
    113. }

    UserLoginDTO.java

    在项目根目录下创建dto包，然后新建一个UserLoginDTO.java来接受前端的数据。

    1. package cn.edu.sgu.www.logincaptcha.dto;
    2.  
    3. import lombok.Data;
    4.  
    5. import javax.validation.constraints.NotEmpty;
    6. import java.io.Serializable;
    7.  
    8. /**
    9.  * @author heyunlin
    10.  * @version 1.0
    11.  */
    12. @Data
    13. public class UserLoginDTO implements Serializable {
    14.     private static final long serialVersionUID = 18L;
    15.  
    16.     /**
    17.      * uuid：随机字符串
    18.      */
    19.     @NotEmpty(message = "验证码已过期，请重新获取")
    20.     private String uuid;
    21.  
    22.     /**
    23.      * 验证码
    24.      */
    25.     @NotEmpty(message = "验证码不允许为空")
    26.     private String code;
    27.  
    28.     /**
    29.      * 用户名
    30.      */
    31.     @NotEmpty(message = "用户名不允许为空")
    32.     private String username;
    33.  
    34.     /**
    35.      * 密码
    36.      */
    37.     @NotEmpty(message = "密码不允许为空")
    38.     private String password;
    39. }

    UserController.java
    1. package cn.edu.sgu.www.logincaptcha.controller;
    2.  
    3. import cn.edu.sgu.www.logincaptcha.dto.UserLoginDTO;
    4. import cn.edu.sgu.www.logincaptcha.restful.JsonResult;
    5. import cn.edu.sgu.www.logincaptcha.service.UserService;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.validation.annotation.Validated;
    8. import org.springframework.web.bind.annotation.RequestMapping;
    9. import org.springframework.web.bind.annotation.RequestMethod;
    10. import org.springframework.web.bind.annotation.RestController;
    11.  
    12. /**
    13.  * @author heyunlin
    14.  * @version 1.0
    15.  */
    16. @RestController
    17. @RequestMapping(path = "/user", produces="application/json;charset=utf-8")
    18. public class UserController {
    19.  
    20.     private final UserService userService;
    21.  
    22.     @Autowired
    23.     public UserController(UserService userService) {
    24.         this.userService = userService;
    25.     }
    26.  
    27.     /**
    28.      * 登录认证
    29.      * @param loginDTO UserLoginDTO
    30.      * @return JsonResult
    31.      */
    32.     @RequestMapping(value = "/login", method = RequestMethod.POST)
    33.     public JsonResult login(@Validated UserLoginDTO loginDTO) {
    34.         userService.login(loginDTO);
    35.  
    36.         return JsonResult.success();
    37.     }
    38.  
    39. }

    UserService.java
    1. package cn.edu.sgu.www.logincaptcha.service;
    2.  
    3. import cn.edu.sgu.www.logincaptcha.dto.UserLoginDTO;
    4.  
    5. /**
    6.  * @author heyunlin
    7.  * @version 1.0
    8.  */
    9. public interface UserService {
    10.  
    11.     void login(UserLoginDTO loginDTO);
    12. }

    UserServiceImpl.java
    1. package cn.edu.sgu.www.logincaptcha.service.impl;
    2.  
    3. import cn.edu.sgu.www.logincaptcha.consts.RedisKeyPrefixes;
    4. import cn.edu.sgu.www.logincaptcha.dto.UserLoginDTO;
    5. import cn.edu.sgu.www.logincaptcha.exception.GlobalException;
    6. import cn.edu.sgu.www.logincaptcha.redis.StringRedisUtils;
    7. import cn.edu.sgu.www.logincaptcha.restful.ResponseCode;
    8. import cn.edu.sgu.www.logincaptcha.service.UserService;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Service;
    11.  
    12. /**
    13.  * @author heyunlin
    14.  * @version 1.0
    15.  */
    16. @Service
    17. public class UserServiceImpl implements UserService {
    18.  
    19.     private final StringRedisUtils stringRedisUtils;
    20.  
    21.     @Autowired
    22.     public UserServiceImpl(StringRedisUtils stringRedisUtils) {
    23.         this.stringRedisUtils = stringRedisUtils;
    24.     }
    25.  
    26.     @Override
    27.     public void login(UserLoginDTO loginDTO) {
    28.         // 得到用户输入的验证码
    29.         String code = loginDTO.getCode();
    30.  
    31.         // 获取正确的验证码
    32.         String key = getCaptchaKey(loginDTO.getUuid());
    33.         String realCode = stringRedisUtils.get(key);
    34.  
    35.         // 得到的验证码为空，则获取验证码到登录之间的时间已经过了3分钟，验证码过期已经被删除
    36.         if (realCode == null) {
    37.             throw new GlobalException(ResponseCode.BAD_REQUEST, "验证码已失效，请重新获取~");
    38.         }
    39.         // 验证码校验
    40.         if (!code.equalsIgnoreCase(realCode)) {
    41.             throw new GlobalException(ResponseCode.BAD_REQUEST, "验证码错误~");
    42.         }
    43.  
    44.         /* 其它代码... */
    45.     }
    46.  
    47.     /**
    48.      * 拼接得到验证码的key
    49.      * @param uuid 前端随机生成的uuid
    50.      * @return String 验证码的key
    51.      */
    52.     private String getCaptchaKey(String uuid) {
    53.         return RedisKeyPrefixes.PREFIX_CAPTCHA + uuid;
    54.     }
    55.  
    56. }

    前端代码

    login.html
    1. html>
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5.         <title>登录页面title>
    6.         <link rel="stylesheet" href="/css/login.css">
    7.         <script src="/js/jquery.min.js">script>
    8.         <script src="/js/ajaxUtils.js">script>
    9.         <script src="/js/localStorage.js">script>
    10.         <script src="/js/login.js">script>
    11.     head>
    12.  
    13.     <body style="overflow:hidden">
    14.         <div class="pagewrap">
    15.             <div class="main">
    16.                 <div class="header">div>
    17.  
    18.                 <div class="content">
    19.                     <div class="con_left">div>
    20.  
    21.                     <div class="con_right">
    22.                         <div class="con_r_top">
    23.                             <a href="javascript:" class="left">下载游戏a>
    24.                             <a href="javascript:" class="right">登录管理a>
    25.                         div>
    26.  
    27.                         <ul>
    28.                             <li class="con_r_left" style="display:none;">
    29.                                 <div class="erweima">
    30.                                     <div class="qrcode">
    31.                                         <div id="output">
    32.                                             <img src="/images/mhxysy.png" />
    33.                                         div>
    34.                                     div>
    35.                                 div>
    36.  
    37.                                 <div style="height:70px;">
    38.                                     <p>扫码下载梦幻西游手游p>
    39.                                 div>
    40.                             li>
    41.  
    42.  
    43.                             <li class="con_r_right" style="display:block;">
    44.                                 <div>
    45.                                     <div class="user">
    46.                                         <div>
    47.                                             <span class="user-icon">span>
    48.                                             <input type="text" id="username" />
    49.                                         div>
    50.  
    51.                                         <div>
    52.                                             <span class="mima-icon">span>
    53.                                             <input type="password" id="password" />
    54.                                         div>
    55.  
    56.                                         <div>
    57.                                             <span class="yzmz-icon">span>
    58.                                             <input type="text" id="code" />　　
    59.  
    60.                                             <img id="captcha" alt="看不清？点击更换" />
    61.                                         div>
    62.                                     div>
    63.  
    64.                                     <br>
    65.  
    66.                                     <button id="btn_Login" type="button">登 录button>
    67.                                 div>
    68.                             li>
    69.                         ul>
    70.                     div>
    71.                 div>
    72.             div>
    73.         div>
    74.     body>
    75. html>

    login.js
    1. /**
    2.  * 禁止输入空格
    3.  */
    4. function preventSpace() {
    5. 	let event = window.event;
    6. 	
    7. 	if(event.keyCode === 32) {
    8. 		event.returnValue = false;
    9. 	}
    10. }
    11.  
    12. /**
    13.  * 生成随机字符串
    14.  * @param length 字符串的长度，默认11
    15.  * @returns {string}
    16.  */
    17. function generateRandomString(length = 11) {
    18. 	let charset = "abcdefghijklmnopqrstuvwxyz-_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    19. 	let values = new Uint32Array(length);
    20.  
    21. 	window.crypto.getRandomValues(values);
    22.  
    23. 	let str = "";
    24.  
    25. 	for (let i = 0; i < length; i++) {
    26. 		str += charset[values[i] % charset.length];
    27. 	}
    28.  
    29. 	return str;
    30. }
    31.  
    32. /**
    33.  * 登录
    34.  */
    35. function login() {
    36. 	let username = $("#username").val();
    37.     let password = $("#password").val();
    38.     let code = $("#code").val();
    39.  
    40. 	if (!username) {
    41. 		alert("请输入用户名！");
    42. 		
    43. 		$("#username").focus();
    44. 	} else if (!password) {
    45. 		alert("请输入密码！");
    46. 		
    47. 		$("#password").focus();
    48. 	} else if (!code) {
    49. 		alert("请输入验证码！");
    50. 	} else {
    51. 		ajaxPost("/user/login", {
    52. 			username: username,
    53. 			password: password,
    54. 			code: code,
    55. 			uuid: getStorage("uuid")
    56. 		}, function() {
    57. 			location.href = "/index.html";
    58. 		}, function (res) {
    59. 			if (res && res.responseJSON) {
    60. 				let response = res.responseJSON;
    61.  
    62. 				if (res.status && res.status === 404) {
    63. 					let message;
    64.  
    65. 					if(response.path) {
    66. 						message = "路径" + response.path + "不存在。";
    67. 					} else {
    68. 						message = response.message;
    69. 					}
    70.  
    71. 					alert(message);
    72. 				} else {
    73. 					alert(response.message);
    74. 				}
    75. 			} else {
    76. 				alert("请求无响应~");
    77. 			}
    78. 		});
    79. 	}
    80. }
    81.  
    82. $(function() {
    83. 	$("#username").keydown(function() {
    84. 		preventSpace();
    85. 	}).attr("placeholder", "请输入用户名");
    86.  
    87. 	$("#password").keydown(function() {
    88. 		preventSpace();
    89. 	}).attr("placeholder", "请输入密码");
    90.  
    91. 	/**
    92. 	 * 给验证码输入框绑定回车登录事件
    93. 	 */
    94. 	$("#code").keydown(function() {
    95. 		let event = window.event;
    96.  
    97. 		if(event.keyCode === 32) {
    98. 			event.returnValue = false;
    99. 		} else if(event.keyCode === 13) {
    100. 			login();
    101. 		}
    102. 	}).attr("placeholder", "验证码");
    103.  
    104. 	/******************************************************************************************************/
    105.  
    106. 	/*
    107. 	 * 验证码初始化
    108. 	 */
    109. 	// 从localStorage中获取uuid
    110. 	let uuid = getStorage("uuid");
    111.  
    112. 	// uuid为空，则生成后保存到localStorage中
    113. 	if (!uuid) {
    114. 		// 生成uuid
    115. 		uuid = generateRandomString();
    116.  
    117. 		// 保存uuid到localStorage
    118. 		storage("uuid", uuid);
    119. 	}
    120.  
    121. 	let captcha_ = $("#captcha");
    122.  
    123. 	// 设置验证码的图片路径
    124. 	captcha_.attr("src", "/captcha/generate?type=png&uuid=" + uuid);
    125. 	// 设置验证码的title
    126. 	captcha_.attr("title", "看不清？换一张");
    127.  
    128. 	// 点击验证码刷新
    129. 	captcha_.click(function () {
    130. 		// 生成uuid
    131. 		uuid = generateRandomString();
    132.  
    133. 		// 保存uuid到localStorage
    134. 		storage("uuid", uuid);
    135.  
    136. 		// 重新设置验证码图片的路径
    137. 		$("#captcha").attr("src", "/captcha/generate?v=" + new Date().getTime() + "&type=png&uuid=" + uuid);
    138. 	});
    139.  
    140. 	/******************************************************************************************************/
    141.  
    142. 	// 点击登录按钮
    143. 	$("#btn_Login").click(function () {
    144. 		login();
    145. 	});
    146.  
    147. 	$(".content .con_right .left").on("click", function () {
    148. 		$(this).css({
    149. 			"color": "#333333",
    150. 			"border-bottom": "2px solid #2e558e"
    151. 		});
    152. 		$(".content .con_right .right").css({
    153. 			"color": "#999999",
    154. 			"border-bottom": "2px solid #dedede"
    155. 		});
    156. 		$(".content .con_right ul .con_r_left").css("display", "block");
    157. 		$(".content .con_right ul .con_r_right").css("display", "none");
    158. 	});
    159.  
    160. 	$(".content .con_right .right").on("click", function () {
    161. 		$(this).css({
    162. 			"color": "#333333",
    163. 			"border-bottom": "2px solid #2e558e"
    164. 		});
    165. 		$(".content .con_right .left").css({
    166. 			"color": "#999999",
    167. 			"border-bottom": "2px solid #dedede"
    168. 		});
    169. 		$(".content .con_right ul .con_r_right").css("display", "block");
    170. 		$(".content .con_right ul .con_r_left").css("display", "none");
    171. 	});
    172.  
    173. });

    好了，这篇文章就分享到这里了，看完如果觉得对你有所帮助，不要忘了点赞+收藏哦~

    最新的代码已经保存到git仓库，可按需获取~

    Java实现登录验证码功能icon-default.png?t=N7T8https://gitee.com/he-yunlin/login-captcha.git

  • 相关阅读:
    高精度绝对角度传感器应用高速度角度监测
    3D视觉 之 线激光3D相机
    低代码搭建高效管理房屋检测系统案例分析
    小程序用vue编写，保存表单出错
    2023年中国大学生留学现状及未来发展规划分析：直接就业仍是毕业后的主流选择[图]
    10 Deployment:让应用永不宕机
    程序员眼中的中秋
    【机器学习】回归问题实例（李宏毅老师作业1）
    libxml2库使用示例
    测试环境要多少?从成本与效率说起
  • 原文地址：https://blog.csdn.net/heyl163_/article/details/132918102