現在各種平台登錄驗證很多時候會使用短信驗證,快捷安全,有很多平台提供短信驗證服務,相比較而言阿里大於價格比較便宜,快捷,所以在在千鋒日常的php教學中多以此為例來說明短信驗證的使用。下面我們在tp5中說明如何使用阿里大於進行短信驗證。
一、首先到阿里大於平台上注冊,創建應用
阿里大於地址為:https://www.alidayu.com/,點擊免費入住,然后注冊,注冊完畢后,進入管理中心。如下圖所示在左邊導航欄里選擇---應用管理,然后在右邊內容窗口里選擇創建應用。
在左側導航欄里選擇應用管理----應用列表。然后在右邊窗口中選擇創建應用
創建完畢后,可以獲得應用的appkey和appsecret,這兩個東東很重要

然后在左側的導航欄李選擇SDK下載,在右邊窗口里選擇php版。
下載完成后解壓,得到如下文件:
在所給的這些文件里,只要以下文件就夠了:
我們把這些文件放到tp5的extend目錄里,建立一個文件夾alidayu,把所有文件放到該文件夾下。
然后回到阿里大於,在左側導航欄里選擇配置管理----驗證碼,然后在右側窗口里可以看到兩個選擇項:配置短信簽名 和 配置短信模板
1 首先配置短信簽名,這個是必須的,界面如下,根據自己的需要選擇,個人使用選擇第一個就行。

2.配置短信模板
選擇配置短信模板,然后添加模板:
這里,模板內容是重點,比如說驗證碼短信一般會有一個隨機數,這個隨機數如何表示內,就用${number}這種方式表示,其中${number}就是php中對應的變量,用幾個就定義幾個,{}里面是變量的名字。配置完成后如下圖所示:
重點是模板ID,這個在程序代碼中要用。
二、在tp5中引用
1.項目的目錄結構
要想在項目中引用extend下的alidayu下面的幾個類,必須給類添加名空間。
2、給下載的文件添加名空間。
在tp5中加載類使用的時自動加載,是根據名空間加載的,所以,下載的幾個類文件,必須定義名空間才能引用,名空間必須和目錄一致。
3.在控制器里引用驗證碼類
如果,編譯出現找不到TopClient類的提示,可以在application下config.php里修改:
添加一個名空間和文件夾的對照,則一切ok。
4. 編寫短信驗證碼方法
//短信驗證
public function sendSMS()
{
if (request()->isAjax()) {//如果是ajax請求
$tel = input('mobile');//手機號
$c = new TopClient;//大於客戶端
$c->format = 'json';//設置返回值得類型
$c->appkey = "23885965";//阿里大於注冊應用的key
$c->secretKey = "ccd724869075d0d740806302b664bb86";//注冊的secretkey
//請求對象,需要配置請求的參數
$req = new AlibabaAliqinFcSmsNumSendRequest;
$req->setExtend("123456");//公共回傳參數,可以不傳
$req->setSmsType("normal");//短信類型,傳入值請填寫normal
//簽名,阿里大於-控制中心-驗證碼--配置簽名 中配置的簽名,必須填
$req->setSmsFreeSignName("自己的簽名");//根據前面配置短信簽名里的前面做相應的修改
//你在短信中顯示的驗證碼,這個要保存下來用於驗證
$num = rand(100000,999999);
session('code',$num);//保存到session
//短信模板變量,傳參規則{"key":"value"},key的名字須和申請模板中的變量名一致,傳參時需傳入{"code":"1234","product":"alidayu"}
$req->setSmsParam("{\"number\":\"$num\"}");//模板參數
//短信接收的手機號碼,可以有多個,具體參照大於號幫助文檔。
$req->setRecNum($tel);
//短信模板。阿里大於-控制中心-驗證碼--配置短信模板 必須填
$req->setSmsTemplateCode("SMS_69685034");//根據前面配置模板是生成的模板ID修改
$resp = $c->execute($req);//發送請求
return $resp;
}
}
三、html文件
<!DOCTYPE html>
<html>
<head>
<title>用戶注冊</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.content{width: 360px;background: pink;}
.title{text-align: center;font-size: 18px;width:100%;height: 30px;line-height: 30px;}
.register{height: 30px;line-height: 30px;width: 60px;text-align: center;float: right;}
a{text-decoration: none;}
.middle{width: 360px;}
.headimage{width: 100%;}
.headimage p{text-align: center;}
.middle input{display: block;width: 98%;margin: 0px auto;height: 30px;}
.middle input[type='submit']{margin-top: 20px;}
.middle form .code{display: inline-block;width: 75%;height: 30px;}
.middle form button{width: 22%;height: 32px;}
</style>
<script type="text/javascript" src='/static/index/js/jquery-1.11.3.min.js'></script>
</head>
<body>
<div class='content'>
<div class='top'>
<div class='title'>注冊</div>
</div>
<div class='middle'>
<div class='headimage'>
<img src="">
<p>書非借不能讀</p>
</div>
<form action='/index/user/doLogin' method='post'>
<input type="text" name="phone" placeholder="手機號" id='mobile'>
<input type="password" name="password" placeholder="密碼">
<input type="text" name="code" class='code' placeholder="驗證碼"><button id='sendmsg'>獲取驗證碼</button>
<input type="submit" value='注冊'>
</form>
</div>
</div>
</body>
<script type="text/javascript">
//驗證手機號
$("#mobile").blur(function(){
var value = $(this).val();
console.log(value,typeof value);
if ( 0 == value.lenght || "" == value) {
//alert("手機號不能為空!")
$(this).focus();
} else {
$.post('/index/user/validPhone',{phone:value},function(data){
if (data) {
alert("手機號重復!");
}
});
}
});
var InterValObj; //timer變量,控制時間
var count = 60; //間隔函數,1秒執行
var curCount;//當前剩余秒數
var code = ""; //驗證碼
var codeLength = 6;//驗證碼長度
$('#sendmsg').click(function () {
var phone = $("#mobile").val();
console.log(phone);
$.ajax({
type: "POST",
url: "/index/user/sendSMS",
data: "mobile="+$("#mobile").val() ,
success: function (data) {
console.log(data);
//data.result && data.result.success
if(data){
curCount = count;
//設置button效果,開始計時
$("#sendmsg").css("background-color", "LightSkyBlue");
$("#sendmsg").attr("disabled", "true");
$("#sendmsg").html("獲取" + curCount + "秒");
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器,1秒執行一次
// alert("驗證碼發送成功,請查收!");
}
},
dataType: 'json'
});
return false;
})
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計時器
$("#sendmsg").removeAttr("disabled");//啟用按鈕
$("#sendmsg").css("background-color", "");
$("#sendmsg").html("重發驗證碼");
code = ""; //清除驗證碼。如果不清除,過時間后,輸入收到的驗證碼依然有效
}
else {
curCount--;
$("#sendmsg").html("獲取" + curCount + "秒");
}
}
</script>
</script>
</html>
