快捷導(dǎo)航

三分鐘帶你掌握J(rèn)ava開發(fā)圖片驗(yàn)證碼功能方法

更新時(shí)間：2023年02月13日 08:33:13 作者：全村最野的狗

這篇文章主要來(lái)為大家詳細(xì)介紹Java實(shí)現(xiàn)開發(fā)圖片驗(yàn)證碼的具體方法，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下

生成驗(yàn)證碼：可以使用圖形庫(kù)生成一張隨機(jī)驗(yàn)證碼圖片，然后將圖片存儲(chǔ)在服務(wù)器端。或者編碼為base64方便傳輸。這里可以參考我的一篇文章，里面詳細(xì)講解了如何生成一張合格的驗(yàn)證碼。
緩存驗(yàn)證碼：驗(yàn)證碼需要緩存在后端方便下次查詢。
返回驗(yàn)證碼：將驗(yàn)證碼和驗(yàn)證碼唯一標(biāo)識(shí)返回到前端。
展示驗(yàn)證碼：將驗(yàn)證碼圖片顯示在登錄頁(yè)面：在登錄頁(yè)面中顯示驗(yàn)證碼圖片，并請(qǐng)用戶輸入驗(yàn)證碼。
用戶登錄：獲取用戶輸入：當(dāng)用戶提交登錄表單時(shí)，獲取用戶輸入的驗(yàn)證碼并與服務(wù)器端存儲(chǔ)的驗(yàn)證碼通過進(jìn)行比對(duì)。
驗(yàn)證驗(yàn)證碼：使用某種算法（如字符串比對(duì)），根據(jù)唯一標(biāo)識(shí)對(duì)云端存儲(chǔ)的驗(yàn)證碼和用戶輸入的驗(yàn)證碼進(jìn)行比對(duì)。
刪除驗(yàn)證碼：使用一次立即刪除。

前端請(qǐng)求驗(yàn)證碼

uuid是重點(diǎn)，將會(huì)貫穿整個(gè)驗(yàn)證碼的生命周期。后端會(huì)根據(jù)uuid找到真實(shí)驗(yàn)證碼進(jìn)行比對(duì)。

getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },

后端生成驗(yàn)證碼

/**

●  生成驗(yàn)證碼
*/
@GetMapping("/captchaImage")
public AjaxResult getCode(HttpServletResponse response) throws IOException{
    // 生成驗(yàn)證碼信息
    String uuid = IdUtils.simpleUUID();
    String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
    String capStr = null;
    BufferedImage image = null;
    // 生成驗(yàn)證碼 可以配置多種類型的驗(yàn)證碼
    if ("math".equals(captchaType)){
        capStr = captchaProducerMath.createText();
        image = captchaProducerMath.createImage(capText);
    }
    else if ("char".equals(captchaType)){
        capStr = captchaProducer.createText();
        image = captchaProducer.createImage(capStr);
    }
    // 存入redis
    redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
    // 轉(zhuǎn)換流信息寫出
    FastByteArrayOutputStream os = new FastByteArrayOutputStream();
    try{
        ImageIO.write(image, "jpg", os);
    }
    catch (IOException e){
    	return AjaxResult.error(e.getMessage());
    }
    AjaxResult ajax = AjaxResult.success();
    ajax.put("uuid", uuid);
    // 轉(zhuǎn)碼base64
    ajax.put("img", Base64.encode(os.toByteArray()));
    return ajax;
}

登錄

帶上驗(yàn)證碼和 uuid 一起登錄

password: "admin123"
username: "admin"
uuid: "66ae1f227bf245a8b6ec2e6c00fb6189"
code: "1234"

登錄接口校驗(yàn)

先校驗(yàn)驗(yàn)證碼，再校驗(yàn)賬號(hào)密碼。

@PostMapping("/login")
public AjaxResult login(@RequestBody  LoginBody loginBody) {
  AjaxResult ajax = AjaxResult.success();
  String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
  loginBody.getUuid());
  ajax.put(Constants.TOKEN, token);
  return ajax;
}

/**
* 登錄驗(yàn)證
*
* @param  username 用戶名 
* @param  password 密碼 
* @param  code 驗(yàn)證碼 
* @param  uuid 唯一標(biāo)識(shí) 
* @return  結(jié)果 
*/
public String login(String username, String password, String code, String uuid)
{
  String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
  // 根據(jù)UUID 去redis取出正確的驗(yàn)證碼======================================================
  String captcha = redisCache.getCacheObject(verifyKey);
  redisCache.deleteObject(verifyKey);
  // 驗(yàn)證redis的驗(yàn)證碼和用戶輸入的驗(yàn)證碼是否相等。
  // 驗(yàn)證賬號(hào)密碼
  // 驗(yàn)證錯(cuò)誤就拋出異常
  
  // 生成token
  return tokenService.createToken(loginUser);
}