Tiktok practice ~ one click registration and login process of mobile phone number and password (restrict mobile terminal login)

One 、 cell-phone number + password

Two 、 front end

2.1. Click login process

• 1. First verify whether the mobile phone number is legal ？ illegal , Prompt “ Please input the correct mobile number ”
• 2. Verify whether the privacy agreement is checked , Uncheck , Prompt “ Please agree first 《 Privacy and service agreement 》”
• 3. After the verification is passed , Judge according to the selected login type , Last , Then call the backend mobile number verification code login interface
• 4. The back end returns the result
  • 4.1. success , Save the user information +token Information
  • 4.2. Failure ： Prompt the prompt returned by the backend

2.2. Click to log in to the source code

			loginOrRegist() {
    
				var me = this;
				var mobile = me.mobile;
				//  Before submission , Cell phone number verification 
				var reg = /^1[0-9]{
    10,10}$/;
				if (!mobile || !reg.test(mobile)) {
    
					uni.showToast({
    
						title: ' Please input the correct mobile number ',
						icon: 'none'
					})
					return
				}

				if (!this.agree) {
    
					uni.showToast({
    
						title: ' Please agree first 《 Privacy and service agreement 》',
						icon: 'none'
					});
					return;
				}
				var serverUrl = app.globalData.serverUrl;

				//  Mobile phone number and password ~ Sign in / register 
				if (!this.logintype) {
    
					var password = me.password;

					if (app.isStrEmpty(password)) {
    
						uni.showToast({
    
							title: " The password cannot be empty ",
							icon: "none"
						});
						return;
					}

					// uni.showLoading()
					//  Call back-end login registration 
					uni.request({
    
						method: "POST",
						url: serverUrl + "/user/mobileAndPasswordRegistLogin",
						data: {
    
							"mobile": mobile,
							"password": password
						},
						success(result) {
    
							var status = result.data.status;
							// uni.hideLoading();
							if (status == 200) {
    
								var userInfo = result.data.data;
								console.log(" password ->userInfo", userInfo)

								app.setUserInfoSession(userInfo);
								app.setUserSessionToken(userInfo.userToken);
								//  Login successful , Close current page 
								// me.close();
								uni.reLaunch({
    
									url: "../me/me"
								})
							} else if (status != 200) {
    
								uni.showToast({
    
									title: result.data.msg,
									icon: "none",
									duration: 3000
								});
							}
						}
					});
				}

				//  Mobile phone number verification code ~ Sign in / register 
				if (this.logintype) {
    
					var verifyCode = me.verifyCode;
					console.log("verifyCode", verifyCode)
					if (app.isStrEmpty(verifyCode)) {
    
						uni.showToast({
    
							title: " Please fill in the verification code ",
							icon: "none"
						});
						return;
					}

					//  Call back-end login registration 
					uni.request({
    
						method: "POST",
						url: serverUrl + "/user/login",
						data: {
    
							"mobile": mobile,
							"smsCode": verifyCode
						},
						success(result) {
    
							var status = result.data.status;
							// uni.hideLoading();
							if (status == 200) {
    
								var userInfo = result.data.data;
								console.log(" Verification Code ->userInfo", userInfo)

								app.setUserInfoSession(userInfo);
								app.setUserSessionToken(userInfo.userToken);
								//  Login successful , Close current page 
								// me.close();
								uni.reLaunch({
    
									url: "../me/me"
								})
							} else if (status != 200) {
    
								uni.showToast({
    
									title: result.data.msg,
									icon: "none",
									duration: 3000
								});
							}
						}
					});
				}
			}

3、 ... and 、 Back end login

3.1. Login flowchart

Session interception restricts the login of one mobile phone （ flow chart ）

3.2. Process brief

• 1. Front end delivery userId and token
• 2. Back end reception userId and token
• 3. check userId and token Is it empty
• 4. Verify that any one is empty , Prompt “ Please log in and continue ！”
• 5. Not empty , adopt UserId from redis In order to get token
• 6.redis Medium token And Chuan Shen token Check for consistency
• 7. atypism , The first one to log in will “ Session failure , Please login again ！”
• 8. Continue operation consistently

remarks ： Because login is not blocked , So when the second phone logs in ,token Will log in the first mobile phone token To cover

3.3. Mobile number verification code login process

• 1. Query the database , Judge whether the user exists
  • 1.1 If the user is empty , Indicates that you have not registered , Then for null, The registration information needs to be stored （md5+ Salt value ）
  • 1.2 If the user is not empty , Indicates that you have registered
    • 1.2.1. Obtain the encrypted salt value according to the mobile phone number
    • 1.2.2. Front end password + Encryption salt value md5 encryption
    • 1.2.3. Encryption password and database password comparison , atypism , Prompt “ Incorrect user or password ！”; Agreement , Continued to .
• 2. Save user session information to redis
• 3. Return user information , contain token token

   /**
     *  One click login with account and password 
     *
     * @param mobileAndPasswordRegistLoginBO
     * @param request
     * @return
     * @throws Exception
     */
    @PostMapping("mobileAndPasswordRegistLogin")
    public GraceJSONResult mobiletAndPasswordRegistLogin(@Valid @RequestBody MobileAndPasswordRegistLoginBO mobileAndPasswordRegistLoginBO,
                                                         HttpServletRequest request) throws Exception {
    

        String mobile = mobileAndPasswordRegistLoginBO.getMobile();
        String password = mobileAndPasswordRegistLoginBO.getPassword();

        // 1. Query the database , Judge whether the user exists 
        Users user = userService.queryMobileIsExist(mobile);
        // When the user and password are not empty , Make password judgment 
        if (user != null && StringUtils.isNotBlank(password)) {
    
            if (!MD5Utils.comparePasswordsForEquality(user.getSalt(), user.getPassword(), password)) {
    
                return GraceJSONResult.errorCustom(ResponseStatusEnum.ERROR_MOBILE_OR_PASSWORD);
            }
        }
        // If the user does not exist , New user information 
        if (user == null) {
    
            //  If the user is empty , Indicates that you have not registered , Then for null, The registration information needs to be stored 
            user = userService.createUser(mobile, password);
        }

        // 2.  If it's not empty , You can continue the business below , User session information can be saved 
        String uToken = UUID.randomUUID().toString();
        redis.set(REDIS_USER_TOKEN + ":" + user.getId(), uToken);

        // 3. Return user information , contain token token 
        UsersVO usersVO = new UsersVO();
        BeanUtils.copyProperties(user, usersVO);
        usersVO.setUserToken(uToken);
        return GraceJSONResult.ok(usersVO);
    }