抖音实战~手机号一键注册登录流程（验证码+限制手机终端登录）

一、 一键注册登录流程

二、前端

2.1. 验证码获取

• 1.点击->获取验证码调用后端获取验证码api接口
• 2.验证码59秒倒计时
• 3.重复点击获取验证码,判断验证码倒计时是否大于0:
  • 3.1.如果大于0，获取验证码按钮不可触摸
  • 3.2.如果等于0，获取验证码调用后端获取验证码api接口

	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);
			},

2.2. 点击登陆

• 1.先校验手机号或者验验证码是否为空？为空，则提示“手机号或者验证码不能为空”
• 2.再校验填写的手机号是否符合手机号规则，不符合，则提示“填写手机号不合法”
• 3.校验通过后，则调用后端登录接口
• 4.后端返回结果
  • 4.1.成功，则保存用户信息+token信息
  • 4.2.失败：则提示后端返回的提示语

	var serverUrl = app.globalData.serverUrl;
				// 调用后端登录注册
				uni.request({
					method: "POST",
					url: serverUrl + "/passport/login",
					data: {
						"mobile": mobile,
						"smsCode": verifyCode
					},
					success(result) {
						var status = result.data.status;
						if (status == 200) {
							var userInfo = result.data.data;
							app.setUserInfoSession(userInfo);
							app.setUserSessionToken(userInfo.userToken);
							// 登录成功，关闭当前页
							// me.close();
							uni.reLaunch({
								url: "../me/me"
							})
						} else if (status != 200) {
							uni.showToast({
								title: result.data.msg,
								icon: "none",
								duration: 3000
							});
						}
					}
				});

三、后端验证码

3.1. 前置处理

由于为了避免频繁获取验证码导致无效的操作，因此，对验证码获取逻辑需要进行前置拦截处理。
根据用户ip进行限制，限制用户在60秒之内只能获得一次验证码

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

• 1.获取用户的ip
• 2.验证码redis存储key的前缀+获取用户的ip当做redis中的key，从redis中获取已经存储的请求请求ip
  • 1.如果redis中存在未过期的用户请求ip，则提示"短信发送太快啦~请稍后再试！"
  • 2.如果redis中，不存在用户请求ip，则放行，继续调用获取验证码接口api
    

3.2. 拦截器添加

3.3. 获取验证码

• 1.对输入框填写的数据进行校验，不合法则提示，合法继续。
• 2.获得用户请求ip
• 3.根据用户ip进行限制，限制用户在60秒之内只能获得一次验证码
• 4.生成随机6位验证码
• 5.调用腾讯/阿里短信服务，发送验证码
• 6.把验证码放入到redis中，用于后续的验证
• 7.返回验证码
  

四、后端登录

4.1. 登录流程图

会话拦截限制一台手机登录（流程图）

4.2. 流程简述

• 1.前端传递userId和token
• 2.后端接收userId和token
• 3.校验userId和token是否为空
• 4.校验任一为空，则提示“请登录后再继续操作！”
• 5.不为空，通过UserId从redis中获取token
• 6.redis中的token与传参token校验是否一致
• 7.不一致，第一台登录的会“会话失效，请重新登录！”
• 8.一致继续操作

备注：由于登录不拦截，因此当第二台手机登录时，token会将第一台手机的登录token进行覆盖

4.3. 登录流程

• 1.从redis中获得验证码进行校验是否匹配
• 2.查询数据库，判断用户是否存在
  • 2.1 如果用户为空，表示没有注册过，则为null，需要注册信息入库
  • 2.2 如果用户不为空，表示已经注册过，继续
• 3.如果不为空，可以继续下方业务，可以保存用户会话信息
• 4.用户登录注册成功以后，删除redis中的短信验证码
• 5.返回用户信息，包含token令牌

    @PostMapping("login")
    public GraceJSONResult login(@Valid @RequestBody RegistLoginBO registLoginBO,
                                 HttpServletRequest request) throws Exception {

        String mobile = registLoginBO.getMobile();
        String code = registLoginBO.getSmsCode();

        // 1. 从redis中获得验证码进行校验是否匹配
        String redisCode = redis.get(MOBILE_SMSCODE + ":" + mobile);
        if (StringUtils.isBlank(redisCode) || !redisCode.equalsIgnoreCase(code)) {
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SMS_CODE_ERROR);
        }

        // 2. 查询数据库，判断用户是否存在
        Users user = userService.queryMobileIsExist(mobile);
        if (user == null) {
            // 2.1 如果用户为空，表示没有注册过，则为null，需要注册信息入库
            user = userService.createUser(mobile);
        }

        // 3. 如果不为空，可以继续下方业务，可以保存用户会话信息
        String uToken = UUID.randomUUID().toString();
        redis.set(REDIS_USER_TOKEN + ":" + user.getId(), uToken);

        // 4. 用户登录注册成功以后，删除redis中的短信验证码
        redis.del(MOBILE_SMSCODE + ":" + mobile);

        // 5. 返回用户信息，包含token令牌
        UsersVO usersVO = new UsersVO();
        BeanUtils.copyProperties(user, usersVO);
        usersVO.setUserToken(uToken);
        return GraceJSONResult.ok(usersVO);
    }