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=" 登 录 ">
<input name="" type="reset" class="btn btn-default radius size-L"
value=" 取 消 ">
</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'; }
效果图：
浙公网安备 33010602011771号