Pendaftaran dan Login Menggunakan Laravel API Authentication Passport

Pada catatan kali ini akan dibuat sebuah Laravel sebagai server API untuk Login Register dan Logout, dimana klien yang akan menggunakan layanan dari server laravel ini dibuat dengan menggunakan VueJS SPA.

Laravel sudah lebih dulu memudahkan untuk melakukan otentikasi melalui form login konvensional, tapi bagaimana pendaftaran dan Login dengan API? API biasanya menggunakan token untuk mengautentikasi pengguna dan tidak mempertahankan status sesi di antara permintaan. Laravel membuat otentikasi API menjadi ssangat mudah dengan menggunakan Laravel Passport, yang menyediakan implementasi server OAuth2 lengkap untuk aplikasi Laravel Anda dalam hitungan menit.

Bagaimana menggunakan Laravel Passport dan melakukan pendaftaran juga login ikuti langkah-langkahnya pada catatan dibawah ini.

Pertama installasi Laravel

Install pasport via composer

Kemudian migrate database

lalu jalankan passport:install untuk membuat encription key

setelah itu buat project vueJS baru

install vuex dan axios

pada Laravel buat sebuah Controller

kemudian pada api router

masukan kode berikut ini

pada .env masukan variabel berikut ini

dimana PASSPORT_CLIENT_SECRET didapatkan dari table oauth_clients berikut ini:

tambahkan paket guzzlehttp pada laravel

juga tambahkan paket barryvdh/laravel-cors pada laravel

buka file Kernel.php dan masukan \Barryvdh\Cors\HandleCors::class, pada protected middleware

publish config/cors.php

buka file config/auth.php dan ganti guards api driver menjadi passport

kembali pada vue project, buat sebuah file bernama Signup.vue dan masukan kode berikut ini

dan buat pula file Signin.vue dan masukan kode berikut

buat juga file Signout.vue dan masukan kode berikut ini

isi dari file store adalah sebagai berikut

dan juga router sebagai berikut