首先在阿里云上注冊自己的賬號和密碼晓勇,然后短信模板和短信簽名是比較重要的篱竭,需要申請成功之后才可以使用阿里云上給你提供的短信密鑰路狮。
在后臺比較簡單,阿里云上給你提供了完整的短信驗(yàn)證碼生成的代碼毡庆,復(fù)制到你的一個(gè)類里就可以直接使用坑赡,如下圖所示:
package com.no1.smvc.controller;
//注意:這個(gè)地方包含的包我就不粘了哈
public class TelephoneController {
//產(chǎn)品名稱:云通信短信API產(chǎn)品,開發(fā)者無需替換
static final String product="Dysmsapi";
//產(chǎn)品域名,開發(fā)者無需替換
static final String domain="dysmsapi.aliyuncs.com";
//TODO此處需要替換成開發(fā)者自己的AK(在阿里云訪問控制臺尋找)
static final StringaccessKeyId="";
static final String accessKeySecret="";
static final? Integer? NUM=6;
public void sendSms(Stringphone,Stringcode)throws ClientException {
System.out.println("進(jìn)入telephoneController!#%$#^$%&^%*#%$@&^%");
//可自助調(diào)整超時(shí)時(shí)間
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);
//設(shè)置六位數(shù)驗(yàn)證碼
// ???????String code="";
// ???????Random r=new Random(new Date().getTime());
// ???????for(inti=0;i<code.Length; i++)
//code+=r.nextInt(10);
// ??????}
//上面的是為了測試,生成的六位驗(yàn)證碼么抗,如果是去官網(wǎng)粘代碼的話毅否,應(yīng)該是沒有生成的驗(yàn)證碼的,只有一個(gè)固定的123蝇刀,靜態(tài)的螟加。后來又注釋掉,是因?yàn)樵谇芭_使用了Ajax請求,帶回了一個(gè)六位的驗(yàn)證碼
//組裝請求對象-具體描述見控制臺-文檔部分內(nèi)容
SendSmsRequest? request=new? SendSmsRequest();
request.setMethod(MethodType.POST);
//必填:待發(fā)送手機(jī)號
request.setPhoneNumbers(phone);
//必填:短信簽名-可在短信控制臺中找到
request.setSignName("");//注意這個(gè)地方是你短信簽名中的名稱捆探,就是你在申請短信簽名的時(shí)候自己輸入的
//必填:短信模板-可在短信控制臺中找到
request.setTemplateCode("");
//可選:模板中的變量替換JSON串,如模板內(nèi)容為"親愛的${name},您的驗(yàn)證碼為${code}"時(shí),此處的值為
request.setTemplateParam("{\"name\":\"Tom\", \"code\":\""+code+"\"}");
//這個(gè)地方就是前臺發(fā)送到后臺的code參數(shù)然爆,阿里云上這個(gè)地方的code是123.
//選填-上行短信擴(kuò)展碼(無特殊需求用戶請忽略此字段)
//request.setSmsUpExtendCode("90997");
//可選:outId為提供給業(yè)務(wù)方擴(kuò)展字段,最終在短信回執(zhí)消息中將此值帶回給調(diào)用者
request.setOutId("yourOutId");
//hint 此處可能會拋出異常,注意catch
SendSmsResponse? sendSmsResponse=acsClient.getAcsResponse(request);
if(sendSmsResponse.getCode() !=null&&sendSmsResponse.getCode().equals("OK")) {
//請求成功
}
}
2.已經(jīng)寫好了短信驗(yàn)證碼的生成之后黍图,其實(shí)可以進(jìn)行簡單的短信驗(yàn)證了曾雕,可以自己寫一個(gè)測試類,調(diào)用上面的那個(gè)類的方法助被,給它一個(gè)手機(jī)號剖张,和你自己定義的驗(yàn)證碼,是可以實(shí)現(xiàn)驗(yàn)證碼發(fā)送到你手機(jī)上的揩环。這里簡單的驗(yàn)證我就不粘代碼了
3.接著就是想在前臺如何實(shí)現(xiàn)輸入一個(gè)手機(jī)號搔弄,獲取驗(yàn)證碼并進(jìn)行驗(yàn)證碼驗(yàn)證的步驟,這些代碼在阿里云上我沒找到检盼,不知道有沒有驗(yàn)證的接口之類的肯污,因?yàn)槲蚁氲氖谦@取了這次驗(yàn)證碼,將驗(yàn)證碼保存在這次會話中進(jìn)行驗(yàn)證吨枉。
<body>
請輸入手機(jī)號:<input type="text" name="telephone" id="jbPhone"><br>
<span id="jbPhoneTip">span>
請輸入驗(yàn)證碼:<inputtype="text"id="SmsCheckCode"><inputtype="button"value="獲取驗(yàn)證碼"onclick="sendMessage()"id="btnSendCode">
<span id="SmsCheckCodeTip"></span>
<br>
</body>
上面是一個(gè)簡單的輸入框蹦渣,然后輸入手機(jī)號進(jìn)行獲取驗(yàn)證碼是用ajax進(jìn)行請求的,代碼如下:
function? SetRemainTime() {
if(curCount == 0) {
window.clearInterval(InterValObj);// 停止計(jì)時(shí)器
$("#btnSendCode").removeAttr("disabled");// 啟用按鈕
$("#btnSendCode").val("重新發(fā)送驗(yàn)證碼");
code ="";// 清除驗(yàn)證碼貌亭。如果不清除柬唯,過時(shí)間后,輸入收到的驗(yàn)證碼依然有效
}else{
curCount--;
$("#btnSendCode").val("請?jiān)?+ curCount +"秒內(nèi)輸入驗(yàn)證碼");
}
}//這是一個(gè)計(jì)時(shí)器的函數(shù)圃庭,必須存在锄奢,因?yàn)楂@取驗(yàn)證碼的時(shí)候使用到了這個(gè)函數(shù)
var InterValObj;//timer變量,控制時(shí)間
var count = 120;//間隔函數(shù)剧腻,1秒執(zhí)行
var? curCount;//當(dāng)前剩余秒數(shù)
function? sendMessage() {
curCount = count;
var? jbPhone = $("#jbPhone").val();
var? jbPhoneTip = $("#jbPhoneTip").text();
var codeLength = 6;//驗(yàn)證碼長度
var code ="";//驗(yàn)證碼
alert(jbPhone);
// 產(chǎn)生驗(yàn)證碼
for(vari = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
$("#btnSendCode").attr("disabled","true");
$("#btnSendCode").val("請?jiān)?+ curCount +"秒內(nèi)輸入驗(yàn)證碼");
InterValObj = window.setInterval(SetRemainTime, 1000);// 啟動計(jì)時(shí)器拘央,1秒執(zhí)行一次
// 向后臺發(fā)送處理數(shù)據(jù)
$.ajax({
type:"POST",// 用POST方式傳輸
dataType:"text",// 數(shù)據(jù)格式:JSON
url:"${pageContext.request.contextPath}/telephone/sendSms",// 目標(biāo)地址
data:"jbPhone="+ jbPhone+"&code="+code ,
success:function(data){
data = parseInt(data, 10);
if(data == 1){
$("#jbPhoneTip").html("√ 短信驗(yàn)證碼已發(fā)到您的手機(jī),請查收");
}elseif(data == 0){
$("#jbPhoneTip").html("× 短信驗(yàn)證碼發(fā)送失敗,請重新發(fā)送");
}elseif(data == 2){
$("#jbPhoneTip").html("× 該手機(jī)號碼今天發(fā)送驗(yàn)證碼過多");
}}});}
再然后就是此次請求的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);//將此次驗(yàn)證碼放在session中進(jìn)行保存书在,驗(yàn)證時(shí)還需要從會話中取出來
return? result;
}catch(ClientExceptione) {
e.printStackTrace();
}
return? "phone";
}
接下來是前臺頁面上的js腳本寫的ajax發(fā)送后臺進(jìn)行驗(yàn)證碼的驗(yàn)證灰伟,代碼如下:
$(document).ready(function() {
$("#SmsCheckCode").blur(function() {
varSmsCheckCodeVal = $("#SmsCheckCode").val();
// 向后臺發(fā)送處理數(shù)據(jù)
$.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("√ 短信驗(yàn)證碼正確,請繼續(xù)");
}else{
$("#SmsCheckCodeTip").html("× 短信驗(yàn)證碼有誤儒旬,請核實(shí)后重新填寫");
}}});});});
在后臺進(jìn)行處理驗(yàn)證的代碼如下:
@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;
}
所有的流程基本上就完成了栏账,因?yàn)槭腔趕sm框架寫的,所以你在使用的時(shí)候需要搭框架栈源,如果不搭框架也是可以的挡爵,不過相對來說較為麻煩。