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

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

我们使用的是榛子云短信平台, 官网地址: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";

}

你可能感兴趣的:(Web项目中手机注册短信验证码实现的全流程及代码)