短信发送/验证

在有些场景下需要发送短信或者验证短信。

以下demo展示示例是使用的阿里云短信。

短信秘钥配置

在/config/app.php文件里配置相关参数

    /*短信验证码相关配置参数*/
    'SMS_CONFIG'=>array(
        'accessKeyId'       =>'xxx',               //AccessKey ID
        'accessKeySecret'   =>'xxx',                    //Access Key Secret
        'SignName'          =>'xxx',                   //短信签名，应严格按"签名名称"填写，请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/sign
        'TemplateCode'      =>'xxx',                  //短信模板Code，应严格按"模板CODE"填写, 请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/template
    ),

在控制器里需要引入短信类

use app\common\MobileVerify\MobileVerify;

程序代码示例

use app\common\MobileVerify\MobileVerify;
class Login extends Base{

    //发送验证码
    public function verfiyCode(){
        $code = new MobileVerify();
        $code->isTest=1;//用于测试使用，短信码始终是8888，在验证的时候直接输入8888即可，注意生产环境中要删除这行代码。
        $result=$code->send_code("15888888888");
        if($result){
            $this->success("短信发送成功");
        }else{
            $this->error($code->error);
        }
    }
    //验证
    public function checkVerfiyCode(){
            $code = new MobileVerify();
            if(!$code->check($data['mobile'],$data['verfiyCode'])){
                $this->error($code->error);
            }
            $code->clear();//清空验证码
    }

}

前端代码示例

<!DOCTYPE html>
<html>
<head>
    <title>发送短信验证码</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <input type="text" id="phone" placeholder="请输入手机号码">
    <button id="send-code">发送验证码</button>
    <script>
        $(document).ready(function() {
            var countdown = 60;
            var countdownTimer;

            $('#send-code').click(function() {
                var phone = $('#phone').val();

                // 简单的手机号码验证
                if (!/^1[3456789]\d{9}$/.test(phone)) {
                    alert('手机号码格式不正确');
                    return;
                }

                // 禁用按钮并开始倒计时
                $(this).addClass('disabled').prop('disabled', true).text(countdown + '秒后重试');
                countdownTimer = setInterval(function() {
                    countdown--;
                    $('#send-code').text(countdown + '秒后重试');
                    if (countdown === 0) {
                        clearInterval(countdownTimer);
                        $('#send-code').removeClass('disabled').prop('disabled', false).text('发送验证码');
                        countdown = 60;
                    }
                }, 1000);

                // 发送 AJAX 请求
                $.ajax({
                    url: 'https://example.com/send_sms', // 替换为你的短信接口 URL
                    type: 'POST',
                    data: { phone: phone },
                    success: function(response) {
                        // 这里可以处理发送成功后的逻辑，例如显示一个提示信息
                        console.log('短信发送成功', response);
                    },
                    error: function(error) {
                        // 这里可以处理发送失败后的逻辑，例如显示一个错误信息
                        console.error('短信发送失败', error);
                        clearInterval(countdownTimer);
                        $('#send-code').removeClass('disabled').prop('disabled', false).text('发送验证码');
                        countdown = 60;
                    }
                });
            });
        });
    </script>
</body>
</html>

短信发送/验证

短信秘钥配置

在控制器里需要引入短信类

程序代码示例

前端代码示例

快速导航