Laravel6.0 结合七牛云短信实现短信验证用户登录

huangdj 的个人博客 / 1070 / 5 / 创建于 4年前 / 更新于 4年前

前期准备

1、找到控制台--云短信--签名，新建签名，注意填写签名时不要填写模糊词语或者个人等词语，如果没有通过审核，客服会提示给你哪里错误，你就修改即可。

2、找到模板，新建模板，选择验证码类即可。

3、等待客服审核，一般半小时吧。

4、之所以选择七牛云，是因为七牛给我们免费试用300条短信，所以不用花钱哦。

创建项目

laravel new alipay

cd alipay

composer require laravel/ui

php artisan ui vue --auth

cnpm install

npm run dev

# 修改数据库配置后执行如下命令
php artisan migrate

# 安装七牛sdk
composer require qiniu/php-sdk

# 启动项目
php artisan serve

项目配置

1、在 .env 文件中修改数据库相关配置，手动创建数据库，然后执行迁移命令 php artisan migrate

2、在 users 表中增加字段 mobile，User 模型中增加白名单

实现发手机短信

1、在 web.php 中添加路由并创建对应控制器和方法

Route::post('send', 'MessageController@send');

2、在 send 方法中添加如下代码：

use Illuminate\Http\Request;
use \Qiniu\Auth;

public function send(Request $request)
{
    $ak = "YouAccessKey";
    $sk = "YouSecretKey";
    $auth = new Auth($ak, $sk);
    $client = new \Qiniu\Sms\Sms($auth);

    //发送信息模块
    $template_id = "Youtemplate_id";
    $mobiles = array($request->mobile);

    // 由于我们做的是登录，所以需要验证手机号是否存在
    $mobile = User::where('mobile', $request->mobile)->find();
    if(!$mobile){
        return response()->json(['status'=>0, 'msg' => '手机号码不存在']);
    }

    $code = $this->GetRandStr(4);  // 随机生成短信验证码code，4代表验证码长度
    session(['code' => $code]);  // 把code存入session
    try {
        //发送短信
        $resp = $client->sendMessage($template_id, $mobiles, ['code' => $code]);
        print_r($resp);
    } catch (\Exception $e) {
        echo "Error:", $e, "\n";
    }
}

/***
 * 自定义方法生成随机验证码
 * @param $len
 * @return string
 */
private function GetRandStr($len)
{
    $chars = array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
    $charsLen = count($chars) - 1;
    shuffle($chars);
    $output = "";
    for ($i = 0; $i < $len; $i++) {
        $output .= $chars[mt_rand(0, $charsLen)];
    }
    return $output;
}

以上写法参考资料：https://github.com/qiniu/php-sdk/blob/mast...

前端页面

我这里演示的前端模板是 laravel 命令自动生成的登录模板，稍作修改，代码如下：

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Login') }}</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('login') }}">
                            @csrf

                            <div class="form-group row">
                                <label for="mobile"
                                       class="col-md-4 col-form-label text-md-right">手机号：</label>

                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="mobile" name="mobile">
                                </div>

                                <div class="col-md-2">
                                    <button type="button" class="btn btn-success btn-sm send_msg">
                                        发送
                                    </button>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="email" class="col-md-4 col-form-label text-md-right">短信验证码</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="code">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password"
                                       class="col-md-4 col-form-label text-md-right">密码：</label>

                                <div class="col-md-6">
                                    <input id="password" type="password"
                                           class="form-control @error('password') is-invalid @enderror" name="password"
                                           required autocomplete="current-password">

                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-6 offset-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="remember"
                                               id="remember" {{ old('remember') ? 'checked' : '' }}>

                                        <label class="form-check-label" for="remember">
                                            记住我
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('Login') }}
                                    </button>

                                    @if (Route::has('password.request'))
                                        <a class="btn btn-link" href="{{ route('password.request') }}">
                                            忘记密码
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/common.js') }}"></script>
<script>
    $(function () {
        $('.send_msg').click(function () {
            var mobile = $("#mobile").val();
            $.ajax({
                type: 'POST',
                url: '/send',
                data: {mobile: mobile},
                success:function(data){
                    if(data.status == 0){
                        alert(data.msg);
                    }
                }
            })
        })
    })
</script>

页面显示效果如图：

在 LoginController.php 控制器中，重写登录，添加如下代码：

/**
 * 改成手机号登陆
 * Get the login username to be used by the controller.
 * @return string
 */
public function username()
{
    return 'mobile';
}

/***
 * 重写登录方法
 * @param Request $request
 * @return \Illuminate\Http\JsonResponse|\Illuminate\Http\Response|\Symfony\Component\HttpFoundation\Response
 * @throws \Illuminate\Validation\ValidationException
 */
public function login(Request $request)
{
    if ($request->code != session()->get('code')) {
        return response()->json(['msg' => '验证码填写错误']);
    }
    $this->validateLogin($request);

    if ($this->attemptLogin($request)) {
        return $this->sendLoginResponse($request);
    }

    $this->incrementLoginAttempts($request);

    return $this->sendFailedLoginResponse($request);
}

接下来，发送验证码进行测试，测试成功后，跳转指定页面即可。我这里只是写了一个案例，正式项目请自行集成。

laravel