一看就懂！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。

多定时器效果：

<script>
export default {methods: {/*** 列出数据*/list() {this.$axios({method: "GET",url: "/googleauth/listAll",data: {}}).then(result => {var data = result.data;if (data.status === 200) {this.tableData = data.data;//为每一行设置倒计时for (var i = this.tableData.length - 1; i >= 0; i--) {this.setEndTime(this.tableData[i]);}} else {this.$message({showClose: true,message: "获取失败，请联系管理员",type: "error",duration: "3000"});return;}});},/*** 定时器刷新*/setEndTime(entity) {var that = this;that.$set(entity, "remainingTime", "读取中...");var interval = setInterval(function timestampToTime() {//计算剩余的毫秒数var date = new Date(entity.expire) - new Date();if (date <= 0) {that.clearTimer();//clearInterval(interval);that.list();} else {const d = Math.floor(date / 1000 / 60 / 60 / 24);const h = Math.floor((date / 1000 / 60 / 60) % 24);const m = Math.floor((date / 1000 / 60) % 60);const s = Math.floor((date / 1000) % 60);const remainingTime = `剩余${d > 0 ? d + "天" : ""}${that.formatNumber(h)}:${that.formatNumber(m)}:${that.formatNumber(s)}`;that.$set(entity, "remainingTime", remainingTime);}}, 1000);this.timer.push(interval);this.$set(entity, "interval", interval);},formatNumber(n) {// return n.toString().padStart(2, '0');  // 用padStart方法要注意兼容问题n = n.toString();return n[1] ? n : "0" + n;},clearTimer() {//清理定时器if (this.timer.length > 0) {for (var i = this.timer.length - 1; i >= 0; i--) {clearInterval(this.timer[i]);}}}},data() {return {//code 数据tableData: [],// 定时器timer: []};},mounted() {//每次挂载重新获取数据this.list();},destroyed() {   //每次离开清除定时器this.clearTimer();}
};
</script>

总结：总体来说这个项目还是比较简单实现的，个人也是拿来当作VUE的实战项目，如果VUE项目中多有不对请指出。在项目中的问题大多数是前端进行拦截的问题

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

一看就懂的vue简版源码概述
本文不会拆步骤对源码进行实现,只介绍vue原理及相关核心实现思想.在之前的四篇文章中已对vue进行响应实现.需要可阅读相关文章: Vue源码探索之知识小储备 --Object.defineProper ...
一看就懂的vue移动端实现左滑删除功能
效果图页面模板代码 <div><move-left v-if="list.length>0" :list="list" :del_wi ...
小白都看得懂的使用Python生成随机验证码图片，以及后续优化方案
环境:Anaconda3-2020.02 首先我们分解一下需要做什么: 生成随机的字母字符串生成生成随机的背景色生成随机的字体颜色把随机的字符串用随机的颜色渲染,然后放到一块随机的背景色上面,基 ...
SpringBoot整合kaptcha（谷歌验证码工具）实现验证码功能
介绍: kaptcha是Google提供的一个图形验证码插件,有了它,你可以通过简单的配置生成各种样式的验证码. 1:SpringBoot引入kaptcha的依赖 <dependency> ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
SpringBoot + Vue 开发前后端分离的旅游管理系统
旅游管理系统项目简介项目演示数据库建表环境搭建引入依赖(pom.xml) 配置文件(application.properties) href="javascript:;" ...
Springboot+vue开发的图书借阅管理系统项目源码下载-P0029
前言图书借阅管理系统项目是基于SpringBoot+Vue技术开发而来,功能相对比较简单,分为两个角色即管理员和学生用户,核心业务功能就是图书的发布.借阅与归还,相比于一些复杂的系统,该项目具备简单 ...
从0到1编写个人博客项目使用springboot+vue(前后端分离) 到购买服务器上传项目到 GitHub开源项目、此过程下所遇问题及解决方法，至少你帮你少走70%弯路
个人博客编写后记 2022.12.2.4 : 30.此项目告一段落. 编撰此博客本意里除去对找工作的帮助.更多地是想帮助未走过的人去探探路.总结经验.少走弯路.知识的宝贵不在于无价.而是无私.天 ...
使用Gradle整合SpringBoot+Vue.js-开发调试与打包
为什么80%的码农都做不了架构师?>>> 非常感谢两位作者: kevinz分享的文章<springboot+gradle+vue+webpack 组合使用> 首席卖 ...

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

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

最新文章

热门文章