短信驗證碼的實現

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

在后臺比較簡單,阿里云上給你提供了完整的短信驗證碼生成的代碼,復制到你的一個類里就可以直接使用,如下圖所示:



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框架寫的,所以你在使用的時候需要搭框架,如果不搭框架也是可以的,不過相對來說較為麻煩。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容

  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,074評論 6 13
  • 《ijs》速成開發手冊3.0 官方用戶交流:iApp開發交流(1) 239547050iApp開發交流(2) 10...
    葉染柒丶閱讀 5,273評論 0 7
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,828評論 18 139
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,737評論 18 399
  • 一. Java基礎部分.................................................
    wy_sure閱讀 3,830評論 0 11