开发人员在开发网站注册、登录时经常需要用到短信验证码功能，下面小编就来详细介绍一下如何集成这个功能。

下面以使用榛子云短信为例:

1. 首先注册一个榛子云账号，注册地址: http://sms_developer.zhenzikj.com/zhenzisms_user/register.html

 

 

2. 注册完毕后从个人登录入口进入，地址:http://sms_developer.zhenzikj.com/zhenzisms_user/login.html

 

 

3. 进入”应用管理”，默认会自动创建一个应用，获取AppId和AppSecret，这两个参数是用于开发的。

 

 

4. 下载SDK，我用的java开发，所以，下面的例子也以java为例，http://smsow.zhenzikj.com/doc/sdk.html

 

你可以直接下载jar包导入项目中，也可以使用maven

<dependency>
   <groupId>com.zhenzikj</groupId>
  <artifactId>zhenzisms</artifactId>
  <version>1.0.2</version>
</dependency>

 

5. 参考开发文档发送短信http://smsow.zhenzikj.com/doc/java_sdk_doc.html

 

AppId、AppSecret就是我们刚才从应用管理中获取的，apiUrl参数，由于我是个人账号，固定使用https://sms_developer.zhenzikj.com

注: 通过自己注册的都是个人账号，企业账号需要单独联系客服申请

使用很简单，初始化一个ZhenziSmsClient对象，然后调用send()方法发送短信

 

6. 一个完整的例子

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

效果:

 

源码

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

 

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

 

html

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
  6. %>
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <title>验证码使用演示</title>
  12. <link href="<%=basePath%>/css/register.css" rel="stylesheet" >
  13. <script src="<%=basePath%>/js/jquery-2.1.1.min.js" type="text/javascript"></script>
  14. <script src="<%=basePath%>/js/register.js" type="text/javascript"></script>
  15. <script>
  16. 	function getBasePath(){
  17. 	    return \'<%=basePath%>\';
  18.     }
  19. </script>
  20. </head>
  21. <body>
  22.    <form>
  23.        <div class="row">
  24.            <label>账号: </label><input name="userId">
  25.        </div>
  26.        <div class="row">
  27.            <label>密码:</label><input name="password">
  28.        </div>
  29.        <div class="row">
  30.            <label>手机号:</label><input name="mobile">
  31.        </div>
  32.        <div class="row">
  33.            <label>验证码:</label>
  34.            <input name="verifyCode">
  35.            <button type="button" class="sendVerifyCode">获取短信验证码</button>
  36.        </div>
  37.        <div><button type="button" class="sub-btn">提交</button></div>
  38.    </form>
  39. </body>
  40. </html>

　　

