H5学习之路 |
您所在的位置：网站首页 › 输入手机验证码会有资金安全吗是真的吗 › H5学习之路 |
H5学习之路
|
在上一篇博文中，给大家介绍了图片验证码的实现，今天再给大家介绍一下手机短信验证码的实现。其实，这个和图片验证码差不多，只不过要把后天生成的验证码发到对应的手机号码上，然后再进行验证。这里，关于发短信的功能可以找手机短信服务商，对接相应的接口即可。 好了，笔者就直接贴出相应的代码，流程也比较简单，第一步就是生成验证码发到对应的手机上，把相关数据放在session或内存中，第二步就是验证了。 一、html代码这里做了一个比较简洁的html页面模拟大致的过程，代码如下： 图片验证码 手机号码 获取验证码 验证码 30s 重新获取验证码 验证页面展示如下： js代码逻辑如下，这里就是发送和验证了，代码如下： /** * 手机验证码 */ var mobile = ''; var count = 30; //验证码 有效期 30s var curCount = 0; //当前剩余秒数 开始为0 var InterValObj = ""; $(function() { console.log('获取手机验证码。。。'); //获取验证码 $('#yzm_btn').click(function() { //获取手机号 mobile = $('#mobile').val(); console.log('mobile:', mobile); if (mobile.trim().length == 0) { alert('手机号不能为空。。。'); } else { sendYzm(); } }); //重新获取验证码 $('#recapture_btn').click(function() { sendYzm(); }); //验证 $('#check_btn').click(function() { var mbCode = $('#yzm').val(); var timing = $("#remainTime").text(); if(timing == '0s') { alert("验证码过期请重新获取"); return ; } else if (mbCode == "" && mbCode.length 0 && sendNumMap.get(mobile) != null) { float btTime = (checkTime - sendTimeMap.get(mobile)) / 1000; // 检测是否频繁发送 if (btTime < LIMIT_TIME) { extJsObject.setSuccess(false); extJsObject.setMsg("获取验证码频繁，请稍后再获取"); return extJsObject; } // 当天发送短信条数的限制 int number = sendNumMap.get(mobile); if (number == sentTime) { extJsObject.setSuccess(false); extJsObject.setMsg("每个号码每天只能获取" + sentTime + "次注册验证码"); return extJsObject; } } // 生成验证码和发送的短信内容 String code = getCode(); String content = "您的验证码为:" + code + ",温馨提示:如非本人操作,请忽略此短信!"; /* 发送短信给此手机号， 这里看对接哪家短信服务提供商 */ boolean result = sendMessage(mobile, content); logger.warn("您的验证码为:" + code + ", 温馨提示:如非本人操作,请忽略此短信!"); if (result) { // 将认证码存入SESSION long createTime = new Date().getTime(); // 把验证码和手机号，生成时间绑定 session.setAttribute("@vcode", mobile + "|" + code + "|" + createTime); logger.info("@@@是否存入了验证码信息：" + session.getAttribute("@vcode")); logger.info("@@@获取验证码session：" + session.getId()); // 记录短信验证码 mobilevcodeMap.put(mobile, code); // 记录发送验证码时间 sendTimeMap.put(mobile, createTime); // 记录同一号码发送次数 Integer num = sendNumMap.get(mobile); if (num == null) { sendNumMap.put(mobile, 1); } else { sendNumMap.put(mobile, ++num); } extJsObject.setSuccess(true); extJsObject.setMsg("发送成功!"); return extJsObject; } else { session.removeAttribute("@vcode"); extJsObject.setSuccess(false); extJsObject.setMsg("发送失败!"); return extJsObject; } } /** * * sendMessage: 发送短信的逻辑. * * @author qiyongkang * @param mobile * @param content * @return * @since JDK 1.6 */ private boolean sendMessage(String mobile, String content) { // 发送短信的逻辑 return true; } /** * * validateMobileCode: 校验手机验证码. * * @author qiyongkang * @param request * @return * @since JDK 1.6 */ @RequestMapping @ResponseBody public ExtJsObject validateMobileCode(HttpServletRequest request) { ExtJsObject extJsObject = new ExtJsObject(); logger.info("验证短信"); // 获取手机号 和验证码 String mobile = request.getParameter("mobile"); String userCode = request.getParameter("vCode"); // 从session获取验证信息 HttpSession session = request.getSession(); String codeAndTime = (String) session.getAttribute("@vcode"); logger.info("@@@校验验证码，获取到的codeAndTime=" + codeAndTime); logger.info("@@@校验验证码，session为" + session.getId()); if (StringUtils.isEmpty(codeAndTime)) { extJsObject.setSuccess(false); extJsObject.setMsg("验证码不能为空"); return extJsObject; } long checkTime = new Date().getTime(); // 如果超时验证不通过 float btTime = (checkTime - sendTimeMap.get(mobile)) / (1000); // 如果超时验证不通过 if (LIMIT_TIME < btTime) { extJsObject.setSuccess(false); extJsObject.setMsg("验证码过期，请重新获取"); return extJsObject; } else { String sessionMobile = codeAndTime.split("\\|")[0]; String vcode = mobilevcodeMap.get(mobile); // 判断输入手机号码和获取验证码手机号码是否一致 if (!sessionMobile.equals(mobile)) { extJsObject.setSuccess(false); extJsObject.setMsg("手机号码修改后,请重新获取短信验证码"); return extJsObject; } else if (vcode.equals(userCode.trim())) { extJsObject.setSuccess(true); extJsObject.setMsg("验证成功!"); return extJsObject; } else { extJsObject.setSuccess(false); extJsObject.setMsg("验证码输入错误，请重新输入"); return extJsObject; } } } /** * * getCode: 生成验证码. * * @author qiyongkang * @return * @since JDK 1.6 */ public String getCode() { String random = ""; while (true) { random = (Math.random() * 10000) + ""; if (!StringUtils.isEmpty(random) && random.contains(".")) { String[] randoms = random.split("\\."); random = randoms[0]; } if (random.length() >= CODE_LENGTH) { break; } } return random; } }好了，关于手机验证码就介绍到这儿了。后面，笔者应该再不会写前端相关的博文了，因为现在笔者学的东西太杂了，没有一个学得比较好的。后面笔者打算专门学习java相关的技术，然后再和大家一起分享交流。 |
【本文地址】
今日新闻 |
推荐新闻 |