1、在laravel中安装SDK。
composer require alibabacloud/client
2、在config目录下创建sms配置文件,用于设置 AccessKeyID、AccessKeySecret等数据。
<?php
return [
'AccessKeyID' => env('AccessKeyID','你的AccessKeyID'),
'AccessKeySecret'=>env('AccessKeySecret','你的AccessKeySecret'),
'TemplateCode'=>env('TemplateCode','你的TemplateCode'),
'SignName'=>env('SignName','你的SignName'),
];
注:此处的TemplateCode、SignName必须在阿里云上的短信服务中通过审核后,才能使用,否则无效。
3、 编写逻辑类文件,我这里是在app/Service目录下创建的,这里没要求,只要命名空间正确就行,具体代码如下:
<?php
namespace App\Service;
use AlibabaCloud\Client\AlibabaCloud;
use AlibabaCloud\Client\Exception\ClientException;
use AlibabaCloud\Client\Exception\ServerException;
use Illuminate\Support\Facades\Log;
/**
* Class AliSmsService
* @package App\Service
*/
class SmsService
{
/***
* @throws ClientException
* 发送阿里云国内短信
* @params $to 发送到哪个手机号
* @params $code 发送的验证码
*/
public static function sendSms($code,$to){
//初始化配置
AlibabaCloud::accessKeyClient(config('sms.AccessKeyID'), config('sms.AccessKeySecret'))
->regionId('cn-hangzhou')
->asDefaultClient();
try {
AlibabaCloud::rpc()
->product('Dysmsapi')
// ->scheme('https') // https | http
->version('2017-05-25')
->action('SendSms')
->method('POST')
->options([
'query' => [
//手机号
'PhoneNumbers' => $to,
'TemplateCode' => config('sms.TemplateCode'),
'SignName' => config('sms.SignName'),
//验证码
'TemplateParam' => json_encode(['code'=>$code]),
],
])
->request();
return true;
} catch (ClientException $e) {
Log::error($e->getErrorMessage() . PHP_EOL);
return false;
} catch (ServerException $e) {
Log::error($e->getErrorMessage() . PHP_EOL);
return false;
}
}
}
4、编写前端(我这是一个登录的例子 ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xxx系统</title>
<link href="{{asset('static/css/bootstrap.min.css')}}" rel="stylesheet">
<link href="{{asset('static/font-awesome/css/font-awesome.css')}}" rel="stylesheet">
<link href="{{asset('static/css/animate.css')}}" rel="stylesheet">
<link href="{{asset('static/css/style.css')}}" rel="stylesheet">
</head>
<style>
body{
background-image: url("{{asset('static/img/bg.jpg')}}") ;
background-size:cover;
}
</style>
<body class="gray-bg" >
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div style="font-size: 30px;margin-top: 50px;text-align: center">后台管理系统</div>
<div style="font-size: 20px;margin-top: 30px;text-align: center">登 录</div>
<form class="m-t" role="form" method="POST" id="login" action="{{ route('login') }}">
<div class="form-group">
@if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong style="color: red">{{ $errors->first('email') }}</strong>
</span>
@endif
@if($errors->has('captcha'))
<div class="col-md-12">
<p class="text-danger text-left" style="text-align: center"><strong>{{$errors->first('captcha')}}</strong></p>
</div>
@endif
@if(session('msg'))
<div class="col-md-12">
<p class="text-danger text-left" style="text-align: center"><strong>{{session('msg')}}</strong></p>
</div>
@endif
</div>
<div class="form-group">
<input type="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="邮箱" required autofocus>
</div>
@csrf
<div class="form-group">
<input type="password" name="password" class="form-control" placeholder="密码" required>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control {{$errors->has('captcha')?'parsley-error':''}}" name="captcha" placeholder="验证码" style="width:150px">
</div>
<div class="col-md-4" style="margin-left:-50px">
<img src="{{captcha_src()}}" style="cursor: pointer" onclick="this.src='{{captcha_src()}}'+Math.random()">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="" id="telephone" class="form-control" placeholder="手机号" required>
</div>
<div class="form-group">
<input type="text" value="" class="form-control" style="width: 150px;float: left" name="checkedcode" placeholder="请输入验证码"/>
<input type="button" class="form-control" style="background-color: #00bc12;color: white;width: 120px;float: left;margin-left: 30px" onclick="sendCode(this)" value="获取验证码" />
</div>
<br>
<button type="submit" style="margin-top: 30px" class="btn btn-primary block full-width m-b">登录</button>
</form>
<p class="m-t"> <small>we app framework base on Bootstrap 3 © 2019</small> </p>
</div>
</div>
<!-- Mainly scripts -->
<script src="{{asset('static/js/jquery-2.1.1.js')}}"></script>
<script src="{{asset('static/js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
//定义变量
var clock = '';
var nums = 60;
var btn;
function sendCode(thisBtn) {
//判断手机号是否合法
//获取用户输入的手机号
var tel = $("#telephone").val();
//通过正则表达式匹配
//手机号的正则表达式
var reg = /^1[3,4,5,7,8,][0-9]{9}$/;
//匹配
var flag = reg.test(tel);
if(!flag){
alert("手机号输入格式错误!");
return;
}
//调用服务端发送短信服务,给用户发送短信验证码
$.ajax({
//发送短信的请求方式
type: "GET",
//路径
url: "/test",
//传到后台的参数
data: {"telephone":tel},
//返回结果
success:function(data){
$("#login").append('<input type="hidden" name="code" value="'+data.code+'" >')
}
});
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = nums + '秒后重新获取';
clock = setInterval(doLoop, 1000); //一秒执行一次,这是一个定时器
}
function doLoop() {
nums--;
if (nums > 0) {
btn.value = nums + '秒后重新获取';
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '重新获取验证码';
nums = 60; //重置时间
}
}
</script>
</body>
</html>
注意:红字部分是重点,样式可能没有,但是效果出来就行了。
5、登录逻辑:
$this->validateLogin($request);
if (empty($request->checkedcode)){
return back()->with('msg','手机验证码不为空');
}elseif ($request->checkedcode != $request->code){
return back()->with('msg','手机验证码不正确');
}
6、发送验证码。
此处别忘了引入类文件。
use App\Service\SmsService;
public function test(Request $request)
{
//生成六位验证码
$code = rand(100000,999999);
$to = $request->telephone;
SmsService::sendSms($code,$to);
return ['code'=>$code];
}