js

  1. $(function(){ 
  2. 	//短信验证码倒计时
  3. 	var countdownHandler = function(){
  4. 		var $button = $(".sendVerifyCode");
  5. 		var number = 60;
  6. 		var countdown = function(){
  7. 			if (number == 0) {
  8. 				$button.attr("disabled",false);
  9. 				$button.html("发送验证码");
  10. 	            number = 60;
  11. 	            return;
  12. 	        } else {
  13. 	        	$button.attr("disabled",true);
  14. 	        	$button.html(number + "秒 重新发送");
  15. 	        	number--;
  16. 	        }
  17. 			setTimeout(countdown,1000);
  18. 		}
  19. 		setTimeout(countdown,1000);
  20. 	}
  21. 	//发送短信验证码
  22. 	$(".sendVerifyCode").on("click", function(){
  23. 		var $mobile = $("input[name=mobile]");
  24. 		var data = {};
  25. 		data.mobile = $.trim($mobile.val());
  26. 		if(data.mobile == \'\'){
  27. 			alert(\'请输入手机号码\');
  28. 			return;
  29. 		}
  30. 		var reg = /^1\d{10}$/;
  31. 		if(!reg.test(data.mobile)){
  32. 			alert(\'请输入合法的手机号码\');
  33. 			return ;
  34. 		}
  35. 		$.ajax({
  36. 	        url: getBasePath()+"/sendSms",
  37. 	        async : true,
  38. 	        type: "post",
  39. 	        dataType: "text",
  40. 	        data: data,
  41. 	        success: function (data) {
  42. 	        	if(data == \'success\'){
  43. 	        		countdownHandler();
  44. 	        		return ;
  45. 	        	}
  46. 	        	alert(data);
  47. 	        }
  48.     	});
  49. 	})
  50. 	//提交
  51. 	$(".sub-btn").on("click", function(){
  52. 		var data = {};
  53. 		data.userId = $.trim($("input[name=userId]").val());
  54. 		data.password = $.trim($("input[name=password]").val());
  55. 		data.mobile = $.trim($("input[name=mobile]").val());
  56. 		data.verifyCode = $.trim($("input[name=verifyCode]").val());
  57. 		if(data.userId == \'\'){
  58. 			alert("请输入账号");
  59. 			return ;
  60. 		}
  61. 		if(data.password == \'\'){
  62. 			alert("请输入密码");
  63. 			return ;
  64. 		}
  65. 		if(data.mobile == \'\'){
  66. 			alert("请输入手机号");
  67. 			return ;
  68. 		}
  69. 		if(data.verifyCode == \'\'){
  70. 			alert("请输入验证码");
  71. 			return ;
  72. 		}
  73. 		$.ajax({
  74. 	        url: getBasePath()+"/register",
  75. 	        async : true,
  76. 	        type: "post",
  77. 	        dataType: "text",
  78. 	        data: data,
  79. 	        success: function (data) {
  80. 	        	if(data == \'success\'){
  81. 	        		alert("注册成功");
  82. 	        		return ;
  83. 	        	}
  84. 	        	alert(data);
  85. 	        }
  86.     	});
  87. 	})
  88. });

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

流程：

1)填写手机号

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

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

 

后端代码

发送短信验证码

  1. package com.zhenzi.sms;
  2.  
  3. import java.io.IOException;
  4. import java.util.Random;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10. import javax.servlet.http.HttpSession;
  11.  
  12. import com.alibaba.fastjson.JSONObject;
  13.  
  14. /**
  15.  * 获取验证码
  16.  */
  17. public class SendSmsServlet extends HttpServlet {
  18. 	private static final long serialVersionUID = 1L;
  19. 	//短信平台相关参数
  20. 	private String apiUrl = "https://sms_developer.zhenzikj.com";
  21. 	private String appId = "000000";
  22. 	private String appSecret = "c384b67bdsserev3343cdda4de5c8";
  23.        
  24.     public SendSmsServlet() {
  25.         super();
  26.     }
  27.  
  28. 	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  29. 		doPost(request, response);
  30. 	}
  31.  
  32. 	/**
  33. 	 * 短信平台使用的是榛子云短信(smsow.zhenzikj.com)
  34. 	 */
  35. 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  36. 		try {
  37. 			String mobile = request.getParameter("mobile");
  38. 			JSONObject json = null;
  39. 			//生成6位验证码
  40. 			String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);
  41. 			//发送短信
  42. 			ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);
  43. 			String result = "{code:0}";//client.send(mobile, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次!");
  44. 			json = JSONObject.parseObject(result);
  45. 			if(json.getIntValue("code") != 0){//发送短信失败
  46. 				renderData(response, "fail");
  47. 				return; 
  48. 			}
  49. 			//将验证码存到session中,同时存入创建时间
  50. 			//以json存放，这里使用的是阿里的fastjson
  51. 			HttpSession session = request.getSession();
  52. 			json = new JSONObject();
  53. 			json.put("mobile", mobile);
  54. 			json.put("verifyCode", verifyCode);
  55. 			json.put("createTime", System.currentTimeMillis());
  56. 			// 将认证码存入SESSION
  57. 			request.getSession().setAttribute("verifyCode", json);
  58. 			renderData(response, "success");
  59. 			return ;
  60. 		} catch (Exception e) {
  61. 			e.printStackTrace();
  62. 		}
  63. 		renderData(response, "fail");
  64. 	}
  65. 	
  66. 	protected void renderData(HttpServletResponse response, String data){
  67. 		try {
  68. 			response.setContentType("text/plain;charset=UTF-8");
  69. 			response.getWriter().write(data);
  70. 		} catch (Exception e) {
  71. 			e.printStackTrace();
  72. 		}
  73. 	}
  74. }

　　

json工具使用的是阿里的fastjson

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

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

 

提交注册

  1. package com.zhenzi.sms;
  2.  
  3. import java.io.IOException;
  4.  
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9.  
  10. import com.alibaba.fastjson.JSONObject;
  11.  
  12. /**
  13.  * 注册
  14.  */
  15. public class RegisterServlet extends HttpServlet {
  16. 	private static final long serialVersionUID = 1L;
  17.        
  18.     
  19.     public RegisterServlet() {
  20.         super();
  21.     }
  22.  
  23. 	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  24. 		doPost(request, response);
  25. 	}
  26.  
  27. 	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  28. 		String userId = request.getParameter("userId");
  29. 		String password = request.getParameter("password");
  30. 		String mobile = request.getParameter("mobile");
  31. 		String verifyCode = request.getParameter("verifyCode");
  32. 		JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode");
  33. 		if(json == null){
  34. 			renderData(response, "验证码错误");
  35. 			return ;
  36. 		}
  37. 		if(!json.getString("mobile").equals(mobile)){
  38. 			renderData(response, "手机号错误");
  39. 			return ;
  40. 		}
  41. 		if(!json.getString("verifyCode").equals(verifyCode)){
  42. 			renderData(response, "验证码错误");
  43. 			return ;
  44. 		}
  45. 		if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 5){
  46. 			renderData(response, "验证码已过期");
  47. 			return ;
  48. 		}
  49. 		//其他业务代码
  50. 		renderData(response, "success");
  51. 	}
  52. 	protected void renderData(HttpServletResponse response, String data){
  53. 		try {
  54. 			response.setContentType("text/plain;charset=UTF-8");
  55. 			response.getWriter().write(data);
  56. 		} catch (Exception e) {
  57. 			e.printStackTrace();
  58. 		}
  59. 	}
  60. }

　　

ok，大功告成

 

源码下载

　　

 

版权声明：本文为laozuo3原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/laozuo3/p/11574674.html