联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
阿里云短信验证码接入写法
类型:迅睿CMS 更新时间:2024-04-19 14:41:09

阿里云短信验证码接入写法

  1. imageimage这个文件夹全部放进去

                       <li>
                            <div class="layui-form-item">
                                <label style="padding: 9px 0;" class="layui-form-label"><span>*</span> 联系电话:</label>
                                <div class="layui-input-block">
                                	<div style="display: flex;margin-bottom:10px">
                                    <input type="text" name="data[lxfs]" id="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入联系方式" class="layui-input">
                                    <input style="border-radius: 30px;" id="btnSendCode1" type="button" class="layui-btn layui-btn-normal" value="获取验证码" onClick="sendMessage1()" />
                                    </div>
                                    <input style="margin-left: 10px;width: 215px;" type="text" name="yzm" id="yzm" lay-verify="required|yzm" autocomplete="off" placeholder="验证码" class="layui-input">
                                </div>
                            </div>
                        </li>

5.js部分代码

<script>
    var count = 60; //间隔函数,1秒执行
    var InterValObj1; //timer变量,控制时间
    var curCount1;//当前剩余秒数
    var yzm = '';
    /*第一*/
    function sendMessage1() {
        curCount1 = count;
        var phone = $.trim($('#phone').val());
        //设置button效果,开始计时
        $("#btnSendCode1").attr("disabled", "true");
        $("#btnSendCode1").val( + curCount1 + "s");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器,1秒执行一次
        var info = '';
        $.ajax({
            url: '{dr_url("special/send/index")}',//这里是你自己写的请求api的方法。里面是阿里云获取短信的方式
            type: 'POST',
            data: {
                phone: phone//手机号
            },
            success: function (data) {
                info = JSON.parse(data);
                console.log(info,'info');
                console.log(data,'data');
                if (info.code == 1){
                    layer.msg('验证码发送成功!');
                    yzm = info.yzm;
                }
                if (info.code == 0){
                    layer.msg(info.msg);
                }
            }
        });
    }
    function SetRemainTime1() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj1);//停止计时器
            $("#btnSendCode1").removeAttr("disabled");//启用按钮
            $("#btnSendCode1").val("重新发送");
        }
        else {
            curCount1--;
            $("#btnSendCode1").val( + curCount1 + "s");
        }
    }
    </script>

6.php部分代码,这里就需要把你下载的sdk解压放到你的网站目录里面,我这里是放到根目录下面,php里面的代码需要修改的,都以汉字进行描述,其他的不需要修改,如需要进行后台验证,可以把验证码存入session,然后在session中进行验证

<?php
/**
 * 二次开发时可以修改本文件,不影响升级覆盖
 */
require 'Vendor/autoload.php';//入口文件
use AlibabaCloud\Client\AlibabaCloud;//引用的类
use AlibabaCloud\Client\Exception\ClientException;
use AlibabaCloud\Client\Exception\ServerException;

class Send extends \Poscms\Home\Module {
    private function isphone($phone){
        if (!is_numeric($phone)) {
            return false;
        }
        return preg_match('#^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$#', $phone) ? true : false;
    }

