系统登录页面短信验证码方式登录实现

近期公司有个需求,要求使用短信验证码登录,取代原来的图片验证码方式,在此记录一下我的实现方法,希望对你有所帮助

• 公司需求：目前只有账号和验证码方式验证登录，按照公司网络安全统一部署，要求所有公网系统都需要动态双因子认证
• 改造方案：此ULR增加登录短信验证，取代验证码验证

对于此需求,思路就是

1. 点了"发送验证码"按钮后,前台开始倒计时,后台随机生成一个6位数的验证码
2. 记录一下当前的时间戳(用来校验验证码是否失效,根据业务情况的不同设置不同的失效时间,我这里是5分钟内有效),将发送的验证码和时间戳返回前台
3. 待用户填写的同时,实时检查用户填写的验证码是否正确,是否超时
4. 待用户填写正确的验证码后,放行登录请求

下面就是具体实现:

HTML:

<div class="Rbox absulute">

    <form class="loginform form-signin" id="loginForm"  action="${ctx}/login" method="post" name="loginForm">
        <div   id="messageBox" class="alert alert-error ${empty message ? 'hideErr' : 'showErr'}" style=""><button data-dismiss="alert" class="close">×</button>
            <label id="loginError" class="error">${message}</label>
        </div>
        <div class="radius shadow mt10"><input id="un" type="text" placeholder="用户名" name="username" class="required" autocomplete="off"/><img src="../imgs/user.png"></div>
        <div class="mt20 radius shadow "><input id="pw" type="password" placeholder="密码"  name="password" class="required" maxlength="20" autocomplete="off"/><img src="../imgs/password.png" ></div>
        <div class="mt20 radius shadow "><input id="ph" type="text" placeholder="手机号"  name="phone" class="required" maxlength="11" autocomplete="off" style="width: 87%"/>
            <img src="../imgs/phone.png" style="width: 21px;height: 21px;padding-right: 2px"></div>
        <div cla