Tiktok practice ~ one click registration and login process of mobile phone number (verification code)

One 、 One click registration login process

Two 、 front end

2.1. Verification code acquisition process

• 1. Click on -> Get the verification code call the back end to get the verification code api Interface
• 2. Verification Code 59 Second countdown
• 3. Click repeatedly to get the verification code , Judge whether the verification code countdown is greater than 0:
  • 3.1. If it is greater than 0, The get verification code button is not touchable
  • 3.2. If it is equal to 0, Get the verification code call the back end to get the verification code api Interface

2.2. Verification code acquisition code

	var serverUrl = app.globalData.serverUrl;
				//  Call the back end to send the verification code 
				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"
							});
						}
						
						//  Start counting down 60 Second limit 
						if(me.codeTimes == 0) {
    
							me.doTimer(59);
						}
					}
				});	
			},
			//  Countdown method for sending verification code 
			doTimer(times) {
    
				var me = this;
				//  Countdown timer 
				var sendCodeBtnFunction = function(){
    
					var left = times--;

					if (left <= 0) {
    
						me.codeTouched = false;
						me.codeBtnText = " Send verification code ";
						clearInterval(smsTimer);
					} else {
    
						me.codeBtnText = left + "s";
					}
					me.codeTimes = left;
				};
				var smsTimer = setInterval(sendCodeBtnFunction, 1000);
			},

3、 ... and 、 Back end verification code

3.1. Preprocessing

In order to avoid invalid operations caused by frequent access to verification codes , therefore , The verification code acquisition logic needs to be pre intercepted .
According to the user ip Limit , Limit users to 60 You can only get the verification code once in seconds

Enter the first -> Verification code pre interception processing :

• 1. Get the user's ip
• 2. Verification Code redis Storage key The prefix of + Get the user's ip treat as redis Medium key, from redis Get the stored request in ip
  • 1. If redis There are unexpired user requests in ip, Prompt " Text messages are sent too fast ~ Please try again later ！"
  • 2. If redis in , There are no user requests ip, The release , Continue to call the get verification code interface api
    

3.2. Interceptor add

3.3. Get verification code

• 1. Verify the data filled in the input box , Illegal tips , Legal continuation .
• 2. Get user requests ip
• 3. According to the user ip Limit , Limit users to 60 You can only get the verification code once in seconds
• 4. Generate random 6 Bit verification code
• 5. Call Tencent / Alibaba SMS service , Send verification code
• 6. Put the verification code into redis in , For subsequent verification
• 7. Return verification code