Laravel Fortify adalah salah satu dari beberapa package yang disediakan Laravel untuk kita gunakan jika ingin membangun sistem autentikasi yang cepat dan mudah.
Laravel Fortify menyediakan scaffolding lengkap seperti login, registrasi, konfirmasi kata sandi, reset kata sandi, verifikasi email, dan otentikasi dua faktor.
Selain laravel fortify, ada juga paket Starter Kits lain yang menyediakan scaffolding aplikasi, yaitu Laravel Breeze dan Laravel Jetstream. Dan Tentu ada perbedaan dari ketigaanya.
Namun, meskipun sama-sama memberikan implementasi otentikasi aplikasi lengkap seperti login, registrasi, dan lain sebagainya, kita bisa memilih dengan melihat kebutuhan dan tujuan dari menggunakan starter kit ini.
Jika kita hanya membutuhan rancangan otentikasi user yang cepat tanpa antarmuka pengguna, bisa menggunakan Fortify. Karena laravel fortify tidak menyediakan antarmuka pengguna, meskipun memberikan route lengkap yang dibutuhkan.
Laravel Fortify hanya menyediakan implementasi backend yang bisa kita gunakan untuk aplikasi frontend yang kita bangun.
Fitur laravel fortify adalah sebagai berikut:
//config/fortify.php
'features' => [
Features::registration(),
Features::resetPasswords(),
Features::emailVerification(),
Features::updateProfileInformation(),
Features::updatePasswords(),
Features::twoFactorAuthentication(),
],
Dokumentasi lengkap mengenai laravel fortify bisa dilihat di laravel.com: Laravel Fortify. Untuk contoh instalasi dan cara penggunaannya, akan dijelaskan di bawah.
Instalasi
Kita akan membuat autentikasi user dengan laravel fortify, dan menggunakan beberapa fitur yang disediakan. Dalam contoh autentikasi ini, kita akan terapkan, atau menggunakan fitur Features::registration() dan Features:emailVerification().
Kita mulai dari instalasi laravel dan mengatur database. Untuk database kita gunakan mysql.
laravel new laravel_fortify
//.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=fortify DB_USERNAME=root DB_PASSWORD=
Setelah instalasi laravel dan pengaturan database selesai, selanjutnya kita install package fortify, dan mem'publish vendor / resource fortify:
composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
Setelah itu, tambahan App\Providers\FortifyServiceProvider::class di config/app.php.
//config/app.php 'providers' => [ ... App\Providers\FortifyServiceProvider::class, ]
Terakhir, kita lakukan migrasi tabel:
php artisan migrate
Sampai disini, kita bisa langsung melakukan pendaftaran dan login user.
Saat kita publish resource fortify diatas, direktori baru otomatis dibuat di app/Actions yang berisi metode-metode yang dibutuhkan. Silakan lihat.
Dan, jika kita jalankan route:list, sudah disediakan daftar route untuk kita gunakan.
Pendaftaran & login User
Mari kita coba membuat permintaan http menggunakan fortify. Kita coba dari membuat pendaftaran user.
Mari kita gunakan postman untuk membuat permintaan. Field atau kolom tabel, kita sesuaikan dari tabel users yang telah dibuat, seperti name, email, password, dan password_confirmation.
Silakan buka postman dan buat permintaan baru:
- Method: POST
- Endpoint: http://localhost:8000/register
- Headers: Accept-application/json
Jika terjadi error CSRF token mismatch, silakan buka VerifyCsrfToken.php, tambahkan * seperti di bawah ini.
protected $except = [
'*',
];
Jika tidak ada kesalahan, respon hanya menampilkan string kosong seperti diatas. Jika dilihat pada database, user baru berhasil ditambahkan, atau dibuat.
MySQL [fortify]> select name, email, password from users; +-------+----------------+--------------------------------------------------------------+ | name | email | password | +-------+----------------+--------------------------------------------------------------+ | user1 | [email protected] | $2y$10$msv4xTZVHNFRWwzcT/SZ7uv/ML9ExxtDOKZlGoWHlpQnTRgsaLGoW | +-------+----------------+--------------------------------------------------------------+ 1 row in set (0.001 sec)
Selanjutnya silakan coba untuk login menggunakan email dan password yang telah dibuat.
- Method: POST
- Endpoint: http://localhost:8000/login
- Headers: Accept-application/json
Status permintaan sukses, dan login berhasil. Untuk logout, gunakan url: http://localhost:8000/logout.
Halaman Login & Registrasi
Seperti yang di jelaskan sebelumnya, bahwa fortify tidak menyediakan antarmuka pengguna, seperti halaman untuk login dan registrasi yang otomatis diberikan. Namun, laravel fortify memberikan route yang dapat kita gunakan ke 'views', untuk halaman login dan registrasi.
GET|HEAD login ......................... login › Laravel\Fortify › AuthenticatedSessionController@create POST login ......................... Laravel\Fortify › AuthenticatedSessionController@store POST logout ........................ logout › Laravel\Fortify › AuthenticatedSessionController@destroy GET|HEAD register ...................... register › Laravel\Fortify › RegisteredUserController@create POST register ...................... Laravel\Fortify › RegisteredUserController@store
Route untuk halman login dan registrasi ini, secara default disediakan, atau diaktifkan. Dan, karena kita dapat menggunakan library javascript atau frontend terpisah, route ini bisa kita nonaktifkan, jika tidak membutuhkannya.
Pengaturan ini terdapat pada file konfigurasi fortify di config/fortify.php. Untuk menonaktifkan, tiggal ubah ke 'false'.
//config/fortify.php */ 'views' => true, /*
Karena kita akan membuat halaman login dan registrasi tanpa javaScript atau framework, kita biarkan saja true, kita akan gunakan route tersebut untuk menampilkan 'views' yang akan kita buat.
Login
Kita akan mulai membuat halaman login. Kita mulai dari membuat struktur template terlebih dahulu. Kita akan gunakan "template inheritance" dalam pemembuatan layout.
Tahap pertama, silakan buat file baru di direktori views dengan nama app.blade.php, lalu copas template di bawah ini.
//resources/views/app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>App Name @yield('title')</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<style>
body {
background: #d1d1d1;
font-family: 'Open Sans', sans-serif;
}
.form-wrapper {
width: 385px;
margin: 0 auto;
font-size: 16px;
top: 2em;
position: relative;
}
.error-msg {
background: #2a2626;
padding: 12px 0;
font-weight: normal;
color: #e6e6e6;
}
.error-msg ul {
margin: 0;
}
.header,
form div {
margin-top: 0;
margin-bottom: 0;
}
.header {
background: #c75459;
padding: 16px;
font-size: 1.4em;
font-weight: normal;
text-transform: uppercase;
color: #fff;
border-left: 4px solid #2a2626;
}
form {
background: #ebebeb;
padding: 12px;
}
form div {
padding: 12px;
}
form input,
button {
box-sizing: border-box;
display: block;
width: 100%;
padding: 12px;
outline: 0;
font-family: inherit;
font-size: 14px;
border: 1px solid #ddd;
}
button {
background: #2a2626;
color: #fff;
cursor: pointer;
}
button:hover {
background: #099;
}
.menu {
width: 100%;
background: #444;
display: inline-block;
}
.menu ul {
float: right;
margin: 12px;
}
.menu ul li {
display: inline-block;
background: transparent;
padding: 10px;
margin: 0px 12px;
color: #fff;
border: 1px solid #ddd;
}
.menu a {
text-decoration: none;
color: #fff;
}
#logout-form,
#logout-button {
background: none;
padding: 0;
cursor: pointer;
border: none;
}
</style>
<body>
<div class="menu">
<ul>
@if (Route::has('login'))
@auth
<li> <a href="{{ url('/home') }}" class="">Home</a></li>
<li>
<form id="logout-form" action="/logout" method="POST">
@csrf
<button id="logout-button" type="submit">Logout</button>
</form>
</li>
@else
<li><a href="{{ route('login') }}" class="">Log in</a></li>
@if (Route::has('register'))
<li><a href="{{ route('register') }}" class="">Register</a></li>
@endif
@endauth
@endif
</ul>
</div>
@yield('content')
</body>
</html>
Kemudian buat folder baru di direktori views dengan nama auth, kemudian tambahkan 2 file didalamnya, login.blade.php dan register.blade.php.
Copas template di bawah ini sesuai file.
//views/auth/login.blade.php
@extends('app')
@section('title', '- Login')
@section('content')
<div class="form-wrapper">
<h2 class="header">Login</h2>
@if ($errors->any())
<div class="error-msg">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="/login">
@csrf
<div>
<input name="email" type="email" placeholder="Email">
</div>
<div>
<input name="password" type="password" placeholder="Password">
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
@endsection
//views/auth/register.blade.php
@extends('app')
@section('title', '- Register')
@section('content')
<div class="form-wrapper">
<h2 class="header">Register</h2>
@if ($errors->any())
<div class="error-msg">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="/register">
@csrf
<div>
<input name="name" type="text" placeholder="Name">
</div>
<div>
<input name="email" type="email" placeholder="Email">
</div>
<div>
<input name="password" type="password" placeholder="Password">
</div>
<div>
<input name="password_confirmation" type="password" placeholder="Password Confirmation">
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
@endsection
Karena setelah login atau registrasi di arahkan ke route 'home', kita buat lagi file baru di views dengan nama home.blade.php, kemudian copas template berikut.
//views/home.blade.php
@extends('app')
@section('title', '- Home')
@section('content')
<h1>Welcome</h1>
@endsection
Pengaturam tersebut bisa lihat pada file RouteServiceProvider.php:
*/ public const HOME = '/home'; /**
Selanjutnya, kita akan gunakan metode yang disediakan laravel fortify untuk menampilkan 'view' ke halaman login dan registrasi.
Silakan buka FortifyServiceProvider.php, tambahkan di bawah ini di dalam metode boot().
//App/Providers/FortifyServiceProvider.php
public function boot()
{
...
Fortify::loginView(function () {
return view('auth.login');
});
Fortify::registerView(function () {
return view('auth.register');
});
}
Sampai disini, tinggal mencobanya. Jalankan php artisan serve dan buka browser. Silakan coba untuk login dan atau registrasi user baru.
Verifikasi Email
Selanjutnya, mari kita coba gunakan fitur Verifikasi email untuk user baru yang mendaftar. Kita akan berikan middleware pada route yang diperlukan verifikasi pendaftaran sebelum dapat diakses.
Kita pastikan terlebih dahulu fitur emailVerification() telah di tambahkan / aktifkan. Pada file config/fortify.php, tambahkan emailVerification() pada array 'features' seperti di bawah ini.
'features' => [ Features::registration(), Features::emailVerification(), ]
Kemudian pada model user.php, tambahkan class MustVerifyEmail, seperti di bawah ini.
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
...
class User extends Authenticatable implements MustVerifyEmail
{
...
Kemudian buka file route web.php, tambahkan middleware pada route 'home', seperti di bawah ini.
Route::view('/home', 'home')->middleware(['auth', 'verified']);
Setelah itu, buka kembali FortifyServiceProvider.php, tambahkan di bawah ini pada metode boot().
public function boot()
{
...
Fortify::verifyEmailView(function () {
return view('auth.verify-email');
});
}
Kemudian, buat file baru di folder views/auth dengan nama verify-email.blade.php, lalu copas template di bawah ini.
@extends('app')
@section('title', '- Verifikasi email')
@section('content')
<p>Buka email untuk verifikasi pendaftaran. </p>
@endsection
Untuk server SMTP, sebagai percobaan, kita akan gunakan mailtrap. Jadi, silakan registrasi di mailtrap.io jika belum mendaftar, kemudian login.
Setelah masuk ke mailtrap, buka Demo inbox, kemudian pada SMTP Settings >> Integrations, silakan pilih laravel 7+, kamudian tambahkan pengaturan konfigurasi yang muncul ke file .env proyek laravel.
Sesuaikan / ubah value di bawah ini dengan yang ada pada pengaturan integrasi mailtrap.
//.env MAIL_MAILER=smtp MAIL_HOST=mailhog MAIL_PORT=1025 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null MAIL_FROM_ADDRESS="[email protected]" MAIL_FROM_NAME="${APP_NAME}"
Sampai disini, tinggal mencobanya. Silakan melakukan pendaftaran user baru, kemudian cek inbox mailtrap.
Isi email verifikasi pendaftaran seperti gambar di bawah ini.
Setelah melakukan verifikasi email, maka setiap route yang diberi middleware verifikasi email dapat dibuka, atau diakses.
Selesai
Sampai disini, pendaftaran, login, dan verifikasi email telah selesai dikerjakan. Kita sampai disini. Silakan dicoba, dikembangkan, dan lakukan eksperimen.