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

文章目录

• 
  
  
  
  • 
    
    
    
    • 
      
      
      
      • 
        
        
        
        • 一、手机号+验证码
          
        • 二、前端
          
        • 
          
          
          
          • 2.1. 点击登陆流程
            
          • 2.2. 点击登录源码
            
                
          
        • 三、后端登录
          
        • 
          
          
          
          • 3.1. 登录流程图
            
          • 3.2. 流程简述
            
          • 3.3. 手机号验证码登录流程
            
               
          
           
        
         
      
      
    
  
  

一、手机号+验证码


二、前端

2.1. 点击登陆流程

• 1.先校验手机号是否合法？不合法，则提示“请输入正确的手机号”
  
• 2.再校验是否勾选隐私协议，未勾选，则提示“请先同意《隐私及服务协议》”
  
• 3.校验通过后，根据选择的登录类型进行判断，最后，则调用后端手机号验证码登录接口
  
• 4.后端返回结果
  
  
  
  • 4.1.成功，则保存用户信息+token信息
    
  • 4.2.失败：则提示后端返回的提示语
    
  
  

2.2. 点击登录源码

1.                         loginOrRegist() {
2.                                 var me = this;
3.                                 var mobile = me.mobile;
4.                                 // 提交前，手机号校验
5.                                 var reg = /^1[0-9]{10,10}$/;
6.                                 if (!mobile || !reg.test(mobile)) {
7.                                         uni.showToast({
8.                                                 title: '请输入正确的手机号',
9.                                                 icon: 'none'
10.                                         })
11.                                         return
12.                                 }
14.                                 if (!this.agree) {
15.                                         uni.showToast({
16.                                                 title: '请先同意《隐私及服务协议》',
17.                                                 icon: 'none'
18.                                         });
19.                                         return;
20.                                 }
21.                                 var serverUrl = app.globalData.serverUrl;
23.                                 // 手机号密码~登录/注册
24.                                 if (!this.logintype) {
25.                                         var password = me.password;
27.                                         if (app.isStrEmpty(password)) {
28.                                                 uni.showToast({
29.                                                         title: "密码不能为空",
30.                                                         icon: "none"
31.                                                 });
32.                                                 return;
33.                                         }
35.                                         // uni.showLoading()
36.                                         // 调用后端登录注册
37.                                         uni.request({
38.                                                 method: "POST",
39.                                                 url: serverUrl + "/user/mobileAndPasswordRegistLogin",
40.                                                 data: {
41.                                                         "mobile": mobile,
42.                                                         "password": password
43.                                                 },
44.                                                 success(result) {
45.                                                         var status = result.data.status;
46.                                                         // uni.hideLoading();
47.                                                         if (status == 200) {
48.                                                                 var userInfo = result.data.data;
49.                                                                 console.log("密码->userInfo", userInfo)
51.                                                                 app.setUserInfoSession(userInfo);
52.                                                                 app.setUserSessionToken(userInfo.userToken);
53.                                                                 // 登录成功，关闭当前页
54.                                                                 // me.close();
55.                                                                 uni.reLaunch({
56.                                                                         url: "../me/me"
57.                                                                 })
58.                                                         } else if (status != 200) {
59.                                                                 uni.showToast({
60.                                                                         title: result.data.msg,
61.                                                                         icon: "none",
62.                                                                         duration: 3000
63.                                                                 });
64.                                                         }
65.                                                 }
66.                                         });
67.                                 }
69.                                 // 手机号验证码~登录/注册
70.                                 if (this.logintype) {
71.                                         var verifyCode = me.verifyCode;
72.                                         console.log("verifyCode", verifyCode)
73.                                         if (app.isStrEmpty(verifyCode)) {
74.                                                 uni.showToast({
75.                                                         title: "请填写验证码",
76.                                                         icon: "none"
77.                                                 });
78.                                                 return;
79.                                         }
81.                                         // 调用后端登录注册
82.                                         uni.request({
83.                                                 method: "POST",
84.                                                 url: serverUrl + "/user/login",
85.                                                 data: {
86.                                                         "mobile": mobile,
87.                                                         "smsCode": verifyCode
88.                                                 },
89.                                                 success(result) {
90.                                                         var status = result.data.status;
91.                                                         // uni.hideLoading();
92.                                                         if (status == 200) {
93.                                                                 var userInfo = result.data.data;
94.                                                                 console.log("验证码->userInfo", userInfo)
96.                                                                 app.setUserInfoSession(userInfo);
97.                                                                 app.setUserSessionToken(userInfo.userToken);
98.                                                                 // 登录成功，关闭当前页
99.                                                                 // me.close();
100.                                                                 uni.reLaunch({
101.                                                                         url: "../me/me"
102.                                                                 })
103.                                                         } else if (status != 200) {
104.                                                                 uni.showToast({
105.                                                                         title: result.data.msg,
106.                                                                         icon: "none",
107.                                                                         duration: 3000
108.                                                                 });
109.                                                         }
110.                                                 }
111.                                         });
112.                                 }
113.                         }

复制代码

三、后端登录

3.1. 登录流程图

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

3.2. 流程简述

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

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

3.3. 手机号验证码登录流程

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

1.     @PostMapping("login")
2.     public GraceJSONResult login(@Valid @RequestBody RegistLoginBO registLoginBO,
3.                                  HttpServletRequest request) throws Exception {
5.         String mobile = registLoginBO.getMobile();
6.         String code = registLoginBO.getSmsCode();
8.         // 1. 从redis中获得验证码进行校验是否匹配
9.         String redisCode = redis.get(MOBILE_SMSCODE + ":" + mobile);
10.         if (StringUtils.isBlank(redisCode) || !redisCode.equalsIgnoreCase(code)) {
11.             return GraceJSONResult.errorCustom(ResponseStatusEnum.SMS_CODE_ERROR);
12.         }
14.         // 2. 查询数据库，判断用户是否存在
15.         Users user = userService.queryMobileIsExist(mobile);
16.         if (user == null) {
17.             // 2.1 如果用户为空，表示没有注册过，则为null，需要注册信息入库
18.             user = userService.createUser(mobile);
19.         }
21.         // 3. 如果不为空，可以继续下方业务，可以保存用户会话信息
22.         String uToken = UUID.randomUUID().toString();
23.         redis.set(REDIS_USER_TOKEN + ":" + user.getId(), uToken);
25.         // 4. 用户登录注册成功以后，删除redis中的短信验证码
26.         redis.del(MOBILE_SMSCODE + ":" + mobile);
28.         // 5. 返回用户信息，包含token令牌
29.         UsersVO usersVO = new UsersVO();
30.         BeanUtils.copyProperties(user, usersVO);
31.         usersVO.setUserToken(uToken);
32.         return GraceJSONResult.ok(usersVO);
33.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！