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 表中增加字段 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/master/docs/sms/example.php

前端页面

我这里演示的前端模板是 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"&