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

最新推荐文章于 2025-03-17 20:45:38 发布

wxl_winston

最新推荐文章于 2025-03-17 20:45:38 发布

阅读量6.8k

点赞数 6

分类专栏：安全 java基础文章标签： jquery javascript html 短信验证码 validate

本文链接：https://blog.csdn.net/zhen_hero/article/details/107318478

版权

本文介绍了如何实现实现短信验证码登录系统以替代图片验证码，包括点击发送按钮后的倒计时、后台生成验证码、时间戳记录及验证码有效性校验等关键步骤。详细讲述了HTML、JS和JAVA部分的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

对于此需求,思路就是

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

下面就是具体实现:

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-r

最低0.47元/天解锁文章