~ We are changing the world with technology. ~

Matt Mullenweg

Authentication Menggunakan Username/Email Laravel 6

Authentication Menggunakan Username/Email Laravel 6

1441 Dilihat

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

laravel custom authentication

Sedangkan halaman register akan terlihat seperti dibawah ini

laravel custom authentication

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.

 

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Laravel Multiple Database MySql & MongoDB Laravel

Laravel Multiple Database MySql & MongoD...

Mengelola lebih dari satu database di Laravel akan menjadi bahan pembahasan kita dimana engine database yang akan digunakan adalah MySQL dan MongoDB, persoalannya adalah bagaimana menggunakan kedua da...

Mengenal & Mengimplementasikan Laravel Airlock Laravel

Mengenal & Mengimplementasikan Laravel A...

Salah satu fitur yang menarik perhatian dari Laravel 7 adalah Airlock. Fitur ini melengkapi sederet fitur lainnya yang serupa dalam menciptakan fungsi authentication, sebut saja yang lebih dahulu dike...

Authorization Using Gates Laravel 7 Laravel

Authorization Using Gates Laravel 7

Membedakan antara authentication dan authorization sering kali menjadi sebuah masalah baru karena keduanya hampir dianggap sama tapi memiliki fungsi yang berbeda, dimana authentication biasanya diguna...

Komentar