手机验证码如何实现-JS - HelloWorld开发者社区

前言

现在基本上各种手机APP注册都会用到手机验证码，包括一些PC端网站也会使用手机号作为唯一标识验证！

恰巧，小明的老板，让其开发一个用户注册的功能，并且强制用户注册绑定手机，美其名曰为了提升安全性，呵呵哒，就是为了多撸一点用户信息。

案例

一般来说，发送手机验证码不能过于频繁，前端发送按钮点击后一般会有一个60秒倒计时的功能。也就是说，如果用户点击发送一直没有收到验证码，只能60秒之后才可以进行重发。

那么问题来了，如果用户绕过前端，直接向后台API发送短信请求，然后写个无限循环脚本，相信不久你的短信账户就会发来预警提示短信(一般来说大的短信商都有预警设置功能)。

其实很简单，你只需要F12，查看发送请求就可以查找出后台请求地址，然后你可以在控制台输入相关JS代码，执行个十万遍，是不是很爽？

这里以七牛云为测试案例，打开注册页面，F12进入调试模式，输入手机号，手动点击发送，获取其短信发送后台请求地址。下面是七牛云的一个短信发送请求，撸主测试了一下，显然没有达到撸主的预期，毕竟是大厂，防御措施还是做的很牛逼的。

以下是JS脚本，复制粘贴到控制台回车就可以执行：

var data = {"operation":1,"is_voice":false,"mobile_number":"17762018888","captcha_type":2};
for (var i = 0; i < 10; i++) {
    $.ajax({
        type: 'POST',
        contentType: 'application/json;charset=UTF-8',
        data:JSON.stringify(data),
        url: 'https://portal.qiniu.com/api/gaea/verification/sms/send',
        success: function(data) {
            console.log(data)
        }
    });
}

控制台返回以下信息，前三次请求成功，后面的就出现了验证码校验并进行了限流操作。

{"code":200,"message":""}
{"code":200,"message":""}
{"code":200,"message":""}
{"code": 7209,"message":"captcha required"}
{"code": 7209,"message":"captcha required"}
{"code": 429,"message":"too many requests"}
{"code": 429,"message":"too many requests"}
{"code": 429,"message":"too many requests"}
{"code": 429,"message":"too many requests"}
{"code": 7209,"message":"captcha required"}

撸主尝试刷新页面，随便输了一个手机号，再次点击发送，提示用户输入验证码，显然是加强了防备，触发了恶意请求认证拦截机制。

安全机制

对于开发者来说，他们不仅要考虑用户正常获取验证码的体验还要考虑短信接口的安全性，撸主总结了以下几点，希望对大家有所帮助。

后台请求限流，对单位时间内发送频率做限制。
验证码机制，切记不要一开始就限制验证码，体验及其不友好，触发限流以后开启验证码校验。
监控日发送短信数量，触发一定的阈值做相应的处理，根据实际业务需求。
验证码存储一定要保证key为手机号，切记不要以其它标识作为key，比如sessionId。
一定要设置验证码失效时间，比如五分钟，或者更短。
验证码尽量保证短小精悍，四到六位即可。
如果后台不做限制，切记前台一定要做个倒计时的限制，至少过滤一部分小白用户。

代码案例

给小伙伴分享一个简单的验证码生成、存储、失效代码案例：

import com.google.common.cache.CacheBuilder;
import com.google.common.cache.CacheLoader;
import com.google.common.cache.LoadingCache;

import java.util.concurrent.ExecutionException;
import java.util.concurrent.TimeUnit;

public class Mobile {
    /**
     * 测试方便，这里设置了3秒失效
     */
    private static LoadingCache<String, String> caches = CacheBuilder.newBuilder()
            .maximumSize(1000)
            .expireAfterWrite(3, TimeUnit.SECONDS)
            .build(new CacheLoader<String, String>() {
                @Override
                public String load(String mobile) {
                    return "";
                }
            });

    public static void main(String[] args) throws ExecutionException, InterruptedException {
        Integer code = (int)((Math.random()*9+1)*100000);
        caches.put("17762018888",code.toString());
        System.out.println(caches.get("17762018888"));
        Thread.sleep(4000);
        System.out.println("是不是没了:"+caches.get("17762018888"));
    }
}