Thinkphp5使用阿里大於短信驗證

時間 2019-11-14

標籤 thinkphp5 thinkphp 使用阿里大於短信驗證欄目 PHP 简体版

原文原文鏈接

如今各類平臺登陸驗證不少時候會使用短信驗證，快捷安全，有不少平臺提供短信驗證服務，相比較而言阿里大於價格比較便宜，快捷，因此在在千鋒平常的php教學中多以此爲例來講明短信驗證的使用。下面咱們在tp5中說明如何使用阿里大於進行短信驗證。javascript

1、首先到阿里大於平臺上註冊，建立應用php

阿里大於地址爲：https://www.alidayu.com/，點擊免費入住，而後註冊，註冊完畢後，進入管理中心。以下圖所示在左邊導航欄裏選擇---應用管理，而後在右邊內容窗口裏選擇建立應用。css

在左側導航欄裏選擇應用管理----應用列表。而後在右邊窗口中選擇建立應用html

建立完畢後，能夠得到應用的appkey和appsecret，這兩個東東很重要java

而後在左側的導航欄李選擇SDK下載，在右邊窗口裏選擇php版。jquery

下載完成後解壓，獲得以下文件：ajax

在所給的這些文件裏，只要如下文件就夠了：json

咱們把這些文件放到tp5的extend目錄裏，創建一個文件夾alidayu，把全部文件放到該文件夾下。安全

而後回到阿里大於，在左側導航欄裏選擇配置管理----驗證碼，而後在右側窗口裏能夠看到兩個選擇項：配置短信簽名 和 配置短信模板session

1 首先配置短信簽名，這個是必須的，界面以下，根據本身的須要選擇，我的使用選擇第一個就行。

2.配置短信模板

選擇配置短信模板，而後添加模板：

這裏，模板內容是重點，好比說驗證碼短信通常會有一個隨機數，這個隨機數如何表示內，就用${number}這種方式表示，其中${number}就是php中對應的變量，用幾個就定義幾個，{}裏面是變量的名字。配置完成後以下圖所示：

重點是模板ID，這個在程序代碼中要用。

2、在tp5中引用

1.項目的目錄結構

要想在項目中引用extend下的alidayu下面的幾個類，必須給類添加名空間。

二、給下載的文件添加名空間。

在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;
		}	
	}

3、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>

更多實用php技術，請持續關注千鋒教學日記。