laravel7 手机号验证码登陆

2021/11/22 6:09:50

编程Tag： Code function 验证码 return 手机号 test phone laravel7

本文主要是介绍laravel7 手机号验证码登陆，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1”设置路由：

//展示手机登录页面
Route::get('admin','admin\AdminController@admin');

2：html页面

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link href="/static/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css"/>
    <link href="/static/static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>后台登录 - H-ui.admin v3.1</title>
    <meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
    <meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value=""/>
<div class="header"></div>
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <form class="form form-horizontal">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="phone" name="" type="text" value="18303550213" class="input-text size-L"
                           style="width: 200px">
                    <button type="button" class="btn btn-primary" style="width: 50px" id="dyMobileButton">发送</button>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="test_code" name="" type="password" value="3898" placeholder="验证码"
                           class="input-text size-L" style="width: 200px">
                </div>
            </div>


            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input name="" id="phoneLogin" type="button" class="btn btn-success radius size-L"
                           value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    <input name="" type="reset" class="btn btn-default radius size-L"
                           value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                </div>
            </div>
        </form>
    </div>
</div>
>
<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/static/h-ui/js/H-ui.min.js"></script>
<!--此乃百度统计代码，请自行删除-->
<script>
    $('#dyMobileButton').click(function () {
        var _token = "{{csrf_token()}}";
        var phone = $('#phone').val();
        if (phone == '') {
            alert('手机号不能为空');
            return false;
        } else if (!/^1[3-9]\d{9}$/.test(phone)) {
            alert('手机号规则不正确');
            return false;
        }
        //短信发送限制
        var time = 60;
        setInterval(function () {
            time--;
            if (time > 0) {
                //开始倒计时
                $('#dyMobileButton').html('重新发送，还剩：' + time + '秒');
                $('#dyMobileButton').prop('disabled', true);
            } else {
                //结束倒计时
                $('#dyMobileButton').html('发送验证码');
                $('#dyMobileButton').prop('disabled', false);
            }
        }, 1000);

        //请求短信接口
        $.ajax({
            'url': '{{url('sendMsg')}}',
            'type': 'POST',
            'data': {
                _token: _token,
                sendPhone: phone
            },
            'datatype': 'json',
            'success': function (res) {
                console.log(res);
                return;
            },
            'error': function (error) {
                console.log(error);
                return false;
            },
        });
    });
    //点击登录按钮触发Ajax
    $('#phoneLogin').click(function () {
        var test_code = $('#test_code').val();
        var _token = "{{csrf_token()}}";
        var phone = $('#phone').val();
        if (test_code == '') {
            alert('验证码为填');
            return false;
        }
        if (phone == '') {
            alert('手机号为未填');
            return false;
        }
        //请求短信接口
        $.ajax({
            'url': '{{url('phonelogin')}}',
            'type': 'POST',
            'data': {
                _token: _token,
                sendPhone: phone,
                test_code: test_code
            },
            'datatype': 'json',
            'success': function (res) {
                console.log(res);
                if (res.code == 500) {
                    alert('验证码错误，请重新填写')
                }
                if (res.code == 200) {
                    alert('登录成功')
                    window.location.href = "{{url('index')}}"
                }

            },
            'error': function (error) {
                console.log(error);
                return false;
            },
        });


    })


</script>
<!--/此乃百度统计代码，请自行删除
</body>
</html>

3：设置路由，后端验证

//手机验证码
Route::post('sendMsg','admin\AdminController@sendMsg');
//手机号登录
Route::post('phonelogin','admin\AdminController@phoneLogin');

4：控制器代码

    public function sendMsg(Request $request)
    {
//接受发送的手机号
        $postsendPhone = $request->post('sendPhone');
//        数据库验证，如果没有手机号，先进行注册
        $test_phone = User::where('phone', $postsendPhone)->first();
        if ($test_phone == false) {
            return ['code' => 500, 'meg' => '数据库没有这个手机号', 'data' => ''];
        }
        $statusStr = array(
            "0" => "短信发送成功",
            "-1" => "参数不全",
            "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
            "30" => "密码错误",
            "40" => "账号不存在",
            "41" => "余额不足",
            "42" => "帐户已过期",
            "43" => "IP地址限制",
            "50" => "内容含有敏感词"
        );
//        手机号发送验证码
        $smsapi = "http://api.smsbao.com/";
        $user = "yanbing"; //短信平台帐号
        $pass = md5("bin18303550213"); //短信平台密码
        $code = rand('1000', '9999');
        $content = "【百味园】您的验证码是$code,30秒内有效.若非本人操作请忽略此消息。";//要发送的短信内容
        $phone = $postsendPhone;//要发送短信的手机号码
        $sendurl = $smsapi . "sms?u=" . $user . "&p=" . $pass . "&m=" . $phone . "&c=" . urlencode($content);
        $result = file_get_contents($sendurl);
//        将验证码储在缓冲，设置过期时间为一分钟
        cache([$phone => $code],1);
        cache([$phone.'time'=>time()]);
        return ['code' => 200, 'meg' => $statusStr[$result], 'data' => ''];

    }
//登录触发
    public function phoneLogin(Request $request)
    {
        $login=$request->post();
//        接受验证码
        $test_code=$login['test_code'];
//        取出储的验证码
        $redisCode= cache($login['sendPhone']);
       // return ['code' => 200, 'meg' => 'ok', 'data' => $redisCode];
//        进行对比
        if ($test_code!=$redisCode){
//返回前台
            return ['code' => 500, 'meg' => '验证码错误', 'data' => ''];
        }
//        验证成功，返回前台
         return ['code' => 200, 'meg' => 'ok', 'data' => ''];
    }

5：模型验证数据库有没有手机号

<?php

namespace App\models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    //
    protected $table='user';


}

效果图：

这篇关于laravel7 手机号验证码登陆的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

laravel7 手机号验证码登陆

相关编程文章