Tambahkan Verifikasi Email Dua Faktor ke Laravel Auth – Panel Admin Cepat

Ini adalah contoh proyek di mana kami akan menambahkan verifikasi unik yang dikirim melalui email, setiap kali pengguna masuk. Di akhir artikel, Anda akan menemukan tautan ke repositori Github gratis dengan kode proyek lengkap.

Dasar dari proyek ini adalah panel admin Laravel 6 yang dihasilkan dengan QuickAdminPanel kami, tetapi Anda dapat memulai dengan Laravel Auth default yang “kosong”, langkah-langkahnya akan bekerja sama.

Langkah 1. Dua kolom baru di tabel DB Pengguna

Inilah migrasi baru kami:

Schema::table('users', function (Blueprint $table) {
    $table->string('two_factor_code')->nullable();
    $table->dateTime('two_factor_expires_at')->nullable();
});

Bidang kode_dua_faktor akan berisi 6 digit nomor acak, dan two_factor_expires_at akan berisi kedaluwarsa pada – dalam kasus kami, kode akan kedaluwarsa dalam 10 menit.

Kami juga menambahkan bidang tersebut ke aplikasi/Pengguna.php properti – $dapat diisi susunan, dan $tanggal:

class User extends Authenticatable
{

    protected $dates = [
        'updated_at',
        'created_at',
        'deleted_at',
        'email_verified_at',
        'two_factor_expires_at',
    ];

    protected $fillable = [
        'name',
        'email',
        'password',
        'created_at',
        'updated_at',
        'deleted_at',
        'remember_token',
        'email_verified_at',
        'two_factor_code',
        'two_factor_expires_at',
    ];

---

Langkah 2. Hasilkan dan kirim kode saat login

Ini adalah metode yang perlu kita tambahkan app/Http/Controllers/Auth/LoginController.php:

protected function authenticated(Request $request, $user)
{
    $user->generateTwoFactorCode();
    $user->notify(new TwoFactorCode());
}

Dengan cara ini kita menimpanya diautentikasi() metode inti Laravel, dan tambahkan logika khusus tentang apa yang harus terjadi setelah pengguna masuk.

Pertama, kita membuat kodenya, dan untuk itu – kita menambahkan metode aplikasi/Pengguna.php:

public function generateTwoFactorCode()
{
    $this->timestamps = false;
    $this->two_factor_code = rand(100000, 999999);
    $this->two_factor_expires_at = now()->addMinutes(10);
    $this->save();
}

Selain mengatur kode dua faktor dan waktu kedaluwarsanya, kami juga menetapkan bahwa pembaruan ini tidak boleh disentuh diperbarui_di kolom di tabel pengguna – yang sedang kami lakukan $ini->cap waktu = salah;.

Sekarang, melihat kembali Pengontrol Masuk di atas, kami menelepon $pengguna->beritahu() dan menggunakan sistem notifikasi Laravel, untuk itu kita perlu membuat kelas Notifikasi, dengan cara tukang php make:notifikasi TwoFactorCodelalu kita isi app/Pemberitahuan/TwoFactorCode.php:

class TwoFactorCode extends Notification
{

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->line('Your two factor code is '.$notifiable->two_factor_code)
            ->action('Verify Here', route('verify.index'))
            ->line('The code will expire in 10 minutes')
            ->line('If you have not tried to login, ignore this message.');
    }
}

Kode ini akan mengirim email seperti ini:

Dua hal yang perlu disebutkan di sini:

• Metode keMail() parameter $dapat diberitahukan secara otomatis ditetapkan sebagai objek Pengguna yang login, sehingga kita dapat mengakses pengguna.dua_faktor_kode Kolom DB dengan menelepon $dapat diberitahukan->kode_dua_faktor;
• Kami akan membuat rute(‘verifikasi.indeks’) rute, yang akan mengirim ulang kodenya, nanti.

---

Langkah 3. Tampilkan formulir verifikasi dengan Middleware

Setelah pengguna masuk, dan setelah mereka menerima email dengan kode verifikasi, mereka diarahkan ke formulir ini:

Faktanya, mereka akan melihat formulir ini jika mereka memasukkan URL apa pun, itu akan ditampilkan hingga mereka memasukkan kode verifikasi.

Untuk melakukan itu, kami membuat Middleware: pembuat php make:middleware TwoFactor

Dan isi ini ke dalam app/Http/Middleware/TwoFactor.php:

class TwoFactor
{

    public function handle($request, Closure $next)
    {
        $user = auth()->user();

        if(auth()->check() && $user->two_factor_code)
        {
            if($user->two_factor_expires_at->lt(now()))
            {
                $user->resetTwoFactorCode();
                auth()->logout();

                return redirect()->route('login')
                    ->withMessage('The two factor code has expired. Please login again.');
            }

            if(!$request->is('verify*'))
            {
                return redirect()->route('verify.index');
            }
        }

        return $next($request);
    }
}

Jika Anda belum mengetahui cara kerja Middleware, baca dokumentasi resmi Laravel. Namun pada dasarnya, ini adalah kelas yang melakukan beberapa tindakan yang biasanya membatasi akses terhadap halaman atau fungsi tertentu.

Jadi, dalam kasus kami, kami memeriksa apakah ada kumpulan kode dua faktor. Jika ya, kami periksa apakah belum kedaluwarsa. Jika sudah expired, kita reset dan redirect kembali ke form login. Jika masih aktif, kita arahkan kembali ke form verifikasi.

