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

前期准备

登录七牛云官网: https://developer.qiniu.com/

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 表中增加字段 mobileUser 模型中增加白名单

实现发手机短信

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);
}

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

huangdj
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 3
一个人的江湖

nice,不过那个按钮绿的发慌 :see_no_evil: :see_no_evil: :see_no_evil:

5天前 评论
huangdj (楼主) 5天前
CrazyLickingDog

我记得这种请求不是需要一个input type = hidden value= {xxxx}的吗~ 是不是博主关闭了什么~

1天前 评论

注册的短信如果是写到队列里就更好了!

22小时前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!