1|0SpringBoot 版本本文基于的 Spring Boot 的版本是 2.6.7 。 2|0 引入依賴(lài)captcha 一款超簡(jiǎn)單的驗(yàn)證碼生成，還挺好玩的。還有中文驗(yàn)證碼，動(dòng)態(tài)驗(yàn)證碼. 。在項(xiàng)目中 pom.xml 配置文件中添加依賴(lài)，如下： <!--驗(yàn)證碼--> <dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency>
3|1 實(shí)現(xiàn)過(guò)程新建驗(yàn)證碼枚舉類(lèi)由于 captcha 這款驗(yàn)證碼提供了好幾種驗(yàn)證碼方法，有中文驗(yàn)證碼，動(dòng)態(tài)驗(yàn)證碼，算術(shù)驗(yàn)證碼等等，新建一個(gè)驗(yàn)證碼每周類(lèi)存放這幾種驗(yàn)證碼類(lèi)型。代碼如下： // fhadmin.cn
public enum LoginCodeEnum {
/**
* 算數(shù)
*/
ARITHMETIC,
/**
* 中文
*/
CHINESE,
/**
* 中文閃圖
*/
CHINESE_GIF,
/**
* 閃圖
*/
GIF,
SPEC
}該類(lèi)是定義驗(yàn)證碼的基本信息，例如高度、寬度、字體類(lèi)型、驗(yàn)證碼類(lèi)型等等、并且我們把它轉(zhuǎn)成通過(guò) SpringBoot 配置文件類(lèi)型來(lái)定義更加方便。 // fhadmin.cn
@Data
public class LoginCode {
/**
* 驗(yàn)證碼配置
*/
private LoginCodeEnum codeType;
/**
* 驗(yàn)證碼有效期 分鐘
*/
private Long expiration = 2L;
/**
* 驗(yàn)證碼內(nèi)容長(zhǎng)度
*/
private int length = 2;
/**
* 驗(yàn)證碼寬度
*/
private int width = 111;
/**
* 驗(yàn)證碼高度
*/
private int height = 36;
/**
* 驗(yàn)證碼字體
*/
private String fontName;
/**
* 字體大小
*/
private int fontSize = 25;
/**
* 驗(yàn)證碼前綴
* @return
*/
private String codeKey;
public LoginCodeEnum getCodeType() {
return codeType;
}
}把配置文件轉(zhuǎn)換 Pojo 類(lèi)的統(tǒng)一配置類(lèi) // fhadmin.cn
@Configuration
public class ConfigBeanConfiguration {
@Bean
@ConfigurationProperties(prefix = "login")
public LoginProperties loginProperties() {
return new LoginProperties();
}
}定義邏輯驗(yàn)證生成類(lèi) // fhadmin.cn
@Data
public class LoginProperties {
private LoginCode loginCode;
/**
* 獲取驗(yàn)證碼生產(chǎn)類(lèi)
* @return
*/
public Captcha getCaptcha(){
if(Objects.isNull(loginCode)){
loginCode = new LoginCode();
if(Objects.isNull(loginCode.getCodeType())){
loginCode.setCodeType(LoginCodeEnum.ARITHMETIC);
}
}
return switchCaptcha(loginCode);
}
/**
* 依據(jù)配置信息生產(chǎn)驗(yàn)證碼
* @param loginCode
* @return
*/
private Captcha switchCaptcha(LoginCode loginCode){
Captcha captcha = null;
synchronized (this){
switch (loginCode.getCodeType()){
case ARITHMETIC:
captcha = new FixedArithmeticCaptcha(loginCode.getWidth(),loginCode.getHeight());
captcha.setLen(loginCode.getLength());
break;
case CHINESE:
captcha = new ChineseCaptcha(loginCode.getWidth(),loginCode.getHeight());
captcha.setLen(loginCode.getLength());
break;
case CHINESE_GIF:
captcha = new ChineseGifCaptcha(loginCode.getWidth(),loginCode.getHeight());
captcha.setLen(loginCode.getLength());
break;
case GIF:
captcha = new GifCaptcha(loginCode.getWidth(),loginCode.getHeight());
captcha.setLen(loginCode.getLength());
break;
case SPEC:
captcha = new SpecCaptcha(loginCode.getWidth(),loginCode.getHeight());
captcha.setLen(loginCode.getLength());
default:
System.out.println("驗(yàn)證碼配置信息錯(cuò)誤！正確配置查看 LoginCodeEnum ");
}
}
if(StringUtils.isNotBlank(loginCode.getFontName())){
captcha.setFont(new Font(loginCode.getFontName(),Font.PLAIN,loginCode.getFontSize()));
}
return captcha;
}
static class FixedArithmeticCaptcha extends ArithmeticCaptcha{
public FixedArithmeticCaptcha(int width,int height){
super(width,height);
}
@Override
protected char[] alphas() {
// 生成隨機(jī)數(shù)字和運(yùn)算符
int n1 = num(1, 10), n2 = num(1, 10);
int opt = num(3);
// 計(jì)算結(jié)果
int res = new int[]{n1 + n2, n1 - n2, n1 * n2}[opt];
// 轉(zhuǎn)換為字符運(yùn)算符
char optChar = "+-x".charAt(opt);
this.setArithmeticString(String.format("%s%c%s=?", n1, optChar, n2));
this.chars = String.valueOf(res);
return chars.toCharArray();
}
}
}控制層定義驗(yàn)證生成接口 // fhadmin.cn
@ApiOperation(value = "獲取驗(yàn)證碼", notes = "獲取驗(yàn)證碼")
@GetMapping("/code")
public Object getCode(){
Captcha captcha = loginProperties.getCaptcha();
String uuid = "code-key-"+IdUtil.simpleUUID();
//當(dāng)驗(yàn)證碼類(lèi)型為 arithmetic時(shí)且長(zhǎng)度 >= 2 時(shí)，captcha.text()的結(jié)果有幾率為浮點(diǎn)型
String captchaValue = captcha.text();
if(captcha.getCharType()-1 == LoginCodeEnum.ARITHMETIC.ordinal() && captchaValue.contains(".")){
captchaValue = captchaValue.split("\\.")[0];
}
// 保存
redisUtils.set(uuid,captchaValue,loginProperties.getLoginCode().getExpiration(), TimeUnit.MINUTES);
// 驗(yàn)證碼信息
Map<String,Object> imgResult = new HashMap<String,Object>(2){{
put("img",captcha.toBase64());
put("uuid",uuid);
}};
return imgResult;
}前端調(diào)用接口 <template>
<div class="login-code">
<img :src="codeUrl" @click="getCode">
</div>
</template>
<script>
methods: {
getCode() {
getCodeImg().then(res => {
this.codeUrl = res.data.img
this.loginForm.uuid = res.data.uuid
})
},
}
created() {
// 獲取驗(yàn)證碼
this.getCode()
},
</script>
|
|
|
