Otentikasi Login Laravel PHP untuk Mengizinkan Pengguna melalui Rute Otentikasi

Otentikasi login adalah langkah pertama yang penting dalam sebuah aplikasi. Dengan mekanisme autentikasi yang ditingkatkan, aplikasi memungkinkan pengguna yang tepat masuk ke sistem.

Ada paket yang disediakan oleh Laravel untuk mengaktifkan otentikasi dalam suatu aplikasi. Ini melakukan otentikasi berbasis sesi untuk memvalidasi pengguna terdaftar. Saat mengirim panggilan jaringan ke Laravel API, ia melakukan otentikasi berbasis token.

Tutorial ini menjelaskan langkah-langkah untuk membuat proyek Laravel yang menangani otentikasi login. Ini menggunakan starter kit Laravel yang menyediakan perancah aplikasi dengan fitur otentikasi.

Kami dapat membagi artikel ini menjadi 5 bagian. Ini menjelaskan cara membangun aplikasi Laravel baru dengan login, opsi registrasi.

1. 1. Siapkan proyek dan database Laravel baru.
   2. Aktifkan otentikasi login Laravel dengan kit Breeze.
   3. Rute auth dan pengontrol khusus rute.
   4. Konfigurasi mailer seperti SMTP.
   5. Contoh screenshot aplikasi otentikasi login Laravel.

1. Siapkan proyek dan database Laravel baru

Dalam contoh pertama kami pada proyek PHP Laravel, kami telah melihat langkah-langkah dasar bagi pemula untuk menyiapkan aplikasi baru.

Ini mencakup serangkaian perintah terminal untuk mengunduh, menginstal, dan mengatur aplikasi proyek dengan database.

Bagian ini akan menunjukkan langkah-langkah untuk mengatur aplikasi otentikasi login Laravel. Kami telah melihat langkah serupa sebelumnya dalam konteks membuat CRUD di Laravel.

Langkah 1: Unduh aplikasi Laravel menggunakan Komposer

Perintah ini untuk membuat laravel-login-otentikasi memproyeksikan ke dalam akar pengembangan. Kemudian, buka folder proyek yang dibuat melalui cd laravel-login-authentication.

composer create-project --prefer-dist laravel/laravel laravel-login-authentication

Langkah 2: Jalankan php artisan serve perintah untuk membuat server pengembangan

Tangkapan layar berikut menunjukkan perintah untuk menyiapkan proyek dan server pengembangan.

Langkah 3: Konfigurasikan database

Impor proyek ini ke IDE Anda dan konfigurasikan file lingkungan Laravel. Kode di bawah ini menunjukkan bagian dari .env file contoh ini. Ini memiliki kredensial database yang dikonfigurasi sebagai berikut.

.env (basis data)

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-login
DB_USERNAME=root
DB_PASSWORD=

Langkah 4: Migrasikan skema tabel auth dan database seed

Setelah mengonfigurasi kredensial database, saatnya untuk menjalankan migrasi untuk mengimpor tabel. NS basis data/migrasi/ folder berisi kelas PHP untuk membuat tabel auth.

php artisan migrate

Langkah 5 (opsional): Seed tabel pengguna dengan data acak melalui Laravel Factory

Contoh ini menyemai database untuk menyisipkan catatan pengguna. Jalankan perintah berikut satu per satu untuk memasukkan data acak ke tabel auth.

php artisan tinker

Kemudian,

AppModelsUser::factory()->times(5)->create();

Ini menggunakan kelas UserFactory untuk menghasilkan catatan pengguna acak. Seperti yang ditentukan dalam perintah di atas, ia membuat 5 catatan dalam tabel pengguna dalam database.

Kelas PHP UserFactory.php muncul dengan aplikasi Laravel itu sendiri. Ini mendefinisikan fungsi untuk mengembalikan data baris acak untuk bidang yang dapat diisi dari model Pengguna.

database/pabrik/UserFactory.php

<?php

namespace DatabaseFactories;

use AppModelsUser;
use IlluminateDatabaseEloquentFactoriesFactory;
use IlluminateSupportStr;

class UserFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = User::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
        ];
    }

    /**
     * Indicate that the model's email address should be unverified.
     *
     * @return IlluminateDatabaseEloquentFactoriesFactory
     */
    public function unverified()
    {
        return $this->state(function (array $attributes) {
            return [
                'email_verified_at' => null,
            ];
        });
    }
}

Catatan: Penyemaian database dengan data pengguna ini merupakan langkah opsional. Ini untuk tujuan pengujian. Ini memuat data massal ke dalam basis data pengguna tanpa melalui pendaftaran.

