2023-12-26 生成/校验图片验证码

作者: 大也 | 来源:发表于2024-01-01 10:28 被阅读0次

SpringBoot SpringSecurity(三)添加登陆
Java生成图片验证码
Restful风格的验证码
Django项目用户注册功能（三）
验证码校验的玩法，从单台、集群到分布式
Django ORM性能优化和图片验证码
验证码校验功能实现----Session
Python生成字母验证码图片
java——图形验证码
参考的文章

注意点 hutool jar包内功能的认识

image.png

人话

6bb071e350bc3af0dce8c435ded813f2.jpg

-----生成
1.model
@Data
@Schema(description = "验证码响应结果实体类")
public class ValidateCodeVo {

/**
 // 验证码的key
 * */
@Schema(description = "验证码key")
private String codeKey ;

/**
 // 图片验证码对应的字符串数据
 * */
@Schema(description = "验证码value")
private String codeValue ;

}

2.controller
/**
图片验证码
* */
@Autowired
private ValidateCodeService validateCodeService;

/**
 1.通过工具生成图片二维码 // hutool
 2。把验证码存储到redis key uuid value验证码值
 设置过期时间
 3。返回对象 ValidateCodeVo
 * */
@GetMapping("generateValidateCode")
public  Result<ValidateCodeVo> generateValidateCode(){
    ValidateCodeVo validateCodeVo = validateCodeService.generateValidateCode();
    return Result.build(validateCodeVo , ResultCodeEnum.SUCCESS) ;
}

3.Service
/**

className:{ValidateCodeService}
/
public interface ValidateCodeService {
/*
生成验证码
- */
  ValidateCodeVo generateValidateCode() ;
  }
  3.1ServiceImpl

/**

className:{ValidateCodeServiceImpl}
*/
@Service
public class ValidateCodeServiceImpl implements ValidateCodeService {

@Autowired
private RedisTemplate<String,String> redisTemplate;

/**
生成验证码
- /
  @Override
  public ValidateCodeVo generateValidateCode() {
  /*
  1.通过工具生成图片二维码 // hutool
  2。把验证码存储到redis key uuid value验证码值
  设置过期时间
  3。返回对象 ValidateCodeVo
  - */
    //1
    CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(150,48,4,2);
    String code = circleCaptcha.getCode();
    String imageStr = circleCaptcha.getImageBase64();
    //2
    String key = UUID.randomUUID().toString().replaceAll("-","");
    redisTemplate.opsForValue().set("user:validate"+key,code,5, TimeUnit.MINUTES);
    ValidateCodeVo validateCodeVo = new ValidateCodeVo();
    validateCodeVo.setCodeKey(key);
    validateCodeVo.setCodeValue("data:image/png;base64,"+imageStr);
    return validateCodeVo;
    }
    }
    -----校验。在登陆逻辑里面校验

/**10。1
1.获取输入验证码和存储到redis的key名称 loginDto获取到
2。根据获取的redis里面key ，查询redis里面存储验证码
3 比较输入的验证码和 redis存储验证码是否一致
4 如果不一致，提示用户，校验失败
5 如果一致，删除redis里面验证码
* */
@Override
public LoginVo adminSystemIndexLogin(LoginDto loginDto) {
//10。1
String captcha = loginDto.getCaptcha();
String key = loginDto.getCodeKey();
//10。2
String redisTemplateCaptcha = redisTemplate.opsForValue().get("user:validate"+key);
//10.3
if (StrUtil.isEmpty(redisTemplateCaptcha) || !StrUtil.equalsIgnoreCase(captcha,redisTemplateCaptcha)) {
//10.4
throw new GuiguException(ResultCodeEnum.VALIDATECODE_ERROR);
}
//10.5
redisTemplate.delete("user:validate"+key);

//////////////////////////////////////////////
生成/校验图片前端代码修改

'rules-validate-code': '验证码不能为空'

image.png

// 获取验证码
export const GetValidateCode = () => {
return request({
url: "/admin/system/index/generateValidateCode",
method: 'get'
})
}

image.png
3.替换

<template>
<div class="login">
<el-form class="form" :model="model" :rules="rules" ref="loginForm">
<h1 class="title">尚品甄选后台管理系统</h1>
<el-form-item prop="userName">
<el-input
class="text"
v-model="model.userName"
prefix-icon="User"
clearable
:placeholder="

t('login.username')" /> </el-form-item> <el-form-item prop="password"> <el-input class="text" v-model="model.password" prefix-icon="Lock" show-password clearable :placeholder="

t('login.password')"
/>
</el-form-item>

  <el-form-item prop="captcha">
      <div class="captcha">
          <el-input
                    class="text"
                    v-model="model.captcha"
                    prefix-icon="Picture"
                    placeholder="请输入验证码"
                    ></el-input>
          <img :src="captchaSrc" @click="refreshCaptcha" />
      </div>
  </el-form-item>

  <el-form-item>
    <el-button
      :loading="loading"
      type="primary"
      class="btn"
      size="large"
      @click="submit"
    >
      {{ btnText }}
    </el-button>
  </el-form-item>
</el-form>

</div>
<div class="change-lang">
<change-lang />
</div>
</template>

export default defineComponent({
components: { ChangeLang },
name: 'login',
setup() {
const { proxy: ctx } = getCurrentInstance() // 可以把ctx当成vue2中的this
const router = useRouter()
const route = useRoute()
const { lang } = useLang()
watch(lang, () => {
state.rules = getRules()
})
const getRules = () => ({
userName: [
{
required: true,
message: ctx. $t('login.rules-username'), trigger: 'blur', }, ], password: [ { required: true, message: ctx.$ t('login.rules-password'),
trigger: 'blur',
},
{
min: 6,
max: 12,
message: ctx. $t('login.rules-regpassword'), trigger: 'blur', }, ], captcha: [ { required: true, message: ctx.$ t('login.rules-validate-code'),
trigger: 'blur',
},
],

})

// onMounted钩子函数
onMounted(() => {
  state.refreshCaptcha()
})

const state = reactive({
  model: {
    userName: 'admin',
    password: '111111',
    captcha: '',      // 用户输入的验证码
    codeKey: ''       // 后端返回的验证码key
  },
  rules: getRules(),
  loading: false,
  captchaSrc: "" ,
  refreshCaptcha: async () => {
      const { data } = await GetValidateCode() ;
      state.model.codeKey = data.codeKey
      state.captchaSrc = data.codeValue
  },
  btnText: computed(() =>
    state.loading ? ctx.$t('login.logining') : ctx.$t('login.login')
  ),
  loginForm: ref(null),
  submit: () => {
    if (state.loading) {
      return
    }
    state.loginForm.validate(async valid => {
      if (valid) {
        state.loading = true
        const { code, data, message } = await Login(state.model)
        if (+code === 200) {
          ctx.$message.success({
            message: ctx.$t('login.loginsuccess'),
            duration: 1000,
          })

          const targetPath = decodeURIComponent(route.query.redirect)
          if (targetPath.startsWith('http')) {
            // 如果是一个url地址
            window.location.href = targetPath
          } else if (targetPath.startsWith('/')) {
            // 如果是内部路由地址
            router.push(targetPath)
          } else {
            router.push('/')    // 请求成功以后，进入到首页
          }
          useApp().initToken(data)
        } else {
          ctx.$message.error(message)
        }
        state.loading = false
      }
    })
  },
})

return {
  ...toRefs(state),
}

},
})
</script>

.captcha {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}

.captcha img {
cursor: pointer;
margin-left: 20px;
}

.change-lang {
position: fixed;
right: 20px;
top: 20px;
:deep {
.change-lang {
height: 24px;
&:hover {
background: none;
}
.icon {
color: #fff;
}
}
}
}
</style>

image.png

SpringBoot SpringSecurity(三)添加登陆
生成图形验证码改造登陆页认证流程添加验证码校验添加验证码大致可以分为三个步骤：根据随机数生成验证码图片；将验...
Java生成图片验证码
Java生成图片验证码手动实现图片验证码生成调用演示
Restful风格的验证码
Restful风格的验证码 Restful风格的验证码接口生成验证码接口信息前端显示校验接口信息前端校验移动端...
Django项目用户注册功能（三）
一、获取短信验证码 1.业务流程分析校验手机号码校验图形验证码校验有效时间内有送记录生成短信验证码发送短...
验证码校验的玩法，从单台、集群到分布式
验证码的校验原理其实很简单：客户端请求验证码；服务端生成校验码（code_key-code_value），co...
Django ORM性能优化和图片验证码
一，ORM性能相关二，图片验证码 1，随机生成五位数的验证码 2，随机生成位数的图片验证码
验证码校验功能实现----Session
要实现页面验证码的校验，首先我们要先生成验证码我们需要先准备一些东西1）验证码生成的java类文件以及字段.txt...
Python生成字母验证码图片
使用Python生成字母验证码图片：
java——图形验证码
文件结构 1.创建一个存储验证码信息的类，用于校验，这里不做校验，这个类意义不大 2.创建图形验证码的生成器 3....
参考的文章
验证码图片验证码前端怎样获取后端生成的验证码图片，并且点击图片的时候改变验证码记住密码前端记住密码功能密码安...