Pendahuluan
Sebagai seorang Programmer, memenuhi permintaan client adalah sebuah kewajiban, salah satunya adalah mengubah hal yang sudah default menjadi custom. Konsep yang kita ketahui, bahwa Laravel hadir dengan fitur authentication bawaannya menggunakan email sebagai field yang digunakan untuk proses login. Disisi lain, client meminta kita untuk membuat fitur authentication menggunakan username atau bahwakan menggunakan kombinasi keduanya, yakni email dan username sebagai identitias dalam proses otentikasi.
Materi kali ini akan membahas bagaimana membuat fitur authentication menggunakan username/email di Laravel 6.
Baca Juga: Membuat Datatable Dengan Vuejs & Laravel 6
Install & Konfigurasi
Memulai segalanya dari awal, maka langkah pertama yang akan dilakukan adalah dengan meng-install Laravel 6, pada command line, jalankan
composer create-project --prefer-dist laravel/laravel dw-authentication
Buat database dengan nama dw-authentication, dan sesuaikan informasi database pada file .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dw-authentication
DB_USERNAME=root
DB_PASSWORD=
Sejak Laravel 6, command untuk men-generate authentication tidak lagi bisa ditemukan secara default, maka kita perlu melakukan beberapa tahap konfigurasi untuk membawa kembali fitur ini. Pada command line, jalankan
composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev
Fitur Authentication Username/Email
Tiba saatnya bagi kita untuk membuat fitur sesuai dengan deskripsi yang sudah dijelaskan diawal, adapun migration-nya akan kita tambahkan kolom username pada table users. Laravel sejak awal sudah memiliki 3 buah migration dan salah satunya adalah untuk table users. Buka migration tersebut dan modifikasi menjadi
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('username')->unique(); //TAMBAHKAN KOLOM INI
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Izinkan Eloquent untuk melakukan mass assignment dengan cara, buka file app/User.php dan modifikasi $fillable menjadi
protected $fillable = [
'name', 'username', 'email', 'password',
];
Generate struktur database-nya dengan cara menjalankan command php artisan migrate. Kemudian selanjutnya kita akan melakukan sedikit modifikasi pada bagian form login dan register.
Buka file resources/views/auth/login.blade.php dan ganti input email jadi username.
@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
<!-- TAMPILKAN NOTIF JIKA GAGAL LOGIN -->
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
<div class="form-group row">
<label for="username" class="col-md-4 col-form-label text-md-right">Username/Email</label>
<!-- MODIFIKASI BAGIAN INI MENJADI FIELD USERNAME -->
<div class="col-md-6">
<input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autocomplete="username" autofocus>
@error('username')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</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">
{{ __('Remember Me') }}
</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') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Adapun registrasinya akan mengizinkan dua field, yakni email dan username, sehingga pengguna bisa memasukkan informasi mengenai email-nya dan username-nya secara bersamaan. Lalu pada proses login nantinya, pengguna bisa memilih akan menggunakan email atau username. Buka file register.blade.php dan tambahkan kolom ini tepat diatas kolom input-an data email.
<div class="form-group row">
<label for="username" class="col-md-4 col-form-label text-md-right">Username</label>
<div class="col-md-6">
<input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autocomplete="username">
@error('username')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
Saatnya untuk meng-handle setiap request baik dari register maupun login. Langkah pertama, kita akan meng-handle request register dari user. Buka file RegisterController.php dan modifikasi kedua method ini dengan menambahkan username.
protected function validator(array $data)
{
return Validator::make($data, [
'name' => ['required', 'string', 'max:255'],
'username' => ['required', 'string', 'max:255', 'unique:users'], //TAMBAHKAN VALIDASI USERNAME
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => ['required', 'string', 'min:8', 'confirmed'],
]);
}
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\User
*/
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'username' => $data['username'], //SIMPAN INFORMASI USERNAME KE DATABASE
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
}
Adapun untuk proses login atau authentication, kita akan men-override fungsi login dari Laravel. Buka file LoginController.php dan tambahkan method login()
public function login(Request $request)
{
$this->validate($request, [
'username' => 'required|string', //VALIDASI KOLOM USERNAME
//TAPI KOLOM INI BISA BERISI EMAIL ATAU USERNAME
'password' => 'required|string|min:6',
]);
//LAKUKAN PENGECEKAN, JIKA INPUTAN DARI USERNAME FORMATNYA ADALAH EMAIL, MAKA KITA AKAN MELAKUKAN PROSES AUTHENTICATION MENGGUNAKAN EMAIL, SELAIN ITU, AKAN MENGGUNAKAN USERNAME
$loginType = filter_var($request->username, FILTER_VALIDATE_EMAIL) ? 'email' : 'username';
//TAMPUNG INFORMASI LOGINNYA, DIMANA KOLOM TYPE PERTAMA BERSIFAT DINAMIS BERDASARKAN VALUE DARI PENGECEKAN DIATAS
$login = [
$loginType => $request->username,
'password' => $request->password
];
//LAKUKAN LOGIN
if (auth()->attempt($login)) {
//JIKA BERHASIL, MAKA REDIRECT KE HALAMAN HOME
return redirect()->route('home');
}
//JIKA SALAH, MAKA KEMBALI KE LOGIN DAN TAMPILKAN NOTIFIKASI
return redirect()->route('login')->with(['error' => 'Email/Password salah!']);
}
Adapun tampilan yang akan kita dapatkan untuk halaman login akan terlihat seperti gambar berikut
Sedangkan halaman register akan terlihat seperti dibawah ini
Baca Juga: Membuat Aplikasi Ekspedisi NuxtJS #3: CRUD Data Users Bagian 2
Kesimpulan
Banyak hal yang bisa kita lakukan dengan tidak menggantungkan sesuatu pada apa yang sudah ditetapkan oleh sebuah Framework, seperti halnya Laravel sudah menetapkan bahwa fitur authentication yang dimilikinya menggunakan email, sehingga seluruh aplikasi yang kita buat terpaku pada fitur tersebut. Sepanjang materi ini kita belajar bagaimana membuat custom authentication di Laravel 6 dengan menerapkan dua fungsi login secara bersamaan, yakni menggunakan email dan username.
Adapun dokumentasi code dari artikel ini bisa dilihat di Github.
Comments