一、首先到阿裡大于平台上注冊,建立應用
阿裡大于位址為:https://www.alidayu.com/,點選免費入住,然後注冊,注冊完畢後,進入管理中心。如下圖所示在左邊導航欄裡選擇---應用管理,然後在右邊内容視窗裡選擇建立應用。
在左側導航欄裡選擇應用管理----應用清單。然後在右邊視窗中選擇建立應用
建立完畢後,可以獲得應用的appkey和appsecret,這兩個東東很重要
然後在左側的導航欄李選擇sdk下載下傳,在右邊視窗裡選擇php版。
下載下傳完成後解壓,得到如下檔案:
在所給的這些檔案裡,隻要以下檔案就夠了:
我們把這些檔案放到tp5的extend目錄裡,建立一個檔案夾alidayu,把所有檔案放到該檔案夾下。
然後回到阿裡大于,在左側導航欄裡選擇配置管理----驗證碼,然後在右側視窗裡可以看到兩個選擇項:配置短信簽名 和 配置短信模闆
1 首先配置短信簽名,這個是必須的,界面如下,根據自己的需要選擇,個人使用選擇第一個就行。
2.配置短信模闆
選擇配置短信模闆,然後添加模闆:
這裡,模闆内容是重點,比如說驗證碼短信一般會有一個随機數,這個随機數如何表示内,就用${number}這種方式表示,其中${number}就是php中對應的變量,用幾個就定義幾個,{}裡面是變量的名字。配置完成後如下圖所示。
重點是模闆id,這個在程式代碼中要用。
二、在tp5中引用
1.項目的目錄結構
要想在項目中引用extend下的alidayu下面的幾個類,必須給類添加名空間。
2、給下載下傳的檔案添加名空間。
在tp5中加載類使用的時自動加載,是根據名空間加載的,是以,下載下傳的幾個類檔案,必須定義名空間才能引用,名空間必須和目錄一緻。以alibabaaliqinfcsmsnumsendrequest.php為例說明:
3.在控制器裡引用驗證碼類
如果,編譯出現找不到topclient類的提示,可以在application下config.php裡修改:
添加一個名空間和檔案夾的對照,則一切ok。
4. 編寫短信驗證碼方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//短信驗證
public function sendsms()
{
if (request()->isajax()) {//如果是ajax請求
$tel = input('mobile');//手機号
$c = new topclient;//大于用戶端
$c->format = 'json';//設定傳回值得類型
$c->appkey = "23885965";//阿裡大于注冊時給的應用appkey
$c->secretkey = "ccd724869075d0d740806302b664bb86";//注冊的app secretkey,修改成自己的
//請求對象,需要配置請求的參數
$req = new alibabaaliqinfcsmsnumsendrequest;
$req->setextend("123456");//公共回傳參數,可以不傳
$req->setsmstype("normal");//短信類型,傳入值請填寫normal
//簽名,阿裡大于-控制中心-驗證碼--配置簽名 中配置的簽名,必須填
$req->setsmsfreesignname("自己的簽名");//根據前面配置短信簽名裡的前面做相應的修改
//你在短信中顯示的驗證碼,這個要儲存下來用于驗證
$num = rand(100000,999999);<br>
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>
</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>
</html>
更多實用php技術,請持續關注千鋒教學日記。