java发送短信验证码_zuoliangzhu的博客-程序员宅基地

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

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

<%@ 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";
	}

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zuoliangzhu/article/details/82993257

智能推荐

navicat12 连接远程oracle数据库_navicat链接网络服务名是指-程序员宅基地

(1)打开navicat,点击工具->环境按照如下配置,配置自己的路径需要下载和navicat版本一致的sqlplus 和 oci(2)注:我遇到的问题不是版本不一致的问题,为了避免版本问题就下载和navicat版本一致的sqlplus和Instant Client .(3)sqlplus和Instant Client下载地址 : https://www.oracle.com/database/technologies/instant-client/downloads.html(4)_navicat链接网络服务名是指

五大CV顶会,两大机器人顶会关于few-shot-learning论文汇总(NIPS,ICML,CVPR,ECCV,ICCV)-程序员宅基地

五大CV顶会,两大机器人顶会关于few-shot-learning论文汇总1. NIPS1.1 2015NIPS1.2 2016NIPS1.3 2017NIPS1.4 2018NIPS1.5 2019NIPS2. ICML2.1 2015ICML2.2 2016ICML2.3 2017ICML2.4 2018ICML2.5 2019ICML3. CVPR3.1 2015CVPR3.2 2016CV...

OpenGL 02 - OpenGL下的专业名词_glcolor3l-程序员宅基地

1、Context:上下文在应用程序在任何OpenGL的指令之前,需要安排首先创建一个OpenGL的上下文,这个上下文是一个非常庞大的状态机,保存了OpenGL中的各种状态,这也是OpenGL指令执行的基础OPENGL函数不管在哪个语言中,都是类似C语言一眼的面向过程的函数,本质上都是OpenGL上下文这个庞大的状态机中某个状态或者对象进行操作,当然你的首先把这个对象设置为当前对象,..._glcolor3l

GaussDB架构(下)_高斯数据库分布式和集中式都有的组件-程序员宅基地

GaussDB云数据库架构云数据库系统的主要目的是提供数据库系统服务的基础设施,以实现对计算机资源的共享。本文所讲述的GaussDB云数据库架构设计的内容,目前处于研发阶段,对应产品尚未向客户发布。1.设计思想与目标客户从数据存放的位置来看,云数据库系统可以分成三大类:公有云数据库系统服务: 该类数据库系统服务主要面向中小型企业的数据库需求。针对中小型企业提供公有云数据库系统服务,可以大幅降低这类公司的运营成本,比如构建数据中心或者机房、构建服务器、运维服务器、运维数据库系统的成本等,同时也使得这_高斯数据库分布式和集中式都有的组件

单元测试框架(一)-程序员宅基地

单元测试框架对于单元测试框架,它主要完成以下三件事:1.提供用例组织与执行  为什么要考虑到测试用例的组织问题呢?这是因为当我们的测试用例多达成百上千条时,这就产生了一些很严重的问题——测试用例的维护性问题以及扩展管理性问题等,而单元测试框架就是用来解决用例的规范与组织问题。2.提供丰富的比较方法  说到比较方法,先简单描述一下什么是软件Bug——通俗讲Bug就是实际结果与预期...

随便推点

vue使用jsonp插件_vue 使用 jsonp插件-程序员宅基地

1.安装npm install jsonp --save-dev2.引入jsonpimport jsonp from 'jsonp';3.请求数据export default { created(){ //jsonp请求数据 var keyword = "李白"; var baseUrl = "https://sp0..._vue 使用 jsonp插件

四川大学计算机组成原理期末,四川大学《计算机组成原理》2017期末考试B卷答案.doc...-程序员宅基地

2017年计算机组成原理与汇编语言期末试题答案及评分标准——B卷一、填空题(本大题共15空,每空2分,共30分)1. B D A C2. Lui $a0,0x1234 Ori $a0,0x5678 ($a0可为任意寄存器)3. 81 41 1.984. -2047slt $s1..._四川大学计组习题

一些bug小记(持续更新)_(tensor input, tensor weight, tensor bias, tuple o_ptxx_p的博客-程序员宅基地

pytorch的输入一般为batch,所以对于单独的输入(只有单个的输入!)来说,需要加上一维,具体操作为 a = torch.from_numpy(a).unsqueeze(dim = 0)需要注意的是,此时可能会报网络结构的错误,error提示如下:TypeError: conv2d() received an invalid combination of arguments - got (numpy.ndarray, Parameter, Parameter, tuple, tuple, tu._(tensor input, tensor weight, tensor bias, tuple of ints stride, tuple of in

如何在form:input中添加spring message code-程序员宅基地

最近参与了一个jsp项目的开发(其实打个酱油。。),涉及数据交互的时候需要为form 表单添加属性,而这个属性值正是存储在spring message code文件中的字符串(Unicode编码),正当我想其它标签一样复制 < spring:message code=”screen.welcome.welcome”/>后,呵呵,编辑器报错了,程序也无法运行: 解决方法,其实这个是Java领域的问

物联网现状及落地难点-程序员宅基地

大家好,我是叶帆科技的创始人兼CEO,刘洪峰,非常高兴能和阿里云MVP项目组成员一起来制作《MVP 时间》内容,帮助物联网企业开发者了解物联网接入难点及解决方案。下面简单做个自我介绍:1、1995年开始做软件开发,主要是C语言的开发;2、2001年开始做VB6/VC6/PLC这类开发,面向钢铁厂相关的项目,比如配水配料等;3、2008年开始做广告系统的开发,像深圳杭州地铁里面的广告通讯系统;4、2...

Github编程语言数据分析_github data数据分析_justaboutenougha的博客-程序员宅基地

分析 2011-2022 年,Github 上所使用编程语言的流行程度。_github data数据分析