一看就懂！Springboot+Vue实现自己谷歌验证码生成器

谷歌验证码这东西就相当于银行的“电子动态口令”密码器：通过用户名与密码登录手机银行后，付款、转账时则要用到动态口令。不过银行的动态口令卡往往是个硬件实体，而谷歌身份验证器是个手机app
玩游戏的朋友也不陌生，许多网游需要二步验证：登录游戏后可以进行普通的游戏操作，但打开仓库、买卖道具时，就要用到它的专用的二步验证app。

核心就是一个谷歌开源的算法，外面公司采用这个算法计算出验证码，而你也需要利用这个算法计算出验证码，两者匹配成功才算验证成功。

目前市面上有谷歌验证码的App。但是公司内部的关键密钥交由第三方应用计算怎么看也不安全，关键是忘记了密钥还没法子找回。于是公司就瞄上了我，让我整个自己的谷歌验证码生成器。

回到正题：

后端基于：Springboot+JPA

前端基于：Vue+ElementUI

首先双手奉上源码：

后台代码：https://github.com/FENGZHIJIE1998/GoogleAuth

前端代码：https://github.com/FENGZHIJIE1998/GoogleAuth-vue

 

然后我们来看看项目效果

登录拦截效果：

验证码刷新获取效果：

新增密钥效果：

安全退出系统效果：

 

 

项目介绍：

基于拦截器的登录拦截：

详细介绍请戳：https://blog.csdn.net/weixin_42236404/article/details/105252892

基于@Schedule的定时刷新：

详细介绍请戳：https://blog.csdn.net/weixin_42236404/article/details/105158425

验证码的算法：

这个算法是开源的，本人也是网上找的代码，直接用即可。详细见项目文件DynamicToken以及Base32String。

 

多定时器效果：

 

总结：总体来说这个项目还是比较简单实现的，个人也是拿来当作VUE的实战项目，如果VUE项目中多有不对请指出。在项目中的问题大多数是前端进行拦截的问题。一开始我采用的是用户访问后再发起刷新请求，发现这样会有时间差，所以改成了后台定时刷新，这样做的问题是服务器会频繁刷新，浪费性能。后来我又想到在刷新的时候多一步计时取整即可。但个人关系就没改回来啦。

  //对 过期时间进行取整操作
        if (expire.getSecond() < 30) {
            // 过期时间小于30  置为0
            expire = LocalDateTime.of(expire.getYear(), expire.getMonth(), expire.getDayOfMonth(), expire.getHour(), expire.getMinute(), 0);
        } else {
            // 过期时间大于等于30 置为30
            expire = LocalDateTime.of(expire.getYear(), expire.getMonth(), expire.getDayOfMonth(), expire.getHour(), expire.getMinute(), 30);
        }

 

---

有什么问题可以评论或者私信我，每日在线解（LIAO）疑（SAO）。

我是大誌，一位准备996的卑微码农，觉得好用记得点赞收藏！！！