ThinkPHP5.0手把手实现手机阿里云短信验证

妖狐艹你老母 2022-05-15 10:44 464阅读 0赞

## 转载自：[https://blog.csdn.net/weixin\_40560205/article/details/81161207][https_blog.csdn.net_weixin_40560205_article_details_81161207] ##

## 最详细教程，没有第二篇 ##

**为分享经验而来(菜鸟来围观，大神轻点喷)**   
简述一下思路：现在有一个简单的手机短信验证页面，代码如下

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接口][API]  
![设置发送短信][70]  
![设置接受号码][70 1]   
![代码搬家][70 2]

--------------------

> **看这里：**完成以上步骤加上代码，相信看完的朋友已经心中有数了!!! **如果本文对你有一点点帮助，可以帮我点个赞吗 你们的认可是我前进的动力**。

有一些朋友可能还有不懂的，可以及时联系我，我的邮箱[1279728601@qq.com][1279728601_qq.com]，大家一起进步

[https_blog.csdn.net_weixin_40560205_article_details_81161207]: https://blog.csdn.net/weixin_40560205/article/details/81161207
[www.aliyun.com]: https://www.aliyun.com/
[API]: /images/20220515/170badaa7a74451c935977613877cc52.png
[70]: /images/20220515/86d9c5f94cca4695ba327ffe0cb86406.png
[70 1]: /images/20220515/caffd509609145d1a7909d8126a64199.png
[70 2]: /images/20220515/df225d3d9683464391492280e4c9016f.png
[1279728601_qq.com]: mailto:1279728601@qq.com