短信驗(yàn)證碼的實(shí)現(xiàn)

首先在阿里云上注冊自己的賬號和密碼晓勇,然后短信模板和短信簽名是比較重要的篱竭,需要申請成功之后才可以使用阿里云上給你提供的短信密鑰路狮。

在后臺比較簡單,阿里云上給你提供了完整的短信驗(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í)候需要搭框架栈源,如果不搭框架也是可以的挡爵,不過相對來說較為麻煩。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末甚垦,一起剝皮案震驚了整個(gè)濱河市茶鹃,隨后出現(xiàn)的幾起案子涣雕,更是在濱河造成了極大的恐慌,老刑警劉巖前计,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胞谭,死亡現(xiàn)場離奇詭異,居然都是意外死亡男杈,警方通過查閱死者的電腦和手機(jī)丈屹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來伶棒,“玉大人旺垒,你說我怎么就攤上這事》粑蓿” “怎么了先蒋?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長宛渐。 經(jīng)常有香客問我竞漾,道長,這世上最難降的妖魔是什么窥翩? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任业岁,我火速辦了婚禮,結(jié)果婚禮上寇蚊,老公的妹妹穿的比我還像新娘笔时。我一直安慰自己,他們只是感情好仗岸,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布允耿。 她就那樣靜靜地躺著,像睡著了一般扒怖。 火紅的嫁衣襯著肌膚如雪较锡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天盗痒,我揣著相機(jī)與錄音念链,去河邊找鬼。 笑死积糯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的谦纱。 我是一名探鬼主播看成,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼跨嘉!你這毒婦竟也來了川慌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎梦重,沒想到半個(gè)月后兑燥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡琴拧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年降瞳,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚓胸。...
    茶點(diǎn)故事閱讀 38,059評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡挣饥,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沛膳,到底是詐尸還是另有隱情扔枫,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布锹安,位于F島的核電站短荐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏叹哭。R本人自食惡果不足惜忍宋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望话速。 院中可真熱鬧讶踪,春花似錦、人聲如沸泊交。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽廓俭。三九已至云石,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間研乒,已是汗流浹背汹忠。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雹熬,地道東北人宽菜。 一個(gè)月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像竿报,于是被迫代替她去往敵國和親铅乡。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說閱讀 10,869評論 6 13
  • 《ijs》速成開發(fā)手冊3.0 官方用戶交流:iApp開發(fā)交流(1) 239547050iApp開發(fā)交流(2) 10...
    葉染柒丶閱讀 5,073評論 0 7
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理烈菌,服務(wù)發(fā)現(xiàn)阵幸,斷路器花履,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法挚赊,內(nèi)部類的語法诡壁,繼承相關(guān)的語法,異常的語法荠割,線程的語...
    子非魚_t_閱讀 31,581評論 18 399
  • 一. Java基礎(chǔ)部分.................................................
    wy_sure閱讀 3,790評論 0 11