700字范文 > 系统登录页面短信验证码方式登录实现

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

时间：2021-09-21 06:20:09

相关推荐

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

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

公司需求：目前只有账号和验证码方式验证登录，按照公司网络安全统一部署，要求所有公网系统都需要动态双因子认证改造方案：此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-right: 2px"></div><div class="mt20 radius shadow "><input id="vc" type="text" placeholder="验证码" name="verifyCode" class="required" maxlength="6" autocomplete="off" style="width:56%;display: inline-block;"/><input id="getVcBtn" class="gradientbtn btn1 sendVerifyCode" type="button" style="display: inline-block;width: 43%;margin-right: 1px;margin-top: 1px;float:right" value="获取" onclick="sendVarCode();" /> </div><div class="mt10 remeberUser "><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> <span >记住我</span></div><div class="mt10"><input id="loginBtn" class="gradientbtn btn1" type="submit" value="登录" /></div><div class="mt10"><input id="createTime" type="hidden" value="200000" name="createTime" style="display: none"/></div><div class="mt10"><input id="sendedVarCode" type="hidden" value="100000" name="sendedVarCode" style="display: none"/></div><input type="hidden" name="csrftoken" value="${csrftoken}"/></form></div>

JS:

JAVA:

/*** 发送短信验证码*/@RequestMapping(value = "${adminPath}/sendVarSms" , method = RequestMethod.POST)@ResponseBodypublic String sendVarSms(HttpServletRequest request, HttpServletResponse response, Model model) {Map<String, Object> map = new HashMap<String,Object>();try {String mobile = request.getParameter("mobile");JSONObject json = null;//生成6位验证码String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);String message="您的验证码为：" + verifyCode + " ，您正在使用短信验证码登录，5分钟内有效，感谢您的使用！【XXX服务平台】";String result = custDataManageService.sendMessage(mobile, message);if(result != "success"){//发送短信失败map.put("result","fail");}json = new JSONObject();json.put("mobile", mobile);json.put("sendedVarCode", verifyCode);json.put("createTime", System.currentTimeMillis());map.put("result","success");map.put("sendData", json);return JSONUtil.toJson(map);} catch (Exception e) {e.printStackTrace();map.put("result","fail");}return JSONUtil.toJson(map);}/*** 校验短信验证码是否正确以及是否超时*/@RequestMapping(value = "${adminPath}/checkVerifyCode" , method = RequestMethod.POST)public void checkVerifyCode(HttpServletRequest request, HttpServletResponse response, Model model) {try {response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();String verifyCode = request.getParameter("verifyCode");String sendedVarCode = request.getParameter("sendedVarCode");String createTime = request.getParameter("createTime");long nowTime = System.currentTimeMillis();long timeDiff = (nowTime - Long.parseLong(createTime)) / 1000 / 60;if (verifyCode.equals(sendedVarCode) && timeDiff < 5) {out.print(true);} else {out.print(false);}} catch (Exception e) {e.printStackTrace();}}

由于我们公司本身就具有发送短信的能力,所以发送短信验证码的方法这里就略了,你们可以调用一些短信发送平台的api,实现发送短信的功能,网上很多,这里不再赘述

至此,短信验证码方式登录系统实现完成!

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。