Web项目中手机注册短信验证码实现的全流程及代码

您所在的位置：网站首页 › 接收验证码的网页 › Web项目中手机注册短信验证码实现的全流程及代码

Web项目中手机注册短信验证码实现的全流程及代码

2023-07-17 06:38| 来源: 网络整理| 查看: 265

最近在做只能净化器的后台用户管理系统，需要使用手机号进行注册，找了许久才大致了解了手机验证码实现流程，今天在此和大家分享一下。

我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com

我是java开发者，后端使用了springMvc，前端用的是jsp + jquery

下载demo: https://download.csdn.net/download/zuoliangzhu/10733109

短信验证码实现流程

1、构造手机验证码，生成一个6位的随机数字串； 2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上 3、将手机号验证码、操作时间存入Session中，作为后面验证使用； 4、接收用户填写的验证码、手机号及其他注册数据； 5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内； 6、验证码正确且在有效期内，请求通过，处理相应的业务。

前端的页面

jsp

Insert title here function getBasePath(){ return ''; } 账号: 密码: 手机号: 验证码: 获取短信验证码提交

$(function(){ //发送验证码 $(".sendVerifyCode").on("click", function(){ var number = $("input[name=number]").val(); $.ajax({ url: getBasePath()+"/sendSms.html", async : true, type: "post", dataType: "json", data: {"number":number}, success: function (data) { if(data == 'fail'){ alert("发送验证码失败"); return ; } } }); }) //提交 $(".sub-btn").on("click", function(){ var data = {}; data.userId = $.trim($("input[name=userId]").val()); data.password = $.trim($("input[name=password]").val()); data.number = $.trim($("input[name=number]").val()); data.verifyCode = $.trim($("input[name=verifyCode]").val()); $.ajax({ url: getBasePath()+"/register.html", async : true, type: "post", dataType: "json", data: data, success: function (data) { if(data == 'fail'){ alert("注册失败"); return ; } alert("注册成功"); } }); }) });

这里省略了所有非空、手机号格式验证

流程：

1)填写手机号

2)获取手机号码，调用sendSms.html接口向手机发送短信验证码

3)用户手机接收到验证码后，将其填写到"验证码"文本框中

后端代码

发送短信验证码

/** * 发送短信验证码 * @param number接收手机号码 */ @RequestMapping("/sendSms") @ResponseBody public Object sendSms(HttpServletRequest request, String number) { try { JSONObject json = null; //生成6位验证码 String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000); //发送短信 ZhenziSmsClient client = new ZhenziSmsClient("你的appId", "你的appSecret"); String result = client.send(number, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次！【短信签名】"); json = JSONObject.parseObject(result); if(json.getIntValue("code") != 0)//发送短信失败 return "fail"; //将验证码存到session中,同时存入创建时间 //以json存放，这里使用的是阿里的fastjson HttpSession session = request.getSession(); json = new JSONObject(); json.put("verifyCode", verifyCode); json.put("createTime", System.currentTimeMillis()); // 将认证码存入SESSION request.getSession().setAttribute("verifyCode", json); return "success"; } catch (Exception e) { e.printStackTrace(); } return null; }

提交注册

/** * 注册 */ @RequestMapping("/register") @ResponseBody public Object register( HttpServletRequest request, String userId, String password, String number, String verifyCode) { JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode"); if(!json.getString("verifyCode").equals(verifyCode)){ return "验证码错误"; } if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 5){ return "验证码过期"; } //将用户信息存入数据库 //这里省略 return "success"; }

【本文地址】

Web项目中手机注册短信验证码实现的全流程及代码

Web项目中手机注册短信验证码实现的全流程及代码

今日新闻

推荐新闻