圖片驗證碼詳解（生成/保存/發送/驗證）

本文使用的圖片驗證碼生產工具是captcha，廢話不多說，直接上代碼

關於前后端分離，圖片如何保存驗證，只需前端獲取圖片驗證碼時傳入一個key，將圖片存入redis時用該key作為存入redis的key，提交注冊/登錄時攜帶該key，即可。

 

Controller

/**
 * 圖片驗證碼 控制器
 */
@RestController
@Api(value = "@-圖片驗證碼")
@RequestMapping(value = "/admin/imagevc/")
public class ImageVcController extends ZyBaseController {

    @Autowired
    protected CaptchaService captchaService;

    /**
     * 獲取圖片驗證碼
     *
     * @return java.lang.Object
     * @author xx
     * @date 2021/3/03 10:36
     */
    @PostMapping(value = "")
    public void query(@RequestBody ImageVcIn in ,HttpServletResponse response) {
        captchaService.create(in,response);
    }
}

Service

@Slf4j @Service public class CaptchaService { @Autowired private RedisService redisService; /** * @Description: 獲取圖片驗證碼 * @param response: * @return: void * @author: xx * @date: 2021/3/3 4:54 下午 */
    public void create(ImageVcIn in, HttpServletResponse response) { try { ValidateCodeProperties validateCodeProperties = new ValidateCodeProperties(); setHeader(response, validateCodeProperties.getType()); Captcha captcha = createCaptcha(); redisService.set("tpyzm-"+in.getImageVcKey(), StringUtils.lowerCase(captcha.text()), validateCodeProperties.getTime()); captcha.out(response.getOutputStream()); }catch (IOException e){ log.error("獲取圖片驗證碼失敗",e); } } /** * @Description: 校驗圖片驗證碼是否正確 * @param key: * @param value: * @return: void * @author: xx * @date: 2021/3/3 4:53 下午 */
    public void check(String key, String value){ Object codeInRedis = redisService.get("tpyzm-"+key); Optional.ofNullable(codeInRedis).orElseThrow(()->new BusinessException("驗證碼已過期")); if (!StringUtils.equalsIgnoreCase(value, String.valueOf(codeInRedis))) { throw new BusinessException("驗證碼不正確"); } } /** * @Description: 創建圖片驗證碼 * @param : * @return: com.wf.captcha.base.Captcha * @author: xx * @date: 2021/3/3 9:30 上午 */
    public Captcha createCaptcha() { ValidateCodeProperties validateCodeProperties = new ValidateCodeProperties(); Captcha captcha = null; if (StringUtils.equalsIgnoreCase(validateCodeProperties.getType(), ImageType.GIF)) { captcha = new GifCaptcha(validateCodeProperties.getWidth(), validateCodeProperties.getHeight(), validateCodeProperties.getLength()); } else { captcha = new SpecCaptcha(validateCodeProperties.getWidth(), validateCodeProperties.getHeight(), validateCodeProperties.getLength()); } captcha.setCharType(validateCodeProperties.getCharType()); return captcha; } /** * @Description: 設置返回頭信息 * @param response: * @param type: * @return: void * @author: xx * @date: 2021/3/3 9:30 上午 */
    private void setHeader(HttpServletResponse response, String type) { if (StringUtils.equalsIgnoreCase(type, ImageType.GIF)) { response.setContentType(MediaType.IMAGE_GIF_VALUE); } else { response.setContentType(MediaType.IMAGE_PNG_VALUE); } response.setHeader(HttpHeaders.PRAGMA, "No-cache"); response.setHeader(HttpHeaders.CACHE_CONTROL, "No-cache"); response.setDateHeader(HttpHeaders.EXPIRES, 0L); } }

pom

       <!--圖片驗證碼-->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency> 

 

效果展示：