    public function index() {
        $phone =  $this->input->post('phone');
        $code = rand('111111','999999');//生成6位验证码
        $TemplateParam = json_encode(['code'=>$code]);
        if (!$this->isphone($phone)){//这里是用来判断你输入的手机号格式是否正确
            echo json_encode(['code'=>0,'msg'=>'手机号码错误']);
            return false;
        }
        AlibabaCloud::accessKeyClient('这里是你申请是accessid', '这里是你申请的accesskey')
            ->regionId('cn-hangzhou')
            ->asDefaultClient();

        try {
                $result = AlibabaCloud::rpc()
                ->product('Dysmsapi')
                // ->scheme('https') // https | http
                ->version('2017-05-25')
                ->action('SendSms')
                ->method('POST')
                ->host('dysmsapi.aliyuncs.com')
                ->options([
                    'query' => [
                        'RegionId' => "cn-hangzhou",
                        'PhoneNumbers' => $phone,//这里是前台输入的手机号
                        'SignName' => '这里是你申请的签名',
                        'TemplateCode' => '这里是你创建的模版id',
                        'TemplateParam' => $TemplateParam,这里是其他的参数,就是你发送的验证码
                    ],
                ])
                ->request();
            $array = $result->toArray();
            if ($array['Code'] == 'OK'){
                echo json_encode(['code' => 1,'yzm' => $code]);
            }else{
                echo json_encode(['code' => 0,'msg' => '验证码发送失败!请重新获取!']);
            }
        } catch (ClientException $e) {
            echo $e->getErrorMessage() . PHP_EOL;
        } catch (ServerException $e) {
            echo $e->getErrorMessage() . PHP_EOL;
        }
    }
}



回帖
  • 琉惗
    #1楼    琉惗
    2020-03-15 09:44:42
    Chrome 0
    1. 在阿里云短信服务内够买短信,并创建模版以及短信签名,具体流程请查看阿里云手册
    2.在阿里云短信服务内够买短信,并创建模版以及短信签名,具体流程请查看阿里云手册 3.在短信控制台->概览中点击accesskey,申请key以及id,使用子账户去创建,这样比较安全,具体操作方法,参考https://help.aliyun.com/document_detail/154750.html?spm=5176.12207334.0.0.58201cbeJSzwdo 4.下载阿里云sdk,可使用comporse安装,也可以直接下载我提供的安装包 https://help.aliyun.com/document_detail/53111.html?spm=a2c1g.8271268.10000.121.772fdf2567QDiv,我下载好的安装包在文末需要的可以自己下载,个人建议使用comporse安装,当然我下载的也是一样哈。 5.开始写代码(PS所有代码都有,基本不需要你进行修改,只需要修改js,ajax请求的发送验证码的接口以及修改方法里面阿里云对应申请的参数) 前台html部分,我这里使用了layui的样式以及验证方法,如果需要自行去网下载包,然后放到static目录下面,把layui.js跟layui.css引用进去就可以了
  • 琉惗
    #2楼    琉惗
    2020-03-15 09:45:34
    Chrome 0
    由于一部分发送不出去现在补上,文件也可以在这里下载,最好是用comporse安装



    vendor

  • gzfan
    #3楼    gzfan
    2020-03-15 11:19:09
    Chrome 1
    看看,学习学习
  • PHP学生
    #4楼    PHP学生
    2021-04-13 21:49:47
    Chrome 0
    学习学习
  • 常在河边走
    #5楼    常在河边走
    2023-04-19 14:46:19
    Chrome 0
    看看大佬是什么弄的
  • 如果你唱歌
    #6楼    如果你唱歌
    2023-05-31 18:46:38
    Edge 0
    看看怎么样
  • 天宗
    #7楼    天宗
    2023-06-01 14:06:10
    小米手机 0
    感谢分享,楼主长命百岁
  • 奶白的雪子
    #8楼    奶白的雪子
    2023-07-11 18:20:33
    Chrome 0
    感谢分享,楼主长命百岁
  • 零零云
    #9楼    零零云
    2023-07-15 11:21:06
    Edge 0
    感谢分享,楼主长命百岁
  • 讯睿cms铁粉
    #10楼    讯睿cms铁粉
    2023-08-15 08:35:23
    Chrome 0
    😀 看一看 看一看
  • 多一边
    #11楼    多一边
    2023-10-21 20:44:21
    Chrome 0
    来看看怎么样使用
  • 兆午浪
    #12楼    兆午浪
    2023-12-10 03:23:11
    Chrome 0
    看看大佬是什么弄的
  • leo13247
    #13楼    leo13247
    2024-04-19 14:41:09
    Firefox 124.0 0
    感谢分享,楼主长命百岁