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"></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"></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 = ""; //短信平台帐号

        $pass = md5(""); //短信平台密码

        $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 手机号验证码登陆的更多相关文章

JavaWeb-SpringSecurity使用短信验证码登陆
相关博文 JavaWeb-SpringBoot_一个类实现腾讯云SDK发送短信传送门系列博文项目已上传至guthub 传送门 JavaWeb-SpringSecurity初认识传送门 Java ...
SpringSceurity(5)---短信验证码登陆功能
SpringSceurity(5)---短信验证码登陆功能有关SpringSceurity系列之前有写文章 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSecur ...
vue开发东京买菜,全栈项目,前端django,带手机GPS精准定位,带发票系统,带快递系统,带微信/支付宝/花呗/银行卡支付/带手机号一键登陆,等等
因为博客园不能发视频,所以,完整的视频,开发文档,源码,请向博主索取完整视频+开发文档+源码,duanshuiLu.com下载 vue+django手机购物商城APP,带支付,带GPS精准定位用户, ...
django开发东京买菜,全栈项目,前端vue,带手机GPS精准定位,带发票系统,带快递系统,带微信/支付宝/花呗/银行卡支付/带手机号一键登陆,等等
因为博客园不能发视频,所以,完整的视频,开发文档,源码,请向博主索取完整视频+开发文档+源码,duanshuiLu.com下载 vue+django手机购物商城APP,带支付,带GPS精准定位用户, ...
web自动化测试中绕开验证码登陆的方式
web自动化测试中登陆需验证码是很大的一个困扰.现推荐一种简单的避开验证码登陆的方式,先代码进入登录页,人工输入验证码登录后浏览器自动保存cookie,再在新的标签中登录. 具体代码如下: publi ...
Web UI自动化测试中绕开验证码登陆方式浅谈
web自动化测试中让测试者感到困惑的是登陆验证码,每次都不一样.现在推荐一种绕开验证码登陆的方式,其实就是将web浏览器获取的登陆cookie加载到程序中就可以了,这样程序就会认为你已经登陆,就可以跳 ...
通过cookies跳过验证码登陆页面，直接访问网站的其它URL
我每次手动访问去NN网的一家酒店,就不需要登陆,一旦我用脚本打开就会让我登陆,而登陆页面又有验证码,不想识别验证码,所以就想:“通过cookies跳过验证码登陆页面,直接访问网站的其它URL” 转 ...
Spring Cloud OAuth2（二）扩展登陆方式：账户密码登陆、手机验证码登陆、二维码扫码登陆
概要基于上文讲解的spring cloud 授权服务的搭建,本文扩展了spring security 的登陆方式,增加手机验证码登陆.二维码登陆. 主要实现方式为使用自定义filter. Authe ...
微信小程序+laravel 7+ Redis +短信宝实现手机号验证码登录
以下代码可以进行优化和封装:这里我实现功能为主,就不封装啦.小伙伴可以自己试着封装一下. 1:书写登录表单 <view class="container"> <v ...

随机推荐

SQL 中进行递归
很多时候,我们做Tree的时候会用到递归.但是一般都是从数据库中拿到数据然后再程序中进行递归.昨天一个巧合,一位同事给我看了数据库中的递归,乍一看还不太明白. 表结构是这样的 CREATE TABLE ...
ARC084F - XorShift
有两种解法,这里都放一下. 解法一首先易知异或运算可以视作是 \(\mathbb{F}_2\) 意义下的每一位独立的加法. 因此我们可以考虑对于每个二进制数 \(s\) 构造一个多项式 \(F(x) ...
Idea 如何不通过模板创建支持Maven的JavaWeb项目
手动与模板创建的区别,请自行体会. 1. 点击创建项目 2. 不勾选骨架 3.填写项目名称以及该Maven项目坐标(groupid.artifactid.version). 在仓库中,以坐标确定项目. ...
C++ XML解析之TinyXML
转载请注明来源:https://www.cnblogs.com/hookjc/ 使用TinyXML进行C++ XML解析,感觉使用起来比较简单,很容易上手,本文给出一个使用TinyXML进行XML解析 ...
一个label 混搭不同颜色,不同字体的文字.. by 徐
效果如图箭头所示,只需要一个label就可以做到不同颜色或不同字体的效果 1 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, ...
Java--面向对象设计
[转载自本科老师上课课件] 问题一: 在一个软件的功能模块中,需要一种图像处理的功能.该图像处理的策略(如何处理)与图像的内容是相关的.如:卫星的运行图片,使用策略A处理方式,如果是卫星内云图片,则需 ...
计算机网络模型与5G协议
计算机网络模型与5G协议目录计算机网络模型与5G协议一.分层思想 1.什么是分层思想 2.分层思想的优势二.osi七层参考模型 1.国际标准化组织(ios) 2.七层模型及对应功能和硬件 3. ...
Jest_JavaScript测试框架
Jest是一个JavaScript测试框架,由Facebook用来测试所有JavaScript代码,包括React应用程序. 不同级别的自动化测试:单元.集成.组件和功能. 单元测试可以看作是和在组件 ...
python篇第10天【For 循环语句】
实例 #!/usr/bin/python # -*- coding: UTF-8 -*- for a in 'Henry': print "This is ", a fru ...
Spring系列11：@ComponentScan批量注册bean
回顾在前面的章节,我们介绍了@Comfiguration和@Bean结合AnnotationConfigApplicationContext零xml配置文件使用Spring容器的方式,也介绍了通过& ...

laravel7 手机号验证码登陆

laravel7 手机号验证码登陆的更多相关文章

随机推荐

热门专题