Preface:

Logging in with a mobile verification code is becoming more and more common these days. Although it will increase the cost, it is still helpful to improve the user experience. So, when the product manager says to the developer, come and get me an SMS verification code based on this prototype. What should we think about as r&d?

SMS login to do things

The diagram here shows only one successful process. There are many more details worth going through. In addition to the SMS authentication process, login security must also be considered. Especially important background projects. Now I want to break down the 17 steps in the picture

Request verification Code (1 to 4)

There are two main points in steps 1 to 4.

  1. Front-end opponent number format verification, button click verification
  2. A back-end limit on the frequency of requests for captchas

The validation rules can be relaxed. Just because front-end validation is unreliable doesn’t mean it’s useless. At the same time, after clicking the verification code, you need to disable the button to obtain the verification code. To prevent multiple clicks on the backend, you need to determine whether the current IP address and mobile phone number repeatedly request the verification code. This is where the rule of repeating requests for captchas needs to be introduced. The general rule is that you can request again within 60 seconds. This time can be recorded by a key name request phone number of a cache, expiration time is 60 seconds. If the value is available, the request has not reached 60 seconds.

Verification of validity (5-8)

Step 5~8 is mainly to verify the validity of the user behind the mobile phone number. First, the format of the mobile phone number must be judged, although there is judgment in the front end. But the validation on the back end is the reliable validation. Followed by a phone number check. The query logic is as follows

  1. Do you have this phone number among the registered users
  2. Whether the user status is disabled
  3. Whether the user can log in to the current service

If the conditions are met, we can proceed to the next step

Making or saving verification Codes (9 to 10)

When you make a captcha, you have to think about two things, one is the length of the captcha and two is the complexity of the captcha. The most user-friendly of course is pure numbers. The shorter the captcha, the better. But security is compromised. Is there a user friendly and secure solution? The answer is yes. First we assume a 4-digit scheme. If you don’t set a limit on the number of attempts, hackers using multi-threaded tools can enumerate violence up to 10,000 times in a short period of time, and the luck is not necessarily so bad. It could have been done at 3,000. So our solution is this. Same cell number, verify it three times. The captcha is invalidated. After three failures, the fourth request returns the error text “Verification code has been incorrect for three consecutive times, please obtain the SMS verification code again”. There is another dimension to consider. That is the validity period of the SMS verification code. Generally, SMS verification codes are valid for five minutes. There’s a crossover problem here. For example, a user acquires a captcha without verifying it, and then acquires it again 60 seconds later. He’ll have two valid captcha codes. This is obviously not reasonable, so I need to discard the first captcha when I fetch the second one. When using the cache to store the verification code, you can directly set the previous verification code to overwrite, and you can reset the validity period of 5 minutes.

Finally, there is a problem that is easy to overlook. That is SMS anti-brush, our previous Settings, are only for a mobile phone number anti-brush. There is a brush SMS is constantly changing the phone number to brush the kind of. The solution can use IP, UA, referer,header and other parameters to determine whether the request is initiated by the same client. If the same client requests more than 5 times in an hour. You have to enter a graphic verification code. Graphic verification code implementation needless to say. Too many disposable bags. In this way, we can prevent others from attacking our system to the maximum extent, and also ensure that the experience is not compromised

Sending the verification code to the User (11 to 12)

This is the easy part. Just follow the SMS interface document, pass in the phone number, SMS template, and verification code to send. Consider adding a log to the database for data analysis.

Verify login. Login is successful (15 to 17)

Verifying the login step is mainly to do what was mentioned earlier. If verification 3 fails for three times, the verification code is discarded (whether the verification code is matched or not). If the verification passes, the verification code is discarded. After passing the verification code, you need to verify the validity of the user again. Prevent extreme cases where the user is legitimate when requesting a captcha, but is disabled within 5 minutes. We still can’t let him log in. Login success depends on their architecture design. It can be a token or a session. After establishing a session, you have completed a complete SMS verification code login! ~

conclusion

Once the summary is complete, you can proceed with development as required. Although it is a simple SMS verification code, I found that many projects in the market did not do well in this part (don’t ask me, how do I know ha ha ha ha). As a developer, we must try our best to consider all aspects to avoid online accidents.

Wechat official account: RichardTalked