天天看點

Thinkphp5使用阿裡大于短信驗證

一、首先到阿裡大于平台上注冊,建立應用

阿裡大于位址為:https://www.alidayu.com/,點選免費入住,然後注冊,注冊完畢後,進入管理中心。如下圖所示在左邊導航欄裡選擇---應用管理,然後在右邊内容視窗裡選擇建立應用。

Thinkphp5使用阿裡大于短信驗證

在左側導航欄裡選擇應用管理----應用清單。然後在右邊視窗中選擇建立應用

Thinkphp5使用阿裡大于短信驗證

建立完畢後,可以獲得應用的appkey和appsecret,這兩個東東很重要

Thinkphp5使用阿裡大于短信驗證

然後在左側的導航欄李選擇sdk下載下傳,在右邊視窗裡選擇php版。

Thinkphp5使用阿裡大于短信驗證

下載下傳完成後解壓,得到如下檔案:

Thinkphp5使用阿裡大于短信驗證

在所給的這些檔案裡,隻要以下檔案就夠了:

Thinkphp5使用阿裡大于短信驗證

我們把這些檔案放到tp5的extend目錄裡,建立一個檔案夾alidayu,把所有檔案放到該檔案夾下。

然後回到阿裡大于,在左側導航欄裡選擇配置管理----驗證碼,然後在右側視窗裡可以看到兩個選擇項:配置短信簽名 和 配置短信模闆

Thinkphp5使用阿裡大于短信驗證

1 首先配置短信簽名,這個是必須的,界面如下,根據自己的需要選擇,個人使用選擇第一個就行。

Thinkphp5使用阿裡大于短信驗證

2.配置短信模闆

選擇配置短信模闆,然後添加模闆:

Thinkphp5使用阿裡大于短信驗證

這裡,模闆内容是重點,比如說驗證碼短信一般會有一個随機數,這個随機數如何表示内,就用${number}這種方式表示,其中${number}就是php中對應的變量,用幾個就定義幾個,{}裡面是變量的名字。配置完成後如下圖所示。

Thinkphp5使用阿裡大于短信驗證

重點是模闆id,這個在程式代碼中要用。

二、在tp5中引用

1.項目的目錄結構

Thinkphp5使用阿裡大于短信驗證

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

2、給下載下傳的檔案添加名空間。

在tp5中加載類使用的時自動加載,是根據名空間加載的,是以,下載下傳的幾個類檔案,必須定義名空間才能引用,名空間必須和目錄一緻。以alibabaaliqinfcsmsnumsendrequest.php為例說明:

Thinkphp5使用阿裡大于短信驗證

3.在控制器裡引用驗證碼類

Thinkphp5使用阿裡大于短信驗證

如果,編譯出現找不到topclient類的提示,可以在application下config.php裡修改:

Thinkphp5使用阿裡大于短信驗證

添加一個名空間和檔案夾的對照,則一切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技術,請持續關注千鋒教學日記。