2. Aktifkan otentikasi login Laravel dengan kit Breeze

Laravel menyediakan starter kit seperti Breeze, Jetstream. Mereka memberikan perancah aplikasi untuk memulai pengembangan dengan baik. Ini menghasilkan model, tampilan, pengontrol, rute untuk modul awal.

Contoh ini menggunakan Laravel Breeze untuk mengaktifkan otentikasi login untuk aplikasi. Ini menyediakan fitur otentikasi berikut untuk aplikasi Laravel.

1. Gabung
2. Registrasi
3. Pengaturan ulang kata sandi
4. Verifikasi email
5. konfirmasi kata kunci

Ini menggunakan template Blade dengan Tailwind CSS untuk tampilan layar autentikasi. Ini membuat rute autentikasi dan memungkinkan penyedia membuat autentikasi login berfungsi.

Langkah-langkah ini adalah menginstal kit Breeze untuk mengaktifkan otentikasi login Laravel.

Langkah 1: Gunakan komposer untuk mengunduh Laravel Breeze

Perintah ini mengunduh starter kit Laravel Breeze untuk aplikasi Anda.

composer require laravel/breeze --dev

Langkah 2: Instal Laravel Breeze

Jalankan perintah tukang PHP berikut untuk menginstal kit alat Breeze.

php artisan breeze:install

Kemudian, jalankan yang berikut ini npm perintah untuk mendapatkan semua aset dependen.

npm install
npm run dev
php artisan migrate

Kemudian, opsi otentikasi login Laravel harus diaktifkan di aplikasi. Rute autentikasi berikut akan dibuat untuk menelusuri halaman autentikasi.

• Masuk – /login
• Daftar – /daftar
• Pemulihan kata sandi – /lupa-kata sandi

Mulai server pengembangan. Kemudian tekan rute ini untuk mengalami alur otentikasi login Laravel.

3. Rute Auth dan pengontrol khusus rute

Semua rute auth dibuat di route/auth.php dengan menginstal starter kit ini. Ini mendefinisikan rute dengan pengontrol dan middleware khusus auth seperti di bawah ini.

Ini menggunakan pengontrol yang menangani fungsionalitas otentikasi login Laravel. Ini memposting permintaan ke pengontrol yang sesuai untuk melakukan fungsi seperti,

• Validasi sesi masuk
• Pendaftaran pengguna
• Verifikasi email
• Pengaturan ulang kata sandi
• konfirmasi kata kunci

route/auth.php

<?php

use AppHttpControllersAuthAuthenticatedSessionController;
use AppHttpControllersAuthConfirmablePasswordController;
use AppHttpControllersAuthEmailVerificationNotificationController;
use AppHttpControllersAuthEmailVerificationPromptController;
use AppHttpControllersAuthNewPasswordController;
use AppHttpControllersAuthPasswordResetLinkController;
use AppHttpControllersAuthRegisteredUserController;
use AppHttpControllersAuthVerifyEmailController;
use IlluminateSupportFacadesRoute;

Route::get('/register', [RegisteredUserController::class, 'create'])
                ->middleware('guest')
                ->name('register');

Route::post('/register', [RegisteredUserController::class, 'store'])
                ->middleware('guest');

Route::get('/login', [AuthenticatedSessionController::class, 'create'])
                ->middleware('guest')
                ->name('login');

Route::post('/login', [AuthenticatedSessionController::class, 'store'])
                ->middleware('guest');

Route::get('/forgot-password', [PasswordResetLinkController::class, 'create'])
                ->middleware('guest')
                ->name('password.request');

Route::post('/forgot-password', [PasswordResetLinkController::class, 'store'])
                ->middleware('guest')
                ->name('password.email');

Route::get('/reset-password/{token}', [NewPasswordController::class, 'create'])
                ->middleware('guest')
                ->name('password.reset');

Route::post('/reset-password', [NewPasswordController::class, 'store'])
                ->middleware('guest')
                ->name('password.update');

Route::get('/verify-email', [EmailVerificationPromptController::class, '__invoke'])
                ->middleware('auth')
                ->name('verification.notice');

Route::get('/verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
                ->middleware(['auth', 'signed', 'throttle:6,1'])
                ->name('verification.verify');

Route::post('/email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
                ->middleware(['auth', 'throttle:6,1'])
                ->name('verification.send');

Route::get('/confirm-password', [ConfirmablePasswordController::class, 'show'])
                ->middleware('auth')
                ->name('password.confirm');

Route::post('/confirm-password', [ConfirmablePasswordController::class, 'store'])
                ->middleware('auth');

Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])
                ->middleware('auth')
                ->name('logout');

