Java与JavaScript前后端实现手机号验证码一键注册登陆抖音流程

目录
  • 一、一键注册登录流程
  • 二、前端
    • 2.1. 验证码获取流程
    • 2.2. 验证码获取代码
  • 三、后端验证码
    • 3.1. 前置处理
    • 3.2. 拦截器添加
    • 3.3. 获取验证码

一、一键注册登录流程

二、前端

2.1. 验证码获取流程

1.点击->获取验证码调用后端获取验证码api接口

2.验证码59秒倒计时

3.重复点击获取验证码,判断验证码倒计时是否大于0:

  • 如果大于0，获取验证码按钮不可触摸
  • 如果等于0，获取验证码调用后端获取验证码api接口

2.2. 验证码获取代码

	var serverUrl = app.globalData.serverUrl;
				// 调用后端发送验证码
				uni.request({
					method: "POST",
					url: serverUrl + "/passport/getSMSCode?mobile=" + mobile,
					success(result) {
						var status = result.data.status;
						if (status != 200) {
							uni.showToast({
								title: result.data.msg,
								icon: "none"
							});
						}
						// 开始倒数60秒限制
						if(me.codeTimes == 0) {
							me.doTimer(59);
						}
					}
				});
			},
			// 发送验证码的倒计时方法
			doTimer(times) {
				var me = this;
				// 倒计时定时器
				var sendCodeBtnFunction = function(){
					var left = times--;
					if (left <= 0) {
						me.codeTouched = false;
						me.codeBtnText = "发送验证码";
						clearInterval(smsTimer);
					} else {
						me.codeBtnText = left + "s";
					}
					me.codeTimes = left;
				};
				var smsTimer = setInterval(sendCodeBtnFunction, 1000);
			},

三、后端验证码

3.1. 前置处理

由于为了避免频繁获取验证码导致无效的操作，因此，对验证码获取逻辑需要进行前置拦截处理。

根据用户ip进行限制，限制用户在60秒之内只能获得一次验证码

先进入->验证码前置拦截处理:

1.获取用户的ip

2.验证码redis存储key的前缀+获取用户的ip当做redis中的key，从redis中获取已经存储的请求请求ip

  • 如果redis中存在未过期的用户请求ip，则提示"短信发送太快啦~请稍后再试！"
  • 如果redis中，不存在用户请求ip，则放行，继续调用获取验证码接口api

3.2. 拦截器添加

3.3. 获取验证码

1.对输入框填写的数据进行校验，不合法则提示，合法继续。

2.获得用户请求ip

3.根据用户ip进行限制，限制用户在60秒之内只能获得一次验证码

4.生成随机6位验证码

5.调用腾讯/阿里短信服务，发送验证码

6.把验证码放入到redis中，用于后续的验证

7.返回验证码

到此这篇关于Java详解手机号验证码一键注册登陆抖音流程的文章就介绍到这了,更多相关Java注册登陆内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Java用20行代码实现抖音小视频批量转换为gif动态图

    Java用20行代码实现抖音小视频批量转换为gif动态图

    本文主要介绍了Java用20行代码实现抖音小视频批量转换为gif动态图,分享给大家,具体如下: 效果图 本功能实现需要用到第三方jar包 jave,JAVE 是java调用FFmpeg的封装工具. spring boot项目pom文件中添加以下依赖 <!-- https://mvnrepository.com/artifact/ws.schild/jave-core --> <dependency> <groupId>ws.schild</groupId>

  • java实现抖音代码舞源码

    本文实例为大家分享了java实现抖音代码舞源码,供大家参考,具体内容如下 Client.java package com.dance; import java.awt.Container; import java.awt.EventQueue; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.image.Buffere

  • java实现抖音飞机大作战

    本文实例为大家分享了java抖音飞机大作战的具体代码,供大家参考,具体内容如下 Airplane.java package zmf.game.shoot; import java.util.Random; /** * @author jcf * @Description: Airplane----敌机既是飞行物 * @date 2018-03-28 11:17:16 */ public class Airplane extends FlyingObject implements Enemy{ /

  • Java实现超简单抖音去水印的示例详解

    Java实现超简单抖音去水印的示例详解

    目录 一.前言 二.原理与步骤 三.代码实现 四.总结 一.前言 抖音去水印方法很简单,以前一直没有去研究,以为搞个去水印还要用到算法去除,直到动手的时候才发现这么简单,不用编程基础都能做. 二.原理与步骤 其实抖音它是有一个隐藏无水印地址的,只要我们找到那个地址就可以了 1.我们在抖音找一个想要去水印的视频链接 注意:这里一定要是https开头的,不是口令 打开浏览器访问: 访问之后会重定向到这个地址,后面有一串数字,这个就是视频的id,他是根据这个唯一id来找到视频播放的 按F12查看网络请

  • Java与JavaScript前后端实现手机号验证码一键注册登陆抖音流程

    Java与JavaScript前后端实现手机号验证码一键注册登陆抖音流程

    目录 一.一键注册登录流程 二.前端 2.1. 验证码获取流程 2.2. 验证码获取代码 三.后端验证码 3.1. 前置处理 3.2. 拦截器添加 3.3. 获取验证码 一.一键注册登录流程 二.前端 2.1. 验证码获取流程 1.点击->获取验证码调用后端获取验证码api接口 2.验证码59秒倒计时 3.重复点击获取验证码,判断验证码倒计时是否大于0: 如果大于0,获取验证码按钮不可触摸 如果等于0,获取验证码调用后端获取验证码api接口 2.2. 验证码获取代码 var serverUrl

  • 基于Java SpringBoot的前后端分离信息管理系统的设计和实现

    基于Java SpringBoot的前后端分离信息管理系统的设计和实现

    目录 前言 视频演示 主要功能说明 功能截图 主要代码实现 主要数据表设计 前言 当今社会,随着科学技术的发展,以及市场经济的多元化,使人才的流动速度大大增加,因此也对党建工作的管理层面工作带来了空前且复杂的挑战, 从而使得如何高效的开展管理党建工作成为了亟待解决的问题.为此将高速发展的信息科学技术引入到党建工作管理的应用中,力求合理有效的提升全面各项工作的进展,实现以人为本的科学发展思想和意识,是一种高效可实现的方法. Java作为一种面向对象的.可以撰写跨平台应用软件的程序设计语言,其技术具

  • Java SSM实现前后端协议联调详解下篇

    Java SSM实现前后端协议联调详解下篇

    目录 前后台协议联调 修改功能 删除功能 完整页面 前后台协议联调 修改功能 需求:完成图书信息的修改功能 找到页面中的编辑按钮,该按钮绑定了@click="handleUpdate(scope.row)" 在method的handleUpdate方法中发送异步请求根据ID查询图书信息 根据后台返回的结果,判断是否查询成功,如果查询成功打开修改面板回显数据,如果失败提示错误信息 修改完成后找到修改面板的确定按钮,该按钮绑定了@click="handleEdit()"

  • JavaScript前后端JSON使用方法教程

    汇总整理下JSON在JavaScript前后端中的使用方法,包括字符串和JSON对象的互转,JSON数组的遍历,JSON对象key值的获取,JSON内容格式化输出到文件,读取JSON内容文件转化为JSON对象等. 一.JavaScript后端JSON操作方法 1.JavaScript JSON字符串转JSON对象 var testStr = '{"name":"will","age":18,"hobby":"foot

  • SpringBoot前后端分离实现验证码操作

    SpringBoot前后端分离实现验证码操作

    目录 1.SpringBoot版本 2.引入依赖 3.实现思路 新建验证码枚举类 定义验证码配置信息 定义验证逻辑生成类 在控制层上定义验证码生成接口 效果体验 在前端调用接口 1.SpringBoot版本 本文基于的Spring Boot的版本是2.6.7 . 2.引入依赖 captcha一款超简单的验证码生成,还挺好玩的.还有中文验证码,动态验证码. .在项目中pom.xml配置文件中添加依赖,如下: <!--验证码--> <dependency> <groupId>

  • Java SSM实现前后端协议联调详解上篇

    Java SSM实现前后端协议联调详解上篇

    目录 环境准备 列表功能 添加功能 添加功能状态处理 环境准备 项目结构与前文相同: 我们添加新的静态资源: 因为添加了静态资源,SpringMVC会拦截,所有需要在SpringConfig的配置类中将静态资源进行放行: 我们新建SpringMvcSupport @Configuration public class SpringMvcSupport extends WebMvcConfigurationSupport { @Override protected void addResource

  • 一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

  • 详解前后端分离之Java后端

    详解前后端分离之Java后端

    前后端分离的思想由来已久,不妨尝试一下,从上手开始,先把代码写出来再究细节. 代码下载:https://github.com/jimolonely/AuthServer 前言 以前服务端为什么能识别用户呢?对,是session,每个session都存在服务端,浏览器每次请求都带着sessionId(就是一个字符串),于是服务器根据这个sessionId就知道是哪个用户了. 那么问题来了,用户很多时,服务器压力很大,如果采用分布式存储session,又可能会出现不同步问题,那么前后端分离就很好的解

  • 基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践

    基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践

    淘宝网线上应用的传统软件栈结构为 Nginx + Velocity + Java,即: 在这个体系中,Nginx 将请求转发给 Java 应用,后者处理完事务,再将数据用 Velocity 模板渲染成最终的页面. 引入 Node.js 之后,我们势必要面临以下几个问题: 技术栈的拓扑结构该如何设计,部署方式该如何选择,才算是科学合理?项目完成后,该如何切分流量,对运维来说才算是方便快捷?遇到线上的问题,如何最快地解除险情,避免更大的损失?如何确保应用的健康情况,在负载均衡调度的层面加以管理?承系

随机推荐