客户咨询热线 15081754822
首页     关于我们     网站建设     系统开发     手机网站     模板网站     网站改版     网站维护     Logo设计     短信群发     企业邮箱     网站案例     微信开发     建站知识     解决方案     联系我们
 您现在的位置:首页 > Web项目中手机注册短信验证码实现的全流程及代码  
业务范围
  系统开发
  网站建设
  手机网站
  网站案例
  宣传片拍摄
  域名注册
  短信群发
  企业邮箱
建站专题
  邯郸县区建站
  建站解决方案
关于我们
  关于我们
  公司视频
  联系方式
 
 
 
 
 
 
  Web项目中手机注册短信验证码实现的全流程及代码


Web项目中手机注册短信验证码实现的全流程及代码
发布日期:2019-9-9 15:50:41  浏览次数:1591次   二维码分享
做后台用户管理系统,需要使用手机号进行注册,需要手机验证码实现流程,今天在此和大家分享一下。

后端使用了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;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script src="<%=basePath %>/view/js/jquery-2.1.1.min.js"></script>
  <script src="<%=basePath %>/view/js/register.js?v=1.0.0"></script>
  <script>
function getBasePath(){
    return '<%=basePath%>';
    }
  </script>
</head>
<body>
   <form>
       <div>
           账号: <input name="userId">
       </div>
       <div>
           密码: <input name="password">
       </div>
       <div>
           手机号: <input name="number">
       </div>
       <div>
           验证码: <input name="verifyCode"><button type="button" class="sendVerifyCode">获取短信验证码</button>
       </div>
       <div><button type="button" class="sub-btn">提交</button></div>
   </form>
</body>
</html>
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)用户手机接收到验证码后,将其填写到"验证码"文本框中


?


后端代码


发送短信验证码


/**
* 发送短信验证码
* @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;


--------------------- 


作者:邯郸网站制作 上一条: 俱乐部/会所/协会在短信平台应用指南
来源:互联网 下一条: 注册用户短信验证码短信平台
关于我们 | 邯郸宣传片拍摄 | 最新动态 | 网站案例 | 联系方式
网站关键词:邯郸网站建设 | 邯郸做网站 | 邯郸网站设计 | 邯郸网页设计 | 邯郸网站制作 | 邯郸网络公司| 邯郸网站推广
客服电话:156-9004-3855 QQ:125856421 电子信箱:125856421@QQ.com
邯郸奥科网络 版权所有
客户服务
15102693855