Laravel 6.x 為註冊或登入元件新增驗證碼

心智極客發表於2019-10-30
Laravel元件

注：本文使用的 Laravel 版本為 6.x。

生成註冊登入

Laravel 6.x 版本需要進行前端的初始化

$ composer require laravel/ui

生成 bootstrap 腳手架

php artisan ui bootstrap
php artisan ui:auth bootstrap

編譯前端資源

$ cnpm install && npm run dev

新增驗證碼

安裝擴充套件包

$ composer require mews/captcha

釋出配置檔案

$ php artisan vendor:publish --provider='Mews\Captcha\CaptchaServiceProvider'

captcha 提供了一系列輔助方法

captcha(); // 圖片
captcha_src(); // URL
captcha_img(); // HTML

輔助方法可傳入配置項

captcha_img('inverse');
captcha_src('flat');

同時，該擴充套件包預設註冊了供使用者獲取驗證碼的路由

$ php artisan route:list | grep captcha
# captcha/{config?}
# captcha/api/{config?}

本地測試

127.0.0.1:8000/captcha  // 預設使用 default 配置
127.0.0.1:8000/captcha/flat  // 使用 flat 配置
127.0.0.1:8000/captcha/api // 測試 API 返回

在密碼欄位後面新增驗證碼 - URL 後面附帶了隨機數，防止瀏覽器快取

// /resources/views/auth/register.blade.php
<div class="form-group row">
    <label for="captcha" class="col-md-4 col-form-label text-md-right">驗證碼</label>

    <div class="col-md-6">

        <input id="captcha" class="form-control{{ $errors->has('captcha') ? ' is-invalid' : '' }}" name="captcha" required>

        <img class="thumbnail mt-3 mb-2" src="{{ captcha_src() }}" onclick="this.src='/captcha?'+Math.random()" title="點選圖片重新獲取驗證碼">

    @if ($errors->has('captcha'))
      <span class="invalid-feedback" role="alert">
        <strong>{{ $errors->first('captcha') }}</strong>
      </span>
    @endif
  </div>
</div>

最後，只需要在註冊控制器中新增驗證

// /app/Http/Controllers/Auth/RegisterController.php

protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'min:8', 'confirmed'],
        'captcha' => ['required', 'captcha'],
    ]);
}
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章