抖音App|抖音实战~手机号一键注册登录流程（验证码）抖音App|验证码

文章图片

文章图片

文章目录

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

一、一键注册登录流程

文章图片

二、前端 2.1. 验证码获取流程

1.点击->获取验证码调用后端获取验证码api接口
2.验证码59秒倒计时
3.重复点击获取验证码,判断验证码倒计时是否大于0:
- 3.1.如果大于0，获取验证码按钮不可触摸
- 3.2.如果等于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
- 1.如果redis中存在未过期的用户请求ip，则提示"短信发送太快啦~请稍后再试！"
- 2.如果redis中，不存在用户请求ip，则放行，继续调用获取验证码接口api
  
  文章图片