筆者在一次網站注冊獲取手機驗證碼的需求中發現網上沒有幾個能直接使用的代碼，而且整體比較亂，同時更新的時間也比較久遠，開通阿里雲短信服務的地方都有點偏差。所以，自己整理一個整體流程僅供參考。
首先為了實現給手機發送短信來進行驗證碼驗證，要有接口，所以需要先開通阿里雲短信服務，如下：
1.登錄阿里雲
阿里雲官網：https://www.aliyun.com/
需要有阿里雲的賬號，進行注冊申請，登錄成功后，進去控制台，然后找到短信服務。
2.創建簽名和模板
來到短信服務主頁后，點擊管理控制台，選中 “國內消息”，然后看到右邊有簽名管理和模板管理，進行創建簽名和模板
添加簽名的模板如圖所示，簽名可以是網站或者系統的名字或者功能使用，不能太簡潔，六個字以上，我這里只是個測試不要學我哦。后面會用到，然后點擊確定，此時會顯示審核中。一般情況下三十分鍾左右審核完畢。
添加模板，其中模板名稱就是短信的最前面【】中括號里面的名稱，一般為App的名稱或者網站名稱。模板內容按自己喜好來，同樣審核，如下所示。
3.開始實際開發，這里給出調用API的工具類代碼：
import com.aliyuncs.DefaultAcsClient; import com.aliyuncs.IAcsClient; import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest; import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse; import com.aliyuncs.exceptions.ClientException; import com.aliyuncs.profile.DefaultProfile; import com.aliyuncs.profile.IClientProfile; public class SendCode { static final String product = "Dysmsapi"; //產品域名,開發者無需替換 static final String domain = "dysmsapi.aliyuncs.com"; // TODO 此處需要替換成開發者自己的AK(在阿里雲訪問控制台尋找) static final String accessKeyId = ""; static final String accessKeySecret = ""; public static SendSmsResponse sendSms(String phone,String code,String templateCode) throws ClientException { //可自助調整超時時間 System.setProperty("sun.net.client.defaultConnectTimeout", "10000"); System.setProperty("sun.net.client.defaultReadTimeout", "10000"); //初始化acsClient,暫不支持region化 IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret); DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain); IAcsClient acsClient = new DefaultAcsClient(profile); //組裝請求對象-具體描述見控制台-文檔部分內容 SendSmsRequest request = new SendSmsRequest(); //必填:待發送手機號 request.setPhoneNumbers(phone); //必填:短信簽名-可在短信控制台中找到 request.setSignName("你的簽名"); //必填:短信模板-可在短信控制台中找到 request.setTemplateCode(templateCode);//短信模板 //可選:模板中的變量替換JSON串,如模板內容為"親愛的${name},您的驗證碼為${code}"時,此處的值為 request.setTemplateParam("{\"code\":\""+code+"\"}"); //選填-上行短信擴展碼(無特殊需求用戶請忽略此字段) //request.setSmsUpExtendCode("90997"); //可選:outId為提供給業務方擴展字段,最終在短信回執消息中將此值帶回給調用者 request.setOutId("yourOutId"); //hint 此處可能會拋出異常，注意catch SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request); return sendSmsResponse; } }
需要你改的只有accessKeyId，accessKeySecret和你的簽名名稱。accessKeyId，accessKeySecret點擊頭像選中“accessKeyId”點擊就會看到,簽名就是你申請通過的簽名。
4.后台服務調用工具類，可以根據自己的業務邏輯進行更改，這里給出我使用SSM框架在UserController中調用的代碼：
@RequestMapping(value = "/sendcode",method = RequestMethod.GET) @ResponseBody public String sendcode (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String phone = request.getParameter("phone"); String code = request.getParameter("code"); try { SendCode.sendSms(phone, code,"你的模板CODE"); //調用短信發送接口，三個參數，手機號，驗證碼，短信模板 } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return "{\"success\":true,\"flag\":true}"; }
5.前端根據自己的實際需要以及喜歡的樣式進行開發，這里給出我自己的代碼：
<!--處理發送手機驗證碼 -->
<script type="text/javascript">
var InterValObj; //timer變量，控制時間
var count = 120; //間隔函數，1秒執行
var curCount;//當前剩余秒數
var code = ""; //驗證碼
var codeLength = 6;//驗證碼長度
function sendMessage() {
curCount = count;
var phone=$("#phone").val();//手機號碼
if(phone != ""){
//產生驗證碼
for (var i = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
//設置button效果，開始計時
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執行一次
//向后台發送處理數據
$.ajax({
url:'<%=basePath%>user/sendcode',
type:'GET',
data:"phone=" + phone + "&code=" + code,
dataType:'json',
success:function(json){
if(json.flag){
alert("發送成功，請注意查收!");
}else{
alert("發送失敗，請重新發送!");
}
},
error:function(){
alert('請求超時或系統出錯!');
}
});
}else{
alert("手機號碼不能為空！");
}
}
//timer處理函數
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計時器
$("#btnSendCode").removeAttr("disabled");//啟用按鈕
$("#btnSendCode").val("重新發送驗證碼");
code = ""; //清除驗證碼。如果不清除，過時間后，輸入收到的驗證碼依然有效
}
else {
curCount--;
$("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
}
}
//處理注冊
function adduser() {
var checkcode=$("#checkcode").val();
var username=$("#username").val();
var phone=$("#phone").val();
var password=$("#password").val();
if(checkcode==code){
$.ajax({
url:'<%=basePath%>user/addUser',
type: "POST",
data:"phone=" + phone + "&username=" + username +"&password=" + password,
dataType:'json',
success:function(json){
if(json.flag){
alert("恭喜你，注冊成功!");
location.reload();
}
},
error:function(){
alert('請求超時或系統出錯!');
}
});
}
else{
alert("注冊失敗，驗證碼錯誤!");
}
}
</script>
我這里是設置的獲取驗證碼后120秒倒計時並且無法點擊，120秒過后Button變成“重新獲取”並且可被點擊。代碼除了工具類自己做了修改，其他純原創，僅供參考！