温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

springbooot使用google验证码的功能怎么实现

发布时间:2023-05-04 16:50:02 来源:亿速云 阅读:193 作者:iii 栏目:开发技术

本篇内容主要讲解“springbooot使用google验证码的功能怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“springbooot使用google验证码的功能怎么实现”吧!

springbooot使用google验证码

1、使用场景

由于需要做一个前后端分离的项目,想着使用google验证码,由于年龄大了,这些知识啊,用完就忘,在这里记录一下。

登录时验证码设计

  • 使用google验证码工具,当前端在登录请求时,在后端生成验证码,同时也生成一个随机数(UUID)与该验证码对应。

  • 使用redis作为缓存,将该随机数和验证码存储在redis中。

  • 随机数的目的是将验证码与发起登录请求的用户联系起来。

  • 当用户提交登录表单时,后端根据该随机数从redis中读取验证码与用户输入的验证码进行验证。

大概就是这样的一个设计思路,具体如下:

springbooot使用google验证码的功能怎么实现

2、springboot使用google验证码

1、引入依赖

首先在pom文件中引入该验证码插件kaptcha

 <!-- google 验证码 -->
        <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>
2、编写配置类

引入依赖之后还需要编写配置类,在配置类里设置自己想要的验证码样式,包括颜色、大小、宽高等等。

我的配置类如下:

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.Properties;
@Configuration
public class KaptchaConfig {
       @Bean
    DefaultKaptcha producer() { //验证码的配置类
        Properties properties = new Properties();                       
        properties.put("kaptcha.border", "no");                       //边框
        properties.put("kaptcha.textproducer.font.color", "black");   //字体颜色
        properties.put("kaptcha.textproducer.char.space", "5");       //字体间隔
        properties.put("kaptcha.image.height", "40");                 //图片高度
        properties.put("kaptcha.image.width", "100");                 //图片宽度
        properties.put("kaptcha.textproducer.font.size", "30");       //字体大小
        Config config = new Config(properties);                       
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();         
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}
3、编写控制层

将下面的代码放到需要使用验证码的controller中

//获取登录验证码
    @GetMapping("/captcha")
    public Result Captcha() throws IOException {
        String key = UUID.randomUUID().toString();
        String code = producer.createText();
        BufferedImage image = producer.createImage(code);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", outputStream);
        BASE64Encoder encoder = new BASE64Encoder();
        String str = "data:image/jpeg;base64,";
        String base64Img = str + encoder.encode(outputStream.toByteArray());
        redisUtils.hset(Constants.CAPTCHA_KEY, key, code, 120);
        return Result.succ(
                MapUtil.builder()
                        .put("userKey", key)
                        .put("captchaImg", base64Img)
                        .build()
        );
    }

上面用到了封装的redis工具类redisUtils中的hset方法,并设置了验证码过期时间120秒。
hset方法如下:

/**
     * 向一张hash表中放入数据,如果不存在将创建
     *
     * @param key   键
     * @param item  项
     * @param value 值
     * @param time  时间(秒) 注意:如果已存在的hash表有时间,这里将会替换原有的时间
     * @return true 成功 false失败
     */
    public boolean hset(String key, String item, Object value, long time) {
        try {
            redisTemplate.opsForHash().put(key, item, value);
            if (time > 0) {
                expire(key, time);
            }
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

Result是编写的统一结果返回类,代码如下所示:

@Data
public class Result_ implements Serializable {
    private int code;
    private String msg;
    private Object data;
    public static Result_ succ(Object data) {
        return succ(200, "操作成功", data);
    }
    public static Result_ fail(String msg) {
        return fail(400, msg, null);
    }
    public static Result_ succ (int code, String msg, Object data) {
        Result_ result = new Result_();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }
    public static Result_ fail (int code, String msg, Object data) {
        Result_ result = new Result_();
        result.setCode(code);
        result.setMsg(msg);
        result.setData(data);
        return result;
    }
}

这里没有编写对于验证码的验证。

4、前端实现

验证码输入框代码如下:

<el-form-item label="验证码" prop="code" >
                          <el-input placeholder="请输入验证码"v-model="loginForm.code" ></el-input>
                          <el-image class="captchaImg" :src="captchaImg" @click="getCaptcha()"></el-image>
                      </el-form-item>

验证码函数如下:

// 获取验证码
        getCaptcha() {
            this.$axios.get('/user/captcha1').then(res => {
                this.loginForm.token = res.data.data.token
                this.captchaImg = res.data.data.captchaImg
                this.loginForm.code = ''
            })
        }

到此,相信大家对“springbooot使用google验证码的功能怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI