Tutorial Laravel Jetstream #6 : Security


Fika Ridaul Maulayya
I'm Fika Ridaul Maulayya, a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah membahas tentang Profle Management di dalam Laravel Jetstream, maka di artikel kali ini kita akan membahas tentang Security di dalam Laravel Jetstream, dimana akan meliputi beberapa fitur seperti :

  • Two-Factor Authentication
  • Password Update
  • Browser Sessions
  • Password Validation Rules
  • Password Confirmation

Fitur Security dari Laravel Jetstream dapat kita akses setelah kita berhasil melakukan login dan ada di sebalah kanan atas dropdown menu. Laravel Jetstream membuat scaffolds views dan actions yang memungkinkan user dapat memperbarui password, mengaktifkan / menon-aktifkan two-factor authentication, dan logout dari browser lain.

Tentang Two-Factor Authentication

Laravel Jetstream secara otomatis membuat scaffolds untuk dukungan Two-Factor Authentication. Ketika kita mengaktifkan Two-Factor Authentication di akun, maka kita harus memindai kode QR yang diberikan menggunakan aplikasi authenticator gratis seperti Google Authenticator. Selain itu, kita juga harus menyimpan code recovery yang di sediakan, ini digunakan untuk antisipasi jika kita kehilangan akses dari perangkat mobile.


Views - Two-Factor Authentication

Saat menggunakan stack Livewire, tampilan manajemen two-factor authentication ditampilkan menggunakan template Blade resources/views/profile/two-factor-authentication-form.blade.php. Dan jika kita menggunakan Inertia maka tampilan tersebut akan memanggil template resources/js/Pages/Profile/TwoFactorAuthenticationForm.vue.

Views - Password Update

Ketika kita menggunakan stack Livewire, maka tampilan untuk update password akan ditampilkan menggunakan template Blade resources/views/profile/update-password-form.blade.php dan ketika kita menggunakan stack Inertia, maka template tersebut akan diletakkan di resources/js/Pages/Profile/UpdatePasswordForm.vue.


Views - Browser Sessions

Dan ketika kita menggunakan stack Livewire, untuk template dari session browser akan menggunakan Blade dari resources/views/profile/logout-other-browser-sessions-form.blade.php. Dan jika kita menggunakan Inertia, maka template yang akan digunakan adalah resources/js/Pages/Profile/LogoutOtherBrowserSessionsForm.vue.

Fitur ini menggunakan middleware AuthenticateSession bawaan Laravel untuk keluar dengan aman dari session browser lain yang di autentikasi sebagai pengguna saat ini.


Actions

Seperti kebanyakan fitur Jetstream, logika yang dijalankan untuk memenuhi permintaan terkait security dapat ditemukan dalam class action dalam aplikasi. Akan tetapi kita hanya dapat menyesuaikan untuk bagian update password. Untuk bagian Two-Factor Authentication dan session browser tidak memerlukan penyusuaian tambahan jadi untuk action ini kita tidak bisa mengubahnya karena berada di dalam folder vendor.

Action - Password Update

Untuk action update password akan menggunakan class berikut ini App\Actions\Fortify\UpdateUserPassword. Action ini akan bertanggung jawab untuk memvalidasi masukan dan memperbarui password dari pengguna. Action ini menggunakan Traits berikut ini untuk menentukan aturan dari validasi password yang dimasukkan ataupun di update :

App\Actions\Fortify\PasswordValidationRules

Kita dapat menyesuiakan Traits diatas jika memang dibutuhkan.

Action - Password Validation Rules

Jika kita perhatikan di dalam action berikut ini App\Actions\Fortify\PasswordValidationRules. Dimana di dalam action ini memanggil sebuah Traits Laravel\Fortify\Rules\Password. Objek ini memungkinkan kita dengan mudah menyesuaikan requirments password untuk aplikasi kita.

Secara default, aturan tersebut membutuhkan password yang panjangnya setidaknya 8 karakter. Namun, kita dapat menggunakan metode berikut untuk menyesuaikan requirments password :

(new Password)->length(10)

// Require at least one uppercase character...
(new Password)->requireUppercase()

// Require at least one numeric character...
(new Password)->requireNumeric()

Password Confirmation

Saat membuat aplikasi, kita terkadang memiliki kondisi yang mengharuskan pengguna untuk mengonfirmasi password sebelum sebuah aksi tersebut dilakukan. Untungnya, Jetstream memiliki fungsionalitas bawaan untuk mempermudah proses ini.

Password Confirmation - Livewire

Ketika kita menggunakan stack Livewire, untuk action dari password confirmation ada pada Traits berikut ini Laravel\Jetstream\ConfirmsPasswords. Kemudian di dalam Blade template kita bisa menggunakan component seperti berikut ini confirms-password.

confirms-password harus berisi directive wire:then dan kita harus menentukan action dari directive tersebut, seperti contoh seperti berikut ini :

<x-jet-confirms-password wire:then="enableAdminMode">
    <x-jet-button type="button" wire:loading.attr="disabled">
        {{ __('Enable') }}
    </x-jet-button>
</x-jet-confirms-password>

Selanjutnya di dalam action yang kita panggil di atas adalah enableAdminMode, pertama kita harus memanggil method ensurePasswordIsConfirmed. Kurang lebih seperti berikut ini :

/**
 * Enable administration mode for user.
 *
 * @return void
 */
public function enableAdminMode()
{
    $this->ensurePasswordIsConfirmed();

    // ...
}

Gimana mudah bukan membuat password confirmation di Laravel Jetstream dengan stack Livewire.

Password Confirmation - Inertia

Jika kita menggunakan stack Inertia, kita harus memanggil component ConfirmsPassword yang sudah disediakan oleh Laravel Jetstream. Untuk menggunakannya kita bisa pakai @confirmed. Kurang lebih contoh sederhanya seperti berikut ini :

import JetConfirmsPassword from './Jetstream/ConfirmsPassword'

export default {
    components: {
        JetConfirmsPassword,
        // ...
    },
}

Selanjutnya kita panggil di dalam component bisa seperti berikut ini :

<jet-confirms-password @confirmed="enableAdminMode">
    <jet-button type="button" :class="{ 'opacity-25': enabling }" :disabled="enabling">
        Enable
    </jet-button>
</jet-confirms-password>

Di atas kita menggunakan @confirmed=“enableAdminMode" di mana akan mengarahkan kesebuah action dengan method enableAdminMode.

Terakhir pastikan route yang digunakan untuk membuat confirmation password sudah di sertakan sebuah middleware password.confirm, kurang lebih seperti berikut ini :

Route::post('/admin-mode', function () {
    // ...
})->middleware(['password.confirm']);

Customizing How Passwords Are Confirmed

Terkadang, kita mungkin ingin menyesuaikan bagaimana password pengguna di validasi selama konfirmasi. Untuk melakukannya, kita dapat menggunakan method Fortify::confirmPasswordsUsing.

Method ini menerima sebuah request dari pengguna yang sudah login dan inputan passsword dari sebuah form. Method Ini harus mengembalikan nilai true jika password valid.

use Illuminate\Support\Facades\Hash;
use Laravel\Fortify\Fortify;

Fortify::confirmPasswordsUsing(function ($user, string $password) {
    return Hash::check($password, $user->password);
});

Di artikel selanjutnya kita akan membahas tentang API support di Laravel Jetstream, dan untuk API yang digunakan di dalam Laravel Jetstream adalah Laravel Sanctum.


Fika Ridaul Maulayya
I'm Fika Ridaul Maulayya, a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR