我使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com 我是java开发者,后端使用了springMvc,前端用的是jsp + jquery
下载demo: http://smsow.zhenzikj.com/doc/sdk.html 或者 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;%>复制代码验证码使用演示
js
$(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 = "{code:0}";//client.send(mobile, "您的验证码为:" + verifyCode + ",该码有效期为5分钟,该码只能使用一次!"); json = JSONObject.parseObject(result); if(json.getIntValue("code") != 0){//发送短信失败 renderData(response, "fail"); return; } //将验证码存到session中,同时存入创建时间 //以json存放,这里使用的是阿里的fastjson HttpSession session = request.getSession(); json = new JSONObject(); json.put("mobile", mobile); json.put("verifyCode", verifyCode); json.put("createTime", System.currentTimeMillis()); // 将认证码存入SESSION request.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工具使用的是阿里的
appId和appSecret换成你自己的,注册之后可获得
注册地址:
提交注册
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,大功告成