4. Konfigurasi mailer seperti SMTP

Karena otentikasi login Laravel melalui Breeze mencakup fungsionalitas pengiriman email. Misalnya, verifikasi email dan fungsi pemulihan kata sandi mengirim email ke pengguna akhir.

Jadi, kita harus mengkonfigurasi opsi mailer di file .env. Juga, verifikasi file config/mail.php untuk memastikan bahwa opsi mailer menggunakan data yang dikonfigurasi dalam file .env. Jika tidak, edit konfigurasi mail.php. Kode di bawah ini mengonfigurasi SMTP sebagai mailer default untuk mengirim email.

.env (SMTP)

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

config/mail.php

<?php

return [

    'default' => env('MAIL_MAILER', 'smtp'),

    'mailers' => [
        'smtp' => [
            'transport' => 'smtp',
            'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
            'port' => env('MAIL_PORT', 587),
            'encryption' => env('MAIL_ENCRYPTION', 'tls'),
            'username' => env('MAIL_USERNAME'),
            'password' => env('MAIL_PASSWORD'),
            'timeout' => null,
            'auth_mode' => null,
        ],
    ],

    'from' => [
        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
        'name' => env('MAIL_FROM_NAME', 'Example'),
    ],

];

Setelah konfigurasi ini, kosongkan cache agar konfigurasi terbaru efektif.

php artisan config:cache
php artisan config:clear

5. Tangkapan layar aplikasi contoh otentikasi login Laravel

Setelah semua definisi dan konfigurasi, kita dapat mulai menjelajahi halaman auth. Dengan menginstal Breeze, tata letak akan menampilkan login, tautan daftar di header. Lihat tangkapan layar halaman selamat datang untuk melihat ini.

Templat halaman masuk

Starter kit menghasilkan login.blade.php file template di tampilan/aut direktori. Ini menampilkan formulir login yang elegan dengan library TailwindCSS.

Tangkapan layar menunjukkan formulir masuk dengan pesan peringatan untuk memberi tahu pengguna yang mencoba masuk.

Formulir pendaftaran pengguna

Ini menyediakan pendaftaran dasar dengan bidang minimal. Formulir di bawah ini menerima data untuk mendaftar dengan aplikasi laravel-login-authentication. Ini menggunakan validasi default browser untuk menerapkan pemeriksaan format email dan tidak kosong.

Ini melakukan validasi untuk memverifikasi keunikan email pengguna di antara pengguna yang ada. Itu juga memaksa untuk menyimpan kata sandi dengan panjang 8. Lihat tangkapan layar di bawah ini yang menampilkan respons validasi sisi server saat dikirim.

Fungsionalitas ini hadir dengan starter kit Laravel. Ini dapat dilewati jika Anda ingin melakukan tes cepat hanya pada alur masuk. Kami dapat menyemai database dan menggunakan data untuk memeriksa fungsi login.

Pemulihan Kata Sandi

Tangkapan layar di bawah ini menampilkan opsi lupa kata sandi yang disediakan oleh perancah otentikasi. Ini menerima email pengguna untuk membiarkan mereka memulihkan kata sandi yang terlupakan.

Aplikasi scaffold profil paket Laravel alternatif dengan sistem otentikasi

Ada banyak paket Laravel yang disediakan untuk mengaktifkan sistem otentikasi aplikasi. Kami telah melihat salah satunya yaitu, Laravel Breeze.

Yang lainnya tercantum sebagai berikut.

• Laravel JetStream
• Laravel Memperkuat

Paket otentikasi berbasis token untuk Laravel API adalah

Ini mendukung fitur seperti 2FA, manajemen tim, manajemen profil, dan lainnya. Paket otentikasi berbasis token menyediakan otentikasi untuk SPA, aplikasi seluler, dan lainnya.

Kesimpulan

Jadi, kami telah membuat contoh otentikasi login Laravel menggunakan kit Breeze. Tidak diragukan lagi, starter kit Laravel membantu memulai dengan mudah bagi pemula.

Kami juga dapat membuat sistem otentikasi login sendiri daripada menggunakan starter kit. Ini menghemat waktu dan menciptakan fondasi minimal saat membangun aplikasi Laravel dari awal.

Kami telah melihat proses langkah demi langkah untuk menjalankan perintah untuk mengaktifkan otentikasi. Selain itu, kami melihat tangkapan layar formulir elegan selama alur autentikasi login Laravel.

Kembali ke Atas