短信验证码

写一个发送验证码的功能，需要实现第三方接口，一般采用阿里的接口

第一步:登录阿里大于官网，只需淘宝号即可。

第二步：申请验证码中的签名和短信模板，审核通过即可测试

第三步：下载阿里大于的jar包，根据自己的环境下载什么类型的jar包（sdk-java-2016-06-07.zip）

第四步：解压，引入项目中的，lib文件夹下面

taobao-sdk-java-auto_1455552377940-20160607.jar

第五步：代码实现功能

写短信验证工具类：

记得利用第三方json框架处理json格式的字符串.
google (gson).
-- gson-2.2.4.jar导入lib文件夹下面

/*** */
package cn.oa.core.common.sms;import com.google.gson.Gson;
import com.google.gson.JsonObject;
import com.taobao.api.ApiException;
import com.taobao.api.DefaultTaobaoClient;
import com.taobao.api.TaobaoClient;
import com.taobao.api.request.AlibabaAliqinFcSmsNumSendRequest;
import com.taobao.api.response.AlibabaAliqinFcSmsNumSendResponse;/*** @Description:短信验证工具类* @Package cn.oa.core.common.sms* @date 2016年8月24日上午8:51:04* @author jeo_chow* @blog http://blog.csdn.net/jeo_chow* @version V1.0*/
public class SMSUtils {/** 短信接口的请求地址 */public static final String SMS_REQUEST_URL = "http://gw.api.taobao.com/router/rest";/** ################# 需要根据情况填写下面的属性 #################### *//** 应用的Key */private static final String APP_KEY = "23439439";/** 　应用的签名 */private static final String APP_SECRET = "e0c1e4025545982deee4bfbe29f5ca3c";/** 短信签名 */private static final String SMS_FREE_SIGN_NAME = "六扇门oa办公";/** 短信模板ID */private static final String SMS_TEMPLATE_CODE = "SMS_13186489";/*** 验证码短信发送方法* * @param code*            验证码* @param phones*            手机号码* @return true 发送成功，false 发送失败*/public static boolean send(String code, String phones) {try {/*** 创建淘宝客户端 参数一：请求URL（短信接口的请求地址） 参数二：应用的Key 参数三：应用的签名* 方法里面的参数用常量定义。可以随时改*/TaobaoClient client = new DefaultTaobaoClient(SMS_REQUEST_URL,APP_KEY, APP_SECRET);/** 构建短信发送请求对象 */AlibabaAliqinFcSmsNumSendRequest req = new AlibabaAliqinFcSmsNumSendRequest();/** ######################### 封装请求参数 ############################ *//*** 公共回传参数，在“消息返回”中会透传回该参数；举例：用户可以传入自己下级的会员ID，* 在消息返回时，该会员ID会包含在内，用户可以根据该会员ID识别是哪位会员使用了你的应用 (可选)*/req.setExtend("六扇门捕神传来成功消息");/*** 短信类型，传入值请填写normal (必须)*/req.setSmsType("normal");/*** 短信签名，传入的短信签名必须是在阿里大于“管理中心-短信签名管理”中的可用签名。* 如“阿里大于”已在短信签名管理中通过审核，则可传入”阿里大于“（传参时去掉引号）作为短信签名。* 短信效果示例：【阿里大于】欢迎使用阿里大于服务。 (必须)*/req.setSmsFreeSignName(SMS_FREE_SIGN_NAME);/*** 短信模板ID，传入的模板必须是在阿里大于“管理中心-短信模板管理”中的可用模板。 示例：SMS_585014 (必须)*/req.setSmsTemplateCode(SMS_TEMPLATE_CODE);/*** 短信模板变量，传参规则{"key":"value"}，key的名字须和申请模板中的变量名一致，多个变量之间以逗号隔开。* 示例：针对模板“验证码${code}，您正在进行${product}身份验证，打死不要告诉别人哦！”，* 传参时需传入{"code":"1234","product":"alidayu"}* 验证码${number}，您正进行身份验证，打死不告诉别人！ (可选)*/req.setSmsParamString("{\"number\":\"" + code + "\"}");/*** 短信模板变量，传参规则{"key":"value"}，key的名字须和申请模板中的变量名一致，多个变量之间以逗号隔开。* 示例：针对模板“验证码${code}，您正在进行${product}身份验证，打死不要告诉别人哦！”，* 传参时需传入{"code":"1234","product":"alidayu"}* 验证码${number}，您正进行身份验证，打死不告诉别人！ (可选)*/req.setRecNum(phones);/** 执行请求得到响应对象 */AlibabaAliqinFcSmsNumSendResponse response = client.execute(req);/*** {"alibaba_aliqin_fc_sms_num_send_response": {"result":* {"model":"102576995949^0","success":true},* "request_id":"44nzz2ck96uq" } }*//** 获取响应数据 */String responseData = response.getBody();if (responseData.contains("success")) {// JsonObject: {}// JsonArray: []/** 使用第三方插件 创建gson对象 */Gson gson = new Gson();return gson.fromJson(responseData, JsonObject.class).getAsJsonObject("alibaba_aliqin_fc_sms_num_send_response").getAsJsonObject("result").get("success").getAsBoolean();}return false;} catch (ApiException e) {e.printStackTrace();}return false;}
}

写一个简单的发送短信验证码jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>办公管理系统-短信验证码</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="pragma" content="no-cache"/><meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/><meta name="Keywords" content="keyword1,keyword2,keyword3"/><meta name="Description" content="网页信息的描述" /><meta name="Author" content="fkjava.org" /><meta name="Copyright" content="All Rights Reserved." /><link href="${path}/logo.ico" rel="shortcut icon" type="image/x-icon" /><link href="${path}/css/common/admin.css" type="text/css" rel="stylesheet"/><script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript" src="${path}/js/jquery-timer-1.0.js"></script><script type="text/javascript">$(function(){/** 为获取验证码按钮绑定点击事件 */$("#verifyBtn").click(function(){/** 发送异步请求 */$.ajax({url : "${path}/sendSMSAjax.jspx",type : "post",data : {phone : $("#phone").val()}, // 请求参数dataType : "text",async : true,success : function(data){if ($.parseJSON(data)){/** 使当前按钮失效 */$("#verifyBtn").attr("disabled", true).countDown("{0}秒后重新获取验证码", 60);}},error : function(){alert("数据加载失败！");}});});});</script></head>
<body><br/><table align="center" class="editTable" cellpadding="8" cellspacing="1"><s:actionerror/><s:fielderror/><tbody style="background-color: #FFFFFF;"><s:form action="/admin/updateSelf.jspx" method="post" id="updateSelfForm" theme="simple"><s:token></s:token><tr><td width="65px;">手机号码：</td><td><input type="text" name="phone" size="18" id="phone"/></td></tr><tr><td>验证码：</td><td><input type="text" name="phone" size="18"/><input type="button"  value="获取验证码" id="verifyBtn"/></td></tr></s:form></tbody></table>
</body>
</html>

配置发送异步请求的xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN""http://struts.apache.org/dtds/struts-2.3.dtd"><struts><!-- 配置Struts2常量 --><constant name="struts.enable.DynamicMethodInvocation" value="false"/><constant name="struts.devMode" value="true" /><constant name="struts.action.extension" value="jspx,action,do"/><!-- 配置全局的国际化资源文件 --><constant name="struts.custom.i18n.resources" value="oa_messages"></constant><package name="oa" namespace="/" extends="json-default"><!-- 全局结果配置 --><!-- 全局异常配置 --><global-exception-mappings><exception-mapping exception="java.lang.Exception" result="error"/></global-exception-mappings><!-- 图形验证码 --><action name="verify" class="cn.oa.core.action.VerifyAction"></action><!-- 异步发送验证码 --><action name="sendSMSAjax" class="cn.oa.core.action.SmsVerifyAction"><result type="json"><!-- 记得加上enableGZIP --><param name="root">smsSuccess</param></result></action></package><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">     	</span>

