ThinkPHP5.0手把手實現手機阿里雲短信驗證

最詳細教程,沒有第二篇

爲分享經驗而來(菜鳥來圍觀,大神輕點噴)
簡述一下思路:現在有一個簡單的手機短信驗證頁面,代碼如下

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,我們需要把之前在阿里雲申請的信息填寫到這裏,具體步驟看截圖吧,跟着截圖先把這個小功能實現了,後面再把這個小功能修改成自己的東西。
設置API接口
設置發送短信
設置接受號碼
代碼搬家

看這裏:完成以上步驟加上代碼,相信看完的朋友已經心中有數了!!! 如果本文對你有一點點幫助,可以幫我點個贊嗎 你們的認可是我前進的動力

有一些朋友可能還有不懂的,可以及時聯繫我,我的郵箱[email protected],大家一起進步

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章