Dengan kata lain, jika pengguna.dua_faktor_kode kosong, lalu diverifikasi dan pengguna dapat melanjutkan.

Berikut kodenya aplikasi/Pengguna.php metode resetTwoFactorCode():

public function resetTwoFactorCode()
{
    $this->timestamps = false;
    $this->two_factor_code = null;
    $this->two_factor_expires_at = null;
    $this->save();
}

Selanjutnya, kami memberi nama “alias” pada kelas middleware kami, di dalamnya app/Http/Kernel.php:

class Kernel extends HttpKernel
{
    // ...

    protected $routeMiddleware = [
        'can'           => \Illuminate\Auth\Middleware\Authorize::class,
        // ... more middlewares

        'twofactor'     => \App\Http\Middleware\TwoFactor::class,
    ];
}

Sekarang, kita perlu menetapkan ini ‘dua faktor’ Middleware ke beberapa rute. Dalam kasus kode yang dihasilkan QuickAdminPanel, ini adalah keseluruhan Grup Rute rute/web.php:

Route::group([
    'prefix' => 'admin', 
    'as' => 'admin.', 
    'namespace' => 'Admin', 
    'middleware' => ['auth', 'twofactor']
], function () {
    Route::resource('permissions', 'PermissionsController');
    Route::resource('roles', 'RolesController');
    Route::resource('users', 'UsersController');
});

---

Langkah 4. Halaman verifikasi Pengontrol/Tampilan

Pada tahap ini, permintaan apa pun ke URL mana pun akan dialihkan ke verifikasi kode.
Untuk itu, kami akan memiliki dua rute umum tambahan:

Route::get('verify/resend', 'Auth\TwoFactorController@resend')->name('verify.resend');
Route::resource('verify', 'Auth\TwoFactorController')->only(['index', 'store']);

Logika utama akan ada di dalam app/Http/Controllers/Auth/TwoFactorController.php:

class TwoFactorController extends Controller
{
    public function index() 
    {
        return view('auth.twoFactor');
    }

    public function store(Request $request)
    {
        $request->validate([
            'two_factor_code' => 'integer|required',
        ]);

        $user = auth()->user();

        if($request->input('two_factor_code') == $user->two_factor_code)
        {
            $user->resetTwoFactorCode();

            return redirect()->route('admin.home');
        }

        return redirect()->back()
            ->withErrors(['two_factor_code' => 
                'The two factor code you have entered does not match']);
    }

    public function resend()
    {
        $user = auth()->user();
        $user->generateTwoFactorCode();
        $user->notify(new TwoFactorCode());

        return redirect()->back()->withMessage('The two factor code has been sent again');
    }
}

Bentuk utama ada di dalam indeks() metode, lalu POST data ke toko() metode untuk memverifikasi kode, dan metode ketiga kirim ulang() adalah untuk membuat ulang dan mengirim ulang kode baru di email lain.

Mari kita lihat formulir verifikasi – di sumber daya/views/auth/twoFactor.blade.php:

@if(session()->has('message'))
    <p class="alert alert-info">
        {{ session()->get('message') }}
    </p>
@endif
<form method="POST" action=" route("verify.store') }}">
    {{ csrf_field() }}
    <h1>Two Factor Verification</h1>
    <p class="text-muted">
        You have received an email which contains two factor login code.
        If you haven't received it, press <a href=" route("verify.resend') }}">here</a>.
    </p>

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">
                <i class="fa fa-lock"></i>
            </span>
        </div>
        <input name="two_factor_code" type="text" 
            class="form-control{{ $errors->has('two_factor_code') ? ' is-invalid' : '' }}" 
            required autofocus placeholder="Two Factor Code">
        @if($errors->has('two_factor_code'))
            <div class="invalid-feedback">
                {{ $errors->first('two_factor_code') }}
            </div>
        @endif
    </div>

    <div class="row">
        <div class="col-6">
            <button type="submit" class="btn btn-primary px-4">
                Verify
            </button>
        </div>
    </div>
</form>

Saya sengaja melewatkan semua template HTML “induk”, karena mungkin bergantung pada tema desain Anda, tetapi ini adalah bentuk utama kode Blade. Saya pikir itu semua cukup menjelaskan diri sendiri.

Satu-satunya hal yang mungkin memerlukan penjelasan adalah itu sesi()->memiliki(‘pesan’) – dari mana pesan itu berasal? Dari Pengendali kirim ulang() metode dan baris terakhirnya:

return redirect()->back()->withMessage('The two factor code has been sent again');

Tidak yakin apakah Anda mengetahuinya, tetapi metode Laravel redirect() dapat digunakan dengan metode berantai ->dengan Apapun(‘teks’) dan teks itu disimpan dalam sesi sebagai sesi(‘terserah’) (huruf kecil).

---

Aaaaa dan itu dia! Kami memiliki logika penuh untuk mengirim kode dua faktor melalui email.

Satu-satunya hal yang belum saya bahas bersifat individual – KAPAN Anda ingin mengirim kode itu. Dalam contoh ini, kami mengirimkannya setiap saat, tapi itu mungkin bukan skenario kehidupan nyata yang terlalu realistis. Anda perlu mengirim kode setiap kali ada login dari alamat IP baru, misalnya, atau dari negara yang berbeda, atau setiap kali ke-5, atau kondisi lainnya, jadi silakan buat sendiri – cukup edit Middleware dan LoginController untuk memberi tahu Laravel kapan Anda ingin mengirim kode itu.

Tautan ke repositori lengkap: