最詳細教程,沒有第二篇
爲分享經驗而來(菜鳥來圍觀,大神輕點噴)
簡述一下思路:現在有一個簡單的手機短信驗證頁面,代碼如下
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ThinkPHP5.0短信驗證</title>
<script src="__STATIC__/jquery.js"></script>
</head>
<body>
<form>
<div>
<div>
<input id="tel" type="text" placeholder="手機號"><br>
<input id="yzm" type="text" placeholder="驗證碼"><input type="button" id="sendmsg" value="獲取驗證碼">
</div>
<div>
<a href="#" id="submit">驗證</a>
</div>
</div>
</form>
</body>
</html>
<script >
/*-------------------------------------------*/
var InterValObj; //timer變量,控制時間
var count = 60; //間隔函數,1秒執行
var curCount;//當前剩餘秒數
var code = ""; //驗證碼
var codeLength = 6;//驗證碼長度
$(function () {
$('#sendmsg').click(function () {
var tel = $('#tel').val();
$.ajax({
type: "POST",
url: "{:url('index/send_dx')}",
data: {tel:tel},
success: function (result) {
if(result == 1){
curCount = count;
//設置button效果,開始計時
$("#sendmsg").css("background-color", "");
$("#sendmsg").attr("disabled", "true");
$("#sendmsg").val("獲取" + curCount + "秒");
InterValObj = window.setInterval(SetRemainTime, 1000); //啓動計時器,1秒執行一次
// alert("驗證碼發送成功,請查收!");
}else{
alert(result);
}
},
dataType: 'json'
});
});
$('#submit').click(function(){
var yzm = $('#yzm').val();
$.ajax({
url:"{:url('index/check_dx')}",
data:{yzm:yzm},
type:"post",
dataType:"json",
success:function(data){
if(data == 1)
{
alert("驗證成功");
}else{
alert(data);
}
}
});
});
});
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計時器
$("#sendmsg").removeAttr("disabled");//啓用按鈕
$("#sendmsg").css("background-color", "");
$("#sendmsg").val("重發驗證碼");
code = ""; //清除驗證碼。如果不清除,過時間後,輸入收到的驗證碼依然有效
}
else {
curCount--;
$("#sendmsg").val("獲取" + curCount + "秒");
}
}
</script>
控制器代碼
<?php
namespace app\index\controller;
use think\Controller;
use think\Loader;
class Index extends Controller
{
public function index()
{
return $this->fetch();
}
public function send_dx()
{
// 加載extend文件夾裏面的文件
Loader::import('dx.api_demo.SmsDemo',EXTEND_PATH);
$tel = input('post.tel');
$code = rand(100000,999999);
// 調用示例:
set_time_limit(0);
header('Content-Type: text/plain; charset=utf-8');
$response = (new \SmsDemo)::sendSms($tel,$code);
$response = (new \SmsDemo)::sendBatchSms();
$response = (new \SmsDemo)::querySendDetails($tel);
// 保存驗證碼
session('code',$code);
return 1;
}
public function check_dx()
{
$yzm = input('post.yzm');
if($yzm == session('code'))
{
session('code',null);
return 1;
}
return "驗證碼錯誤";
}
}
當我們點擊獲取驗證碼
時,我們填的手機會收到一條短信,並且我輸入手機發來的驗證碼正確輸入到驗證碼輸入框後點擊驗證
,就跳轉到了我們想要的頁面。
思路理清了就開始我們的教學步驟吧
- 1、登錄到www.aliyun.com首頁,右上角導航找到
控制檯
點擊進入。 - 2、在控制檯首頁左上角導航找到
產品與服務
二級導航再找到雲通信
欄目下的短信服務
點擊進入。 - 3、在短信服務控制檯頁面左側找到
應用開發
完成應用開發欄目下的接口調用,簽名管理,模板管理
三步操作,我們的任務就完成了一半了。 - (1)接口調用:獲取AK,點擊
AccessKey
按鈕,如果沒有創建過訪問密鑰(AK),點擊創建AccessKey
,驗證後就可以了。 - (2)添加簽名:我們還需要添加一個簽名作爲發出短信的標題,一般個人用戶使用自己的真實姓名、網站名通過率較高,申請說明:可以使用固定句子
手機驗證碼或短信驗證
,當然可以使用其他申請理由,申請後等待小小會兒,在等待過程可以先完成模板管理
。 -
(3)模板管理:模板類型看個人需求,我們這裏選
驗證碼
;模板名稱可以隨便起,它的作用只是方便用戶管理自己的模板;模板內容可以點擊常用模板庫
選擇自己想要的模板,也可以自己定義;申請理由同上一步,使用固定句子就可以了。 - 4、 回到短信服務控制檯頁面在右邊頭像下面
?申請短信模板
選擇SDK及DEMO下載
,進入下載頁面後找到並點擊下載
標題下的【PHP
】藍色字樣,將下載的壓縮包解壓這裏我們取名爲“dx”,後面纔是重頭戲。 - 5、 把解壓好的文件夾(dx)放在ThinkPHP項目根目錄下的
extend
目錄下,開始操作dx文件夾裏面的文件。 - 6、 用sublime打開dx,修改dx/api_demo/
SmsDemo.php
,我們需要把之前在阿里雲申請的信息填寫到這裏,具體步驟看截圖吧,跟着截圖先把這個小功能實現了,後面再把這個小功能修改成自己的東西。 -
看這裏:完成以上步驟加上代碼,相信看完的朋友已經心中有數了!!! 如果本文對你有一點點幫助,可以幫我點個贊嗎 你們的認可是我前進的動力。
有一些朋友可能還有不懂的,可以及時聯繫我,我的郵箱[email protected],大家一起進步