springbooot使用google验证码
springbooot使用google验证码
- 1、使用场景
- 2、springboot使用google验证码
- 1、引入依赖
- 2、编写配置类
- 3、编写控制层
- 4、前端实现
1、使用场景
由于需要做一个前后端分离的项目,想着使用google验证码,由于年龄大了,这些知识啊,用完就忘,在这里记录一下。
登录时验证码设计:
- 使用google验证码工具,当前端在登录请求时,在后端生成验证码,同时也生成一个随机数(UUID)与该验证码对应。
- 使用redis作为缓存,将该随机数和验证码存储在redis中。
- 随机数的目的是将验证码与发起登录请求的用户联系起来。
- 当用户提交登录表单时,后端根据该随机数从redis中读取验证码与用户输入的验证码进行验证。
大概就是这样的一个设计思路,具体如下:
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 {@BeanDefaultKaptcha 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" style="width: 380px"><el-input placeholder="请输入验证码"v-model="loginForm.code"style="width: 172px; float: left" ></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.tokenthis.captchaImg = res.data.data.captchaImgthis.loginForm.code = ''})}
springbooot使用google验证码相关推荐
- 注册Maltego显示ReCaptcha is not valid,解决Google验证码服务reCaptcha失效问题
注册Maltego显示ReCaptcha is not valid,解决Google验证码服务reCaptcha失效问题 Maltego注册地址: https://www.paterva.com/we ...
- JAVA google验证码kaptcha 属性配置大全
property 说明 取值范围 默认值 kaptcha.border 图片边框 yes , no yes kaptcha.border.color 边框颜色 合法值:r,g,b (and optio ...
- Google验证码reCAPTCHA接入Web
文章目录 1. 介绍 2. 接入 (1) site key (2) 方式一:DOM中加入 (3) 方式二:Js 渲染 3. 配置 (1) 引用api.js的url参数 [1] onload [2] r ...
- Spring MVC 中使用 Google kaptcha 验证码
验证码是抵抗批量操作和恶意登录最有效的方式之一. 验证码从产生到现在已经衍生出了很多分支.方式.google kaptcha 是一个非常实用的验证码生成类库. 通过灵活的配置生成各种样式的验证码,并将 ...
- Nginx反向绑定域名方法和详细操作应用实例:Google和Gravatar
2019独角兽企业重金招聘Python工程师标准>>> 反向绑定域名,即将域名B绑定到域名A上,用户只要访问B就等同于进入A,内容都是由A提供,它有点像建立了一个A的镜像.什么时候要 ...
- php生成图片验证码-附五种验证码
这篇文章主要给大家讲解php生成图片验证码,包括数字验证码.数字和字母验证码.中文验证码.仿google验证码.算术验证码,实现此功能主要通过GD库,生成一张带有验证码的图片,并把验证码存在sessi ...
- PHP生成各种验证码和Ajax验证
转载链接:http://www.helloweba.com/view-blog-191.html 验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录.论坛恶意灌水等.本文将通 ...
- Laravel项目+Google验证器
1.首先要在你的Laravel项目中安装Google验证器插件.二维码生成器插件,执行命令如下: # Google验证器插件安装命令: composer require "earnp/lar ...
- 验证码研究入门必读(验证码是什么,有什么用,分类,设计,破解,未来发展)
和实验室师姐们共同完成了一篇关于验证码的英文综述,在写综述的过程中看了很多验证码方面的论文,在本博客中我将以偏科普的方式介绍一下验证码,希望能够使对该领域有兴趣的同学对于验证码有进一步的 ...
最新文章
- 【Qt】菜单栏、工具栏、状态栏、右键菜单的实现
- linux man命令的1和1p,Linux中man命令的使用方法再解释
- 面向新闻媒体的命名实体识别技术
- SolrCloud集群配置
- 特朗普为何喜欢马云?阿里巴巴开始拯救美国企业
- wordpressQQ登陆php代码,仅在登录时使用wordpress PHP代码
- linux lftp上传文件,linux中使用lftp上传下载文件
- Swift中文教程(五)控制流
- (72)加法器设计(全加器)
- Sequelize+MySQL存储emoji表情
- atitit.基于bat cli的插件管理系统.doc
- CV领域的国际国内期刊会议介绍
- colab挂载谷歌云盘出错
- android 键盘 横屏 边框,Android横屏时软键盘全屏问题
- Mac电脑如何添加打印机?
- MIPS汇编程序设计实验
- 省份和城市的级联下拉菜单
- 华为智慧屏鸿蒙系统深度评测,八个维度深度评测华为荣耀智慧屏
- 小程序云开发支持公众号网页开发了
- 自编真假探测游戏来了 好玩