最近在做只能净化器的后台用户管理系统,需要使用手机号进行注册,找了许久才大致了解了手机验证码实现流程,今天在此和大家分享一下。
我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com
我是java开发者,后端使用了springMvc,前端用的是jsp + jquery
短信验证码实现流程
1、构造手机验证码,生成一个6位的随机数字串;
2、使用接口向短信平台发送手机号和验证码,然后短信平台再把验证码发送到制定手机号上
3、将手机号验证码、操作时间存入Session中,作为后面验证使用;
4、接收用户填写的验证码、手机号及其他注册数据;
5、对比提交的验证码与Session中的验证码是否一致,同时判断提交动作是否在有效期内;
6、验证码正确且在有效期内,请求通过,处理相应的业务。
前端的页面
jsp
<%@ page language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
Insert title here
functiongetBasePath(){
return'<%=basePath%>';
}
账号:
密码:
手机号:
验证码: 获取短信验证码
js
$(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)用户手机接收到验证码后,将其填写到"验证码"文本框中
后端代码
发送短信验证码
/**
* 发送短信验证码
*@paramnumber接收手机号码
*/
@RequestMapping("/sendSms")
@ResponseBody
publicObjectsendSms(HttpServletRequest request, String number){
try{
JSONObject json =null;
//生成6位验证码
String verifyCode = String.valueOf(newRandom().nextInt(899999) +100000);
//发送短信
ZhenziSmsClient client =newZhenziSmsClient("你的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 =newJSONObject();
json.put("verifyCode", verifyCode);
json.put("createTime", System.currentTimeMillis());
// 将认证码存入SESSION
request.getSession().setAttribute("verifyCode", json);
return"success";
}catch(Exception e) {
e.printStackTrace();
}
returnnull;
}
提交注册
/**
* 注册
*/
@RequestMapping("/register")
@ResponseBody
publicObjectregister(
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";
}