1|0SpringBoot 版本本文基于的 Spring Boot 的版本是 2.6.7 。 2|0 引入依賴captcha 一款超簡單的驗證碼生成，還挺好玩的。還有中文驗證碼，動態(tài)驗證碼. 。在項目中 pom.xml 配置文件中添加依賴，如下： <!--驗證碼--> <dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency>
3|1 實現(xiàn)過程新建驗證碼枚舉類由于 captcha 這款驗證碼提供了好幾種驗證碼方法，有中文驗證碼，動態(tài)驗證碼，算術(shù)驗證碼等等，新建一個驗證碼每周類存放這幾種驗證碼類型。代碼如下： // fhadmin.cn
public enum LoginCodeEnum {
/**
* 算數(shù)
*/
ARITHMETIC,
/**
* 中文
*/
CHINESE,
/**
* 中文閃圖
*/
CHINESE_GIF,
/**
* 閃圖
*/
GIF,
SPEC
}該類是定義驗證碼的基本信息，例如高度、寬度、字體類型、驗證碼類型等等、并且我們把它轉(zhuǎn)成通過 SpringBoot 配置文件類型來定義更加方便。 // fhadmin.cn
@Data
public class LoginCode {
/**
* 驗證碼配置
*/
private LoginCodeEnum codeType;
/**
* 驗證碼有效期 分鐘
*/
private Long expiration = 2L;
/**
* 驗證碼內(nèi)容長度
*/
private int length = 2;
/**
* 驗證碼寬度
*/
private int width = 111;
/**
* 驗證碼高度
*/
private int height = 36;
/**
* 驗證碼字體
*/
private String fontName;
/**
* 字體大小
*/
private int fontSize = 25;
/**
* 驗證碼前綴
* @return
*/
private String codeKey;
public LoginCodeEnum getCodeType() {
return codeType;
}
}把配置文件轉(zhuǎn)換 Pojo 類的統(tǒng)一配置類 // fhadmin.cn
@Configuration
public class ConfigBeanConfiguration {
@Bean
@ConfigurationProperties(prefix = "login")
public LoginProperties loginProperties() {
return new LoginProperties();
}
}定義邏輯驗證生成類 // fhadmin.cn
@Data
public class LoginProperties {
private LoginCode loginCode;
/**
* 獲取驗證碼生產(chǎn)類
* @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)驗證碼
* @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("驗證碼配置信息錯誤！正確配置查看 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() {
// 生成隨機數(shù)字和運算符
int n1 = num(1, 10), n2 = num(1, 10);
int opt = num(3);
// 計算結(jié)果
int res = new int[]{n1 + n2, n1 - n2, n1 * n2}[opt];
// 轉(zhuǎn)換為字符運算符
char optChar = "+-x".charAt(opt);
this.setArithmeticString(String.format("%s%c%s=?", n1, optChar, n2));
this.chars = String.valueOf(res);
return chars.toCharArray();
}
}
}控制層定義驗證生成接口 // fhadmin.cn
@ApiOperation(value = "獲取驗證碼", notes = "獲取驗證碼")
@GetMapping("/code")
public Object getCode(){
Captcha captcha = loginProperties.getCaptcha();
String uuid = "code-key-"+IdUtil.simpleUUID();
//當(dāng)驗證碼類型為 arithmetic時且長度 >= 2 時，captcha.text()的結(jié)果有幾率為浮點型
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);
// 驗證碼信息
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() {
// 獲取驗證碼
this.getCode()
},
</script>
|
|
|
