美文网首页
Laravel实现短信发送验证码注册

Laravel实现短信发送验证码注册

作者: 扁扁的汤圆 | 来源:发表于2020-03-18 20:53 被阅读0次

前端代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <title>Document</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 m-auto py-5">
            <form>
                <div class="form-group">
                    <label for="mobile">Mobile</label>
                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Please mobile"/>
                </div>
                <div class="form-group">
                    <label for="verifyCode">Verification code</label>
                    <input type="password" class="form-control" id="verifyCode" name="verify_code"
                           placeholder="Please enter verification code">
                    <input type="button" class="btn btn-outline-primary btn-sm mt-2" id="getVerifyCode" value="Get Verification Code">
                </div>
                <button type="submit" class="btn btn-primary">Register</button>
            </form>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    var timeCount = 60;

    function setTime(obj){
        if(timeCount === 0){
            obj.attr('disabled',false);
            obj.val('Get Verification Code');
            timeCount = 60;
            return;
        }else{
            obj.attr('disabled',true);
            obj.val(`Get Verification Code again(${timeCount}s)`);
            timeCount --;
        }
        setTimeout(function(){
            setTime(obj);
        }, 1000);
    }

    $('#getVerifyCode').click(function(e){
        e.preventDefault();
        var mobile = parseInt($('input[name="mobile"]').val());
        if(!mobile){
            alert('Please enter mobile.');
            return;
        }
        var url = "{{route('sendcode')}}";
        getVerifyCode(mobile, url);
        setTime($(this));
    });

    function getVerifyCode(mobile, url){
        $.ajax({
            url: url,
            method: 'post',
            data: {mobile: mobile},
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data){
                console.log(data);
            }
        })
    }
</script>
</body>
</html>

后端接口

路由:
Route::get("create", "SmsController@create")->name("create");//注册表单
Route::get("register", "SmsController@register")->name("register");//注册动作
Route::post("sendcode", "SmsController@sendcode")->name("sendcode");//发送验证码
控制器代码:
public function sendcode(Request $request){
        $mobile = $request->input('mobile');
        $request->validate([
            'mobile' => ['required', 'regex:/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199)\d{8}$/']
        ]);
        // 验证码
        $code = mt_rand(1000, 9999);
        // 将验证码 存入session中
        $request->session()->put('verify_code', $code);
        // 设置验证码有效时间
        $time = 5;
        // 发送内容
        $content = urldecode("您的验证码为{$code},在{$time}分钟内有效。");
        //发送
        $result = $this->sendMsg($mobile, $content);

        if ($result !== "0") {
            return response()->json(['code' => 0, 'msg' => '发送失败']);
        } else {
            return response()->json(['code' => 1, "msg" => "发送成功"]);
        }
    }

    protected function sendMsg($mobile, $message){
        // 短信发送接口    这是用的短信宝的接口
        $username = "********";
        $password = md5("********");
        $url = "http://api.smsbao.com/sms?u={$username}&p={$password}&m={$mobile}&c={$message}";
        // 发送请求
        $result = $this->curlRequest($url);
        Log::debug($result);
        return $result;
    }
请求函数:
// curl 发送http 请求
    private function curlRequest($url, $post='')
    {
        // 初始化
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)');

        // post请求
        if($post) {
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($post));
        }

        curl_setopt($curl, CURLOPT_HEADER, 0);
        curl_setopt($curl, CURLOPT_TIMEOUT, 10);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

        // 执行请求
        $data = curl_exec($curl);
        if(curl_exec($curl) === false) {
            return 'Curl error: ' . curl_error($curl);
        } else {
            curl_close($curl);
            return $data;
        }
    }

相关文章

网友评论

      本文标题:Laravel实现短信发送验证码注册

      本文链接:https://www.haomeiwen.com/subject/acvcyhtx.html