java发送短信验证码带倒计时

分享一个完整的java发送短信验证码的完整实例，这是一个官方的使用demo，带有60秒倒计时功能。

效果:

我使用的是榛子云短信平台
, 官网地址:http://sms_developer.zhenzikj.com/zhenzisms_user/register.html

我是java开发者，后端使用了springMvc，前端用的是jsp + jquery

下载demo: 榛子-云短信或者 http://smsow.zhenzikj.com/demo/download.html?fileName=zhenzisms_java_demo

短信验证码实现流程
1、构造手机验证码，生成一个6位的随机数字串；
2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上
3、将手机号验证码、操作时间存入Session中，作为后面验证使用；
4、接收用户填写的验证码、手机号及其他注册数据；
5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；
6、验证码正确且在有效期内，请求通过，处理相应的业务。

前端的页面

<%@ 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>验证码使用演示</title>
<link href="<%=basePath%>/css/register.css" rel="stylesheet" >
<script src="<%=basePath%>/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="<%=basePath%>/js/register.js" type="text/javascript"></script>
<script>function getBasePath(){return '<%=basePath%>';}
</script>
</head>
<body><form><div class="row"><label>账号: </label><input name="userId"></div><div class="row"><label>密码:</label><input name="password"></div><div class="row"><label>手机号:</label><input name="mobile"></div><div class="row"><label>验证码:</label><input name="verifyCode"><button type="button" class="sendVerifyCode">获取短信验证码</button></div><div><button type="button" class="sub-btn">提交</button></div></form>
</body>
</html>

$(function(){ //短信验证码倒计时var countdownHandler = function(){var $button = $(".sendVerifyCode");var number = 60;var countdown = function(){if (number == 0) {$button.attr("disabled",false);$button.html("发送验证码");number = 60;return;} else {$button.attr("disabled",true);$button.html(number + "秒 重新发送");number--;}setTimeout(countdown,1000);}setTimeout(countdown,1000);}//发送短信验证码$(".sendVerifyCode").on("click", function(){var $mobile = $("input[name=mobile]");var data = {};data.mobile = $.trim($mobile.val());if(data.mobile == ''){alert('请输入手机号码');return;}var reg = /^1\d{10}$/;if(!reg.test(data.mobile)){alert('请输入合法的手机号码');return ;}$.ajax({url: getBasePath()+"/sendSms",async : true,type: "post",dataType: "text",data: data,success: function (data) {if(data == 'success'){countdownHandler();return ;}alert(data);}});})//提交$(".sub-btn").on("click", function(){var data = {};data.userId = $.trim($("input[name=userId]").val());data.password = $.trim($("input[name=password]").val());data.mobile = $.trim($("input[name=mobile]").val());data.verifyCode = $.trim($("input[name=verifyCode]").val());if(data.userId == ''){alert("请输入账号");return ;}if(data.password == ''){alert("请输入密码");return ;}if(data.mobile == ''){alert("请输入手机号");return ;}if(data.verifyCode == ''){alert("请输入验证码");return ;}$.ajax({url: getBasePath()+"/register",async : true,type: "post",dataType: "text",data: data,success: function (data) {if(data == 'success'){alert("注册成功");return ;}alert(data);}});})
});

这里省略了所有非空、手机号格式验证

流程：

1)填写手机号

2)获取手机号码，调用sendSms.html接口向手机发送短信验证码

3)用户手机接收到验证码后，将其填写到"验证码"文本框中

后端代码

发送短信验证码

package com.zhenzi.sms;import java.io.IOException;
import java.util.Random;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import com.alibaba.fastjson.JSONObject;/*** 获取验证码*/
public class SendSmsServlet extends HttpServlet {private static final long serialVersionUID = 1L;//短信平台相关参数private String apiUrl = "https://sms_developer.zhenzikj.com";private String appId = "000000";private String appSecret = "c384b67bdsserev3343cdda4de5c8";public SendSmsServlet() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}/*** 短信平台使用的是榛子云短信(smsow.zhenzikj.com)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {String mobile = request.getParameter("mobile");JSONObject json = null;//生成6位验证码String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);//发送短信ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);String result = client.send(mobile, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次!");json = JSONObject.parseObject(result);if(json.getIntValue("code") != 0){//发送短信失败renderData(response, "fail");return; }//将验证码存到session中,同时存入创建时间//以json存放，这里使用的是阿里的fastjsonHttpSession session = request.getSession();json = new JSONObject();json.put("mobile", mobile);json.put("verifyCode", verifyCode);json.put("createTime", System.currentTimeMillis());// 将认证码存入SESSIONrequest.getSession().setAttribute("verifyCode", json);renderData(response, "success");return ;} catch (Exception e) {e.printStackTrace();}renderData(response, "fail");}protected void renderData(HttpServletResponse response, String data){try {response.setContentType("text/plain;charset=UTF-8");response.getWriter().write(data);} catch (Exception e) {e.printStackTrace();}}
}

json工具使用的是阿里的fastjson

appId和appSecret换成你自己的，注册之后可获得

注册地址: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html

提交注册

package com.zhenzi.sms;import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSONObject;/*** 注册*/
public class RegisterServlet extends HttpServlet {private static final long serialVersionUID = 1L;public RegisterServlet() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("userId");String password = request.getParameter("password");String mobile = request.getParameter("mobile");String verifyCode = request.getParameter("verifyCode");JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode");if(json == null){renderData(response, "验证码错误");return ;}if(!json.getString("mobile").equals(mobile)){renderData(response, "手机号错误");return ;}if(!json.getString("verifyCode").equals(verifyCode)){renderData(response, "验证码错误");return ;}if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 5){renderData(response, "验证码已过期");return ;}//其他业务代码renderData(response, "success");}protected void renderData(HttpServletResponse response, String data){try {response.setContentType("text/plain;charset=UTF-8");response.getWriter().write(data);} catch (Exception e) {e.printStackTrace();}}
}

ok，大功告成

java发送短信验证码带倒计时相关推荐

Java 发送短信验证码
Java 发送短信验证码给手机发送短信验证码其实很简单,就是调用一下第三方的短信API接口,填写参数,发送请求,第三方平台会将信息发送给对方手机当中介绍我个人测试所使用的第三方API是" ...
java限制发送短信次数_使用java发送短信验证码码，出现流量限制怎么办？急急急...
注册登录后需要企业认证,直接在某度上找一张清晰有红章的企业营业执照,注意要细心点,要看看有没有水印.我第一次就没注意上传了一张有水印的营业执照,从此这个账号再也没有审核通过了,后面只能换个账号.都是后 ...
Java发送短信验证码
随着科技的发展手机短信验证码随处可见,用户注册,修改密码,更改个人信息时候都用得到短信验证码确认.下面教大家如何使用Java来发送手机短信验证码. 首先,申请一个阿里云账户(申请账户略 ...
短信验证码原理java_[java发送短信验证码原理]java发送短信验证码
业务: 手机端点击发送验证码,请求发送到java服务器端,由java调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. 下载后的S ...
java 发送短信验证码（使用网易云信）
使用的是网易云信平台,其实每个大平台上都会有对应的SDK,Demo和开发文档,但是有的人只会百度,不想看官方文档,就像我也是如此,所以自己在写短信验证码的时候做个笔记,做个详细的分享,希望在帮助自己的 ...
java发送短信验证码,java发送短信验证码
业务: 手机端点击发送验证码,请求发送到java服务器端,由java调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. 下载后的S ...
java短信判断长度_接收短信验证码条数限制（java发送短信验证码限制）
今天是个周六,还在苦逼加班的我对那些休周末的同行表达羡慕嫉妒,对那么同样加班的同行共勉吧~~ 整理了下这周的工作进度.除了项目试上线以外也就是补充补充之前遗留下的小问题了.这篇文章就是说手机号每天接受 ...
java 短信条数计算_接收短信验证码条数限制（java发送短信验证码限制）
今天是个周六,还在苦逼加班的我对那些休周末的同行表达羡慕嫉妒,对那么同样加班的同行共勉吧~~ 整理了下这周的工作进度.除了项目试上线以外也就是补充补充之前遗留下的小问题了.这篇文章就是说手机号每天接受 ...
一个发送短信验证码然后倒计时实例
如图所示: 点击按钮后,开始倒计时. 下面是代码: (js代码) <script type="text/javascript">var i = 60;function ...

java发送短信验证码带倒计时

java发送短信验证码带倒计时相关推荐

最新文章

热门文章