Thinkphp5使用阿里大于短信验证

landmark_csl 2017-06-07

php 配置 code 应用管理 class html type Mobile input

现在各种平台登录验证很多时候会使用短信验证,快捷安全,有很多平台提供短信验证服务,相比较而言阿里大于价格比较便宜,快捷,所以在在千锋日常的PHP教学中多以此为例来说明短信验证的使用。下面我们在tp5中说明如何使用阿里大于进行短信验证。

一、首先到阿里大于平台上注册,创建应用

阿里大于地址为:https://www.alidayu.com/,点击免费入住,然后注册,注册完毕后,进入管理中心。如下图所示在左边导航栏里选择---应用管理,然后在右边内容窗口里选择创建应用。

 

在左侧导航栏里选择应用管理----应用列表。然后在右边窗口中选择创建应用

创建完毕后,可以获得应用的appkeyappsecret,这两个东东很重要


然后在左侧的导航栏李选择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文件

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>用户注册</title>  
  5.     <style type="text/css">  
  6.     *{margin: 0px;padding: 0px;}  
  7.     .content{width: 360px;background: pink;}  
  8.     .title{text-align: center;font-size: 18px;width:100%;height: 30px;line-height: 30px;}  
  9.     .register{height: 30px;line-height: 30px;width: 60px;text-align: center;float: right;}  
  10.     a{text-decoration: none;}  
  11.     .middle{width: 360px;}  
  12.     .headimage{width: 100%;}  
  13.     .headimage p{text-align: center;}  
  14.     .middle input{display: block;width: 98%;margin: 0px auto;height: 30px;}  
  15.     .middle input[type='submit']{margin-top: 20px;}  
  16.     .middle form .code{display: inline-block;width: 75%;height: 30px;}  
  17.     .middle form button{width: 22%;height: 32px;}  
  18.     </style>  
  19.     <script type="text/javascript" src='/static/index/js/jquery-1.11.3.min.js'></script>  
  20. </head>  
  21. <body>  
  22.     <div class='content'>  
  23.         <div class='top'>  
  24.             <div class='title'>注册</div>  
  25.         </div>  
  26.         <div class='middle'>  
  27.             <div class='headimage'>  
  28.                 <img src="">  
  29.                 <p>书非借不能读</p>  
  30.             </div>  
  31.             <form action='/index/user/doLogin' method='post'>  
  32.                 <input type="text" name="phone" placeholder="手机号" id='mobile'>  
  33.                 <input type="password" name="password" placeholder="密码">  
  34.                 <input type="text" name="code" class='code' placeholder="验证码"><button id='sendmsg'>获取验证码</button>  
  35.                 <input type="submit" value='注册'>  
  36.             </form>  
  37.         </div>  
  38.    
  39.     </div>  
  40. </body>  
  41. <script type="text/javascript">  
  42.     //验证手机号  
  43.     $("#mobile").blur(function(){  
  44.         var value = $(this).val();  
  45.         console.log(value,typeof value);  
  46.         if ( 0 == value.lenght || "" == value) {  
  47.             //alert("手机号不能为空!")  
  48.             $(this).focus();  
  49.         } else {  
  50.             $.post('/index/user/validPhone',{phone:value},function(data){  
  51.                 if (data) {  
  52.                     alert("手机号重复!");  
  53.                 }  
  54.             });  
  55.         }  
  56.            
  57.     });  
  58.    
  59.     var InterValObj; //timer变量,控制时间  
  60.     var count = 60; //间隔函数,1秒执行  
  61.     var curCount;//当前剩余秒数  
  62.     var code = ""; //验证码  
  63.     var codeLength = 6;//验证码长度  
  64.    
  65.     $('#sendmsg').click(function () {  
  66.         var phone = $("#mobile").val();  
  67.         console.log(phone);  
  68.         $.ajax({  
  69.             type: "POST",  
  70.             url: "/index/user/sendSMS",  
  71.             data: "mobile="+$("#mobile").val() ,  
  72.             success: function (data) {  
  73.                 console.log(data);  
  74.                     //data.result && data.result.success  
  75.                     if(data){  
  76.                         curCount = count;  
  77.                        //设置button效果,开始计时  
  78.                        $("#sendmsg").css("background-color", "LightSkyBlue");  
  79.                        $("#sendmsg").attr("disabled", "true");  
  80.                        $("#sendmsg").html("获取" + curCount + "秒");  
  81.                        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次  
  82.                       // alert("验证码发送成功,请查收!");  
  83.                   }  
  84.               },  
  85.               dataType: 'json'  
  86.           });  
  87.         return false;  
  88.     })  
  89.    
  90.     function SetRemainTime() {  
  91.         if (curCount == 0) {  
  92.             window.clearInterval(InterValObj);//停止计时器  
  93.             $("#sendmsg").removeAttr("disabled");//启用按钮  
  94.             $("#sendmsg").css("background-color", "");  
  95.             $("#sendmsg").html("重发验证码");  
  96.             code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效  
  97.         }  
  98.         else {  
  99.             curCount--;  
  100.             $("#sendmsg").html("获取" + curCount + "秒");  
  101.         }  
  102.     }  
  103. </script>  
  104. </script>  
  105. </html>  


更多实用php技术,请持续关注千锋教学日记。
登录 后评论
下一篇
corcosa
12844人浏览
2019-10-08
相关推荐
阿里大于发送短信(java)
628人浏览
2017-05-22 22:20:00
Java 实现阿里云短信
850人浏览
2018-09-20 15:28:08
tp5 发送阿里云短信
2448人浏览
2018-10-22 14:21:56
阿里云短信接口说明
1080人浏览
2017-11-16 21:45:00
0
1
0
3271