首先在阿里云上注冊自己的賬號和密碼,然后短信模板和短信簽名是比較重要的,需要申請成功之后才可以使用阿里云上給你提供的短信密鑰。
在后臺比較簡單,阿里云上給你提供了完整的短信驗證碼生成的代碼,復制到你的一個類里就可以直接使用,如下圖所示:
package com.no1.smvc.controller;
//注意:這個地方包含的包我就不粘了哈
public class TelephoneController {
//產品名稱:云通信短信API產品,開發者無需替換
static final String product="Dysmsapi";
//產品域名,開發者無需替換
static final String domain="dysmsapi.aliyuncs.com";
//TODO此處需要替換成開發者自己的AK(在阿里云訪問控制臺尋找)
static final StringaccessKeyId="";
static final String accessKeySecret="";
static final? Integer? NUM=6;
public void sendSms(Stringphone,Stringcode)throws ClientException {
System.out.println("進入telephoneController!#%$#^$%&^%*#%$@&^%");
//可自助調整超時時間
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);
IAcsClientacsClient=newDefaultAcsClient(profile);
//設置六位數驗證碼
// ???????String code="";
// ???????Random r=new Random(new Date().getTime());
// ???????for(inti=0;i<code.Length; i++)
//code+=r.nextInt(10);
// ??????}
//上面的是為了測試,生成的六位驗證碼,如果是去官網粘代碼的話,應該是沒有生成的驗證碼的,只有一個固定的123,靜態的。后來又注釋掉,是因為在前臺使用了Ajax請求,帶回了一個六位的驗證碼
//組裝請求對象-具體描述見控制臺-文檔部分內容
SendSmsRequest? request=new? SendSmsRequest();
request.setMethod(MethodType.POST);
//必填:待發送手機號
request.setPhoneNumbers(phone);
//必填:短信簽名-可在短信控制臺中找到
request.setSignName("");//注意這個地方是你短信簽名中的名稱,就是你在申請短信簽名的時候自己輸入的
//必填:短信模板-可在短信控制臺中找到
request.setTemplateCode("");
//可選:模板中的變量替換JSON串,如模板內容為"親愛的${name},您的驗證碼為${code}"時,此處的值為
request.setTemplateParam("{\"name\":\"Tom\", \"code\":\""+code+"\"}");
//這個地方就是前臺發送到后臺的code參數,阿里云上這個地方的code是123.
//選填-上行短信擴展碼(無特殊需求用戶請忽略此字段)
//request.setSmsUpExtendCode("90997");
//可選:outId為提供給業務方擴展字段,最終在短信回執消息中將此值帶回給調用者
request.setOutId("yourOutId");
//hint 此處可能會拋出異常,注意catch
SendSmsResponse? sendSmsResponse=acsClient.getAcsResponse(request);
if(sendSmsResponse.getCode() !=null&&sendSmsResponse.getCode().equals("OK")) {
//請求成功
}
}
2.已經寫好了短信驗證碼的生成之后,其實可以進行簡單的短信驗證了,可以自己寫一個測試類,調用上面的那個類的方法,給它一個手機號,和你自己定義的驗證碼,是可以實現驗證碼發送到你手機上的。這里簡單的驗證我就不粘代碼了
3.接著就是想在前臺如何實現輸入一個手機號,獲取驗證碼并進行驗證碼驗證的步驟,這些代碼在阿里云上我沒找到,不知道有沒有驗證的接口之類的,因為我想的是獲取了這次驗證碼,將驗證碼保存在這次會話中進行驗證。
<body>
請輸入手機號:<input type="text" name="telephone" id="jbPhone"><br>
<span id="jbPhoneTip">span>
請輸入驗證碼:<inputtype="text"id="SmsCheckCode"><inputtype="button"value="獲取驗證碼"onclick="sendMessage()"id="btnSendCode">
<span id="SmsCheckCodeTip"></span>
<br>
</body>
上面是一個簡單的輸入框,然后輸入手機號進行獲取驗證碼是用ajax進行請求的,代碼如下:
function? SetRemainTime() {
if(curCount == 0) {
window.clearInterval(InterValObj);// 停止計時器
$("#btnSendCode").removeAttr("disabled");// 啟用按鈕
$("#btnSendCode").val("重新發送驗證碼");
code ="";// 清除驗證碼。如果不清除,過時間后,輸入收到的驗證碼依然有效
}else{
curCount--;
$("#btnSendCode").val("請在"+ curCount +"秒內輸入驗證碼");
}
}//這是一個計時器的函數,必須存在,因為獲取驗證碼的時候使用到了這個函數
var InterValObj;//timer變量,控制時間
var count = 120;//間隔函數,1秒執行
var? curCount;//當前剩余秒數
function? sendMessage() {
curCount = count;
var? jbPhone = $("#jbPhone").val();
var? jbPhoneTip = $("#jbPhoneTip").text();
var codeLength = 6;//驗證碼長度
var code ="";//驗證碼
alert(jbPhone);
// 產生驗證碼
for(vari = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
$("#btnSendCode").attr("disabled","true");
$("#btnSendCode").val("請在"+ curCount +"秒內輸入驗證碼");
InterValObj = window.setInterval(SetRemainTime, 1000);// 啟動計時器,1秒執行一次
// 向后臺發送處理數據
$.ajax({
type:"POST",// 用POST方式傳輸
dataType:"text",// 數據格式:JSON
url:"${pageContext.request.contextPath}/telephone/sendSms",// 目標地址
data:"jbPhone="+ jbPhone+"&code="+code ,
success:function(data){
data = parseInt(data, 10);
if(data == 1){
$("#jbPhoneTip").html("√ 短信驗證碼已發到您的手機,請查收");
}elseif(data == 0){
$("#jbPhoneTip").html("× 短信驗證碼發送失敗,請重新發送");
}elseif(data == 2){
$("#jbPhoneTip").html("× 該手機號碼今天發送驗證碼過多");
}}});}
再然后就是此次請求的url地址中的具體代碼:
@Controller("TelephoneService")
@RequestMapping("telephone")
publicclassTelephoneService {
@RequestMapping(value={"sendSms"},method={RequestMethod.POST})
@ResponseBody
public String
telephoneSer(@RequestParam("jbPhone")Stringphone,Stringcode,HttpSessionsession){
TelephoneController? telephone=new? TelephoneController();
String? result="1";
try{
telephone.sendSms(phone,code);
session.setAttribute("code",code);//將此次驗證碼放在session中進行保存,驗證時還需要從會話中取出來
return? result;
}catch(ClientExceptione) {
e.printStackTrace();
}
return? "phone";
}
接下來是前臺頁面上的js腳本寫的ajax發送后臺進行驗證碼的驗證,代碼如下:
$(document).ready(function() {
$("#SmsCheckCode").blur(function() {
varSmsCheckCodeVal = $("#SmsCheckCode").val();
// 向后臺發送處理數據
$.ajax({
url :"${pageContext.request.contextPath}/telephone/checkCode",
data : {SmsCheckCode : SmsCheckCodeVal},
type :"POST",
dataType :"text",
success :function(data){
data = parseInt(data, 10);
if(data == 1) {
$("#SmsCheckCodeTip").html("√ 短信驗證碼正確,請繼續");
}else{
$("#SmsCheckCodeTip").html("× 短信驗證碼有誤,請核實后重新填寫");
}}});});});
在后臺進行處理驗證的代碼如下:
@RequestMapping(value={"checkCode"},method={RequestMethod.POST})
@ResponseBody
public? String telephoneSer(@RequestParam("SmsCheckCode")Stringcode,HttpSessionsession){
Stringresult="0";
System.out.println(code);
if(code.equals(session.getAttribute("code"))){
result="1";
}else{
result="0";
}
return? result;
}
所有的流程基本上就完成了,因為是基于ssm框架寫的,所以你在使用的時候需要搭框架,如果不搭框架也是可以的,不過相對來說較為麻煩。