   	<!-- 引入子文件 --><include file="cn/oa/admin/struts-admin.xml"></include>
</struts>

异步请求处理类短信验证码控制器

/*** */
package cn.oa.core.action;import java.util.UUID;import cn.oa.core.common.sms.SMSUtils;import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;/*** @Description:短信验证码控制器* @Package cn.oa.core.action* @date 2016年8月24日下午6:58:06* @author jeo_chow* @blog http://blog.csdn.net/jeo_chow* @version V1.0*/
public class SmsVerifyAction extends ActionSupport {/** 定义存入在Session短信验证码 */public static final String SMS_VERIFY_CODE = "sms_verify_code";/** 定义手机号码 */private String phone;/** 定义短信是否发送成功的Field */private boolean smsSuccess;/** (non-Javadoc)* * @see com.opensymphony.xwork2.ActionSupport#execute()*/@Overridepublic String execute() {try {/** 随机生成四位数字的验证码 */String code = UUID.randomUUID().toString().replaceAll("[a-z|-]", "").substring(0, 4);smsSuccess = SMSUtils.send(code, phone);if (smsSuccess) {/** 存入Session中用于验证判断的 */ActionContext.getContext().getSession().put(SMS_VERIFY_CODE, code);}} catch (Exception e) {e.printStackTrace();}return SUCCESS;}public String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public boolean getSmsSuccess() {return smsSuccess;}public void setSmsSuccess(boolean smsSuccess) {this.smsSuccess = smsSuccess;}}

按钮上要求显示倒计时时间，写一个自定义的插件（

jquery-timer-1.0.js

）

/*** jQuery日期插件* 匿名函数*/
(function($) {/** * 倒计时的方法* text:显示的文本* seconds：秒数* */countDown:function(text,seconds){if(seconds>1){/** 自减*/seconds--;/** 替换掉text中的占位符{0}*/var res =text.replace("{0}",seconds);/** 为按钮添加value属性值*/this.val(res);var obj=this;/** 开启延迟的定时器*/setTimeout(function(){obj.countDown(text,seconds);},1000);}else {/** 按钮变成亮色状态*/$(this).attr("disabled",false).val("重新获取验证码");}}});})(jQuery);

完成了之后就可以测试了！