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

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

  

提交注册

/**
* 注册
*/
@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项目中手机注册短信验证码实现的全流程及代码的更多相关文章

  1. 腾讯大渝网(esf.cq.qq.com)任意手机注册+短信验证码泄露

    地址在这里:http://esf.cq.qq.com/c=register 直接返回短信验证码, data: {data:您的手机验证码为8453,2小时内有效., auth_code:8453}ti ...

  2. Java 实现手机发送短信验证码

    Java 实现手机发送短信验证码 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ,之后想要在使用就得花钱了.简单的操作 ...

  3. 潭州课堂25班:Ph201805201 django 项目 第十三课 短信验证码后台的实现 (课堂笔记)

    d 发送短信验证码之前,后台要得到三个参数 : 1,用户手机吗,, 2,用户输入的图片验证文本, 3,前台的 uuid , 在60秒内是否有发送短信的记录 只有用户输入的手机号,文本信息与 uudi ...

  4. C# Ajax 手机发送短信验证码 校验验证码 菜鸟级别实现方法

    1.Ajax请求处理页面: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  5. Java演示手机发送短信验证码功能实现

    我们这里采用阿里大于的短信API 第一步:登陆阿里大于,下载阿里大于的SDK a.在阿里大于上创建自己的应用 b.点击配置管理中的验证码,先添加签名,再配置短信模板 第二步:解压相关SDK,第一个为j ...

  6. java实现注册的短信验证码

    最近在做只能净化器的后台用户管理系统,需要使用手机号进行注册,找了许久才大致了解了手机验证码实现流程,今天在此和大家分享一下. 我们使用的是榛子云短信平台, 官网地址:http://smsow.zhe ...

  7. 性能测试:Jmeter压测过程中的短信验证码读取

    问题背景 现如今国内的大部分软件或者网站应用,普遍流行使用短信业务,比如登录.注册以及特定的业务通知等. 对于这些业务,在使用Jmeter进行性能测试的过程中,就会需要自动获取和填入短信验证码,否则性 ...

  8. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...

  9. sharesdk短信验证码的集成

    在ShareSDK官网http://mob.com/注册并创建Android应用.申请APP_key,下载SDK等 根据官网开发文档导入SDK,目录结构如下 将以上文件按需放入Android Stud ...

随机推荐

  1. PHP循环语句深度理解分析——while, for, foreach, do while

    循环结构   一.while循环  while(表达式)  {   循环体;//反复执行,直到表达式为假  } 代码: $index = 1; while ($index<5) {        ...

  2. Web常见漏洞修复建议

    一.SQL注入修复建议 1.过滤危险字符,例如:采用正则表达式匹配union.sleep.and.select.load_file等关键字,如果匹配到则终止运行. 2.使用预编译语句,使用PDO需要注 ...

  3. sql server 2008怎样导入mdf,ldf文件,怎样解决导入mdf,ldf文件时出现附加数据库错误的问题

    废话不多说,直入主题吧. 1:打开sql server 2008,右键数据库-->附加 2:这时出现这个界面点击添加 3:打开数据库实例的安装目录,打开DATA文件夹;(如我的实例目录地址为:D ...

  4. 计算机视觉学习记录 - Implementing a Neural Network from Scratch - An Introduction

    0 - 学习目标 我们将实现一个简单的3层神经网络,我们不会仔细推到所需要的数学公式,但我们会给出我们这样做的直观解释.注意,此次代码并不能达到非常好的效果,可以自己进一步调整或者完成课后练习来进行改 ...

  5. 不用写代码的框架 - RobotFramework+Eclispe环境安装篇

    环境安装是学习任何一个新东西的第一步,这一步没走舒坦,那后面就没有心情走下去了. 引用名句:工欲善其事必先利其器!! Robotframework:一款 自动化测试框架. Eclipse:一款编辑工具 ...

  6. SQL Server2012如何导出sql脚本并且还原数据库

    一  备份数据库 1  选择某一个数据库,右键依次选择:任务==>生成脚本: 2  选择要编写脚本的数据库对象,注意此处可以选择特定的数据库对象,我们可以选择我们需要备份的数据表. 3   在当 ...

  7. [原创]基于Zynq Linux环境搭建(三)

    此篇编译Kernel 解压: [#17#17:26:56 FPGADeveloper@ubuntu ~/Zybo_Demo]$tar zxvf *.tar.gz 进入到文件kernel文件夹中,cle ...

  8. chattr和lsattr的基本用法

    lsattr filename  查看一个文件的属性 chattr filename  改变一个文件的属性 主要用途:实现文件的原有内容不允许改变,但可以增加新行,则需通过改变文件的属性来实现. ch ...

  9. VsCode创建第一个vue项目

    使用vue-cli快速构建项目  vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v      ...

  10. Android-动态权限获取

    声明权限: 首先在清单文件中写出相应权限 <!--存储权限--> <uses-permission android:name="android.permission.WRI ...