滑动图块验证码如何解决



通常包含以下步骤：

1. 在

页面上展示

图片，并在提交表单时将

值一并提交到后端。

2. 后端接收到

值后，通过比较用户提交的

值和生成的

值是否一致来判断

是否正确。

3. 如果

正确，则继续进行

操作；否则返回错误提示信息。

下面是一个使用

和

的示例代码：

页面（使用Element UI库）：

 <template> <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item label=" 验证码 " prop="verifyCode"> <el-input v-model="loginForm.verifyCode" placeholder="请输入 验证码 "></el-input> <img :src="verifyCodeUrl" @click="refreshVerifyCode" style="cursor: pointer;"> </el-form-item> <el-form-item> <el-button type="primary" @click="login"> 登录 </el-button> </el-form-item> </el-form> </template>  <script> import { login } from '@/api/user'  export default { data() { return { loginForm: { username: '', password: '', verifyCode: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], verifyCode: [{ required: true, message: '请输入 验证码 ', trigger: 'blur' }] }, verifyCodeUrl: '/api/verifyCode?timestamp=' + new Date().getTime() } }, methods: { refreshVerifyCode() { this.verifyCodeUrl = '/api/verifyCode?timestamp=' + new Date().getTime() }, login() { this.$refs.loginForm.validate(valid => { if (valid) { login(this.loginForm).then(res => { // 登录 成功后的操作 }).catch(error => { // 登录 失败后的操作 }) } }) } } } </script> 

后端代码：

 java @RestController public class LoginController { @Autowired private RedisTemplate<String, String> redisTemplate;  @GetMapping("/api/verifyCode") public void verifyCode(HttpServletRequest request, HttpServletResponse response) throws Exception { // 生成 验证码 String verifyCode = VerifyCodeUtils.generateVerifyCode(4); // 将 验证码 存入Redis中，有效期为5分钟 String key = "verifyCode_" + request.getSession().getId(); redisTemplate.opsForValue().set(key, verifyCode, 5, TimeUnit.MINUTES); // 将 验证码 图片写入响应流中 response.setContentType("image/jpeg"); ServletOutputStream out = response.getOutputStream(); VerifyCodeUtils.outputImage(100, 40, out, verifyCode); }  @PostMapping("/api/login") public Result login(@RequestBody LoginForm form, HttpServletRequest request) { // 校验 验证码 String key = "verifyCode_" + request.getSession().getId(); String verifyCode = redisTemplate.opsForValue().get(key); if (StringUtils.isBlank(verifyCode)) { return Result.error(" 验证码 已过期，请重新获取"); } if (!verifyCode.equalsIgnoreCase(form.getVerifyCode())) { return Result.error(" 验证码 不正确"); } // 校验 用户名和密码 // ... return Result.ok(); } } 

其中，`VerifyCodeUtils`是一个工具类，用于生成

图片。`LoginForm`是一个表单类，用于接收

传递的用户名、密码和

值。`Result`是一个自定义的返回结果类，用于返回

结果和错误信息。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/5939.html