# Laravel Airlock: Otentikasi API Ringan untuk SPA

Saat membangun Single-Page Application (SPA) modern dengan backend Laravel, otentikasi API adalah hal yang krusial.  Kita ingin memastikan hanya pengguna yang sah yang dapat mengakses data dan fitur yang kita tawarkan. Nah, di sinilah **Laravel Airlock** hadir sebagai solusi yang *ringan*, *aman*, dan *mudah diimplementasikan*.  Artikel ini akan membahas tuntas tentang Airlock, mulai dari apa itu, mengapa Anda harus menggunakannya, hingga cara implementasinya langkah demi langkah.  Siap menyelam lebih dalam? Mari kita mulai!

## 1. Apa itu Laravel Airlock dan Mengapa Begitu Penting untuk SPA?

**Laravel Airlock** (sekarang lebih dikenal sebagai Laravel Sanctum) adalah paket otentikasi API yang dirancang khusus untuk SPA (Single-Page Applications), aplikasi seluler, dan API sederhana.  Dulu bernama Airlock, kini sudah di *merge* menjadi Sanctum, tetapi konsep dan cara kerjanya masih sangat mirip.  Sanctum/Airlock memungkinkan kita mengotentikasi pengguna aplikasi kita menggunakan token, yang kemudian digunakan untuk setiap permintaan API yang dibuat oleh SPA atau aplikasi seluler.

Mengapa otentikasi itu penting untuk SPA? Bayangkan begini: tanpa otentikasi yang tepat, siapa pun bisa mengakses data sensitif aplikasi Anda, mengubah informasi, atau bahkan merusak sistem secara keseluruhan.  Otentikasi bertindak sebagai gerbang yang memastikan hanya pengguna yang memiliki izin yang bisa masuk.

Singkatnya, Airlock/Sanctum adalah pilihan yang ideal karena:

*   **Ringan:** Tidak membebani aplikasi Anda dengan kompleksitas yang tidak perlu.
*   **Aman:** Menyediakan mekanisme yang aman untuk memverifikasi identitas pengguna.
*   **Mudah Diimplementasikan:** Dokumentasi Laravel yang jelas dan komunitas yang besar memudahkan proses implementasi.
*   **Cocok untuk SPA:** Dirancang khusus untuk bekerja mulus dengan SPA yang menggunakan JavaScript framework seperti Vue.js, React, atau Angular.
*   **Stateful dan Stateless:** Mendukung otentikasi berbasis *cookie* (stateful) untuk SPA dan otentikasi berbasis *token* (stateless) untuk API.

## 2. Keuntungan Menggunakan Laravel Airlock (Sanctum) untuk Otentikasi API

Mengapa Anda harus memilih Laravel Airlock/Sanctum dibandingkan solusi otentikasi lainnya? Berikut adalah beberapa keuntungan utamanya:

*   **Sederhana dan Mudah Digunakan:**  Proses instalasi dan konfigurasi relatif mudah, bahkan untuk developer pemula. Dokumentasi Laravel sangat komprehensif.
*   **Keamanan Tingkat Tinggi:** Menggunakan *token* yang aman untuk mengotentikasi pengguna, meminimalkan risiko pencurian identitas atau serangan *man-in-the-middle*.
*   **Otentikasi Multi-Domain (Cookie-Based):**  Ideal untuk SPA yang berjalan di domain yang berbeda dari backend API Laravel Anda. Airlock/Sanctum menangani masalah *CORS* dengan anggun menggunakan *cookie* yang aman.
*   **Fleksibel:** Dapat digunakan untuk mengotentikasi SPA, aplikasi seluler, dan API tradisional.
*   **Integrasi yang Mulus dengan Laravel:** Dirancang khusus untuk Laravel, sehingga proses integrasi berjalan sangat lancar dan efisien.
*   **Token Personal Access:**  Memungkinkan pengguna membuat token personal access untuk aplikasi pihak ketiga atau integrasi lainnya. Ini berguna untuk memberikan akses terbatas ke API Anda tanpa mengungkapkan kredensial utama pengguna.
*   **CSRF Protection:**  Menyediakan perlindungan terhadap serangan *Cross-Site Request Forgery (CSRF)*, yang sangat penting untuk keamanan aplikasi web.

## 3. Persiapan Instalasi dan Konfigurasi Laravel Airlock (Sanctum)

Sebelum kita mulai mengimplementasikan Airlock/Sanctum, pastikan Anda sudah memiliki:

*   **Laravel Project:** Aplikasi Laravel yang sudah berjalan.  Jika belum, buat project Laravel baru dengan perintah `composer create-project laravel/laravel your-project-name`.
*   **Database:**  Database MySQL atau PostgreSQL yang sudah terkonfigurasi di aplikasi Laravel Anda.
*   **Composer:**  Manajer paket untuk PHP.

Berikut langkah-langkah instalasi dan konfigurasinya:

1.  **Install Package Sanctum:** Buka terminal Anda dan arahkan ke direktori project Laravel Anda. Jalankan perintah berikut:

    ```bash
    composer require laravel/sanctum

2. Publish Konfigurasi dan Migrasi: Setelah package terinstall, publikasikan file konfigurasi dan migrasi dengan perintah:

   php artisan vendor:publish --provider="LaravelSanctumSanctumServiceProvider"

3. Migrasi Database: Jalankan migrasi untuk membuat tabel yang dibutuhkan oleh Airlock/Sanctum:

   php artisan migrate

4. Konfigurasi Model User: Pastikan model AppModelsUser Anda menggunakan trait LaravelSanctumHasApiTokens. Buka file AppModelsUser.php dan tambahkan trait berikut:

   <?php
   
   namespace AppModels;
   
   use IlluminateContractsAuthMustVerifyEmail;
   use IlluminateDatabaseEloquentFactoriesHasFactory;
   use IlluminateFoundationAuthUser as Authenticatable;
   use IlluminateNotificationsNotifiable;
   use LaravelSanctumHasApiTokens;  // Tambahkan trait ini
   
   class User extends Authenticatable
   {
       use HasApiTokens, HasFactory, Notifiable;
   
       // ...
   }

5. Konfigurasi Middleware (opsional tapi direkomendasikan): Di file app/Http/Kernel.php, tambahkan middleware EnsureFrontendRequestsAreStateful ke grup api:

   protected $middlewareGroups = [
       'api' => [
           AppHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
           'throttle:api',
           IlluminateRoutingMiddlewareSubstituteBindings::class,
       ],
       // ...
   ];

   Buat middleware EnsureFrontendRequestsAreStateful jika belum ada:

   php artisan make:middleware EnsureFrontendRequestsAreStateful

   Dan isi middleware tersebut dengan logika yang mengizinkan permintaan CORS dan menyetel cookie. Contohnya:

   <?php
   
   namespace AppHttpMiddleware;
   
   use Closure;
   use IlluminateHttpRequest;
   use IlluminateSupportFacadesConfig;
   
   class EnsureFrontendRequestsAreStateful
   {
       /**
        * Handle an incoming request.
        *
        * @param  IlluminateHttpRequest  $request
        * @param  Closure(IlluminateHttpRequest): (IlluminateHttpResponse|IlluminateHttpRedirectResponse)  $next
        * @return IlluminateHttpResponse|IlluminateHttpRedirectResponse
        */
       public function handle(Request $request, Closure $next)
       {
           $origin = $request->header('Origin');
   
           if ($origin && in_array($origin, config('cors.allowed_origins'))) { //Sesuaikan allowed_origins dengan domain SPA Anda
               Config::set('sanctum.stateful', [$origin]);
               header('Access-Control-Allow-Origin: ' . $origin);
               header('Access-Control-Allow-Credentials: true');
               header('Access-Control-Allow-Headers: Content-Type, Authorization');
               header('Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS');
   
               if ($request->isMethod('OPTIONS')) {
                   return response('', 200);
               }
           }
   
           return $next($request);
       }
   }

   Pastikan Anda telah mengkonfigurasi CORS dengan benar di config/cors.php dan menambahkan domain SPA Anda ke allowed_origins. Contoh:

   'allowed_origins' => [
       'http://localhost:3000', // Contoh domain SPA
       'https://your-spa-domain.com',
   ],

4. Membuat API Endpoint untuk Login dan Registrasi

Setelah konfigurasi selesai, mari kita buat API endpoint untuk login dan registrasi. Ini akan menjadi titik masuk bagi SPA Anda untuk mendapatkan token otentikasi.

1. Membuat Controller: Buat controller untuk menangani login dan registrasi. Kita bisa menggunakan perintah php artisan make:controller AuthController.

2. Implementasi Login: Di dalam AuthController, buat method login yang menerima username (atau email) dan password dari permintaan. Gunakan Auth::attempt untuk memvalidasi kredensial. Jika berhasil, buat token menggunakan method createToken dari model User dan kembalikan token tersebut.

   <?php
   
   namespace AppHttpControllers;
   
   use IlluminateHttpRequest;
   use IlluminateSupportFacadesAuth;
   use AppModelsUser;
   
   class AuthController extends Controller
   {
       public function login(Request $request)
       {
           $credentials = $request->validate([
               'email' => 'required|email',
               'password' => 'required',
           ]);
   
           if (Auth::attempt($credentials)) {
               $user = Auth::user();
               $token = $user->createToken('auth_token')->plainTextToken;
   
               return response()->json([
                   'access_token' => $token,
                   'token_type' => 'Bearer',
               ]);
           }
   
           return response()->json([
               'message' => 'Invalid credentials'
           ], 401);
       }
   
       // ... (Method registrasi akan ditambahkan di bawah)
   }

3. Implementasi Registrasi: Buat method register di AuthController yang menerima data registrasi (nama, email, password) dari permintaan. Validasi data, buat user baru, dan buat token seperti pada method login.

   public function register(Request $request)
   {
       $validatedData = $request->validate([
           'name' => 'required|max:255',
           'email' => 'required|email|unique:users',
           'password' => 'required|confirmed',
       ]);
   
       $user = User::create([
           'name' => $validatedData['name'],
           'email' => $validatedData['email'],
           'password' => bcrypt($validatedData['password']),
       ]);
   
       $token = $user->createToken('auth_token')->plainTextToken;
   
       return response()->json([
           'access_token' => $token,
           'token_type' => 'Bearer',
       ]);
   }

4. Membuat Route: Daftarkan route untuk endpoint login dan registrasi di file routes/api.php.

   <?php
   
   use IlluminateHttpRequest;
   use IlluminateSupportFacadesRoute;
   use AppHttpControllersAuthController;
   
   Route::post('/register', [AuthController::class, 'register']);
   Route::post('/login', [AuthController::class, 'login']);
   
   // ... (Route untuk endpoint yang membutuhkan otentikasi akan ditambahkan di bawah)

5. Melindungi API Endpoint dengan Laravel Airlock (Sanctum)

Sekarang, mari kita lindungi API endpoint yang hanya boleh diakses oleh pengguna yang sudah terotentikasi.

1. Menggunakan Middleware auth:sanctum: Untuk melindungi sebuah route, gunakan middleware auth:sanctum. Tambahkan middleware ini ke route yang ingin Anda lindungi.

   Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
       return $request->user();
   });

   Route di atas hanya dapat diakses oleh pengguna yang sudah terotentikasi dan memiliki token yang valid.

2. Contoh Endpoint yang Dilindungi: Berikut contoh endpoint sederhana yang mengembalikan data user yang sedang login:

   Route::middleware('auth:sanctum')->get('/profile', function (Request $request) {
       return response()->json($request->user());
   });

   Pastikan Anda menambahkan route ini di file routes/api.php setelah route login dan registrasi.

6. Logout dan Pencabutan Token dengan Laravel Airlock (Sanctum)

Penting untuk memberikan opsi logout kepada pengguna dan mencabut token mereka. Ini akan memastikan bahwa mereka tidak dapat lagi mengakses API yang dilindungi setelah logout.

1. Membuat Endpoint Logout: Buat endpoint logout di AuthController yang mencabut semua token yang dimiliki oleh user yang sedang login.

   public function logout(Request $request)
   {
       $request->user()->tokens()->delete();
   
       return response()->json([
           'message' => 'Logged out successfully'
       ]);
   }

2. Mendaftarkan Route Logout: Daftarkan route logout di file routes/api.php dan lindungi dengan middleware auth:sanctum.

   Route::middleware('auth:sanctum')->post('/logout', [AuthController::class, 'logout']);

7. Implementasi di Sisi Frontend (SPA)

Setelah backend selesai, kita perlu mengimplementasikan otentikasi di sisi frontend (SPA). Berikut adalah contoh umum menggunakan JavaScript:

1. Menyimpan Token: Setelah berhasil login atau registrasi, simpan token yang diterima dari API di local storage atau cookie. Local storage lebih umum digunakan untuk token.

   // Contoh menggunakan Fetch API
   fetch('/api/login', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           email: '[email protected]',
           password: 'password'
       })
   })
   .then(response => response.json())
   .then(data => {
       if (data.access_token) {
           localStorage.setItem('authToken', data.access_token);
           // Redirect ke halaman utama
       } else {
           // Tampilkan pesan error
       }
   });

2. Mengirim Token dalam Header: Setiap kali Anda membuat permintaan ke API yang dilindungi, sertakan token di header Authorization dengan format Bearer <token>.

   // Contoh menggunakan Fetch API untuk mendapatkan profil user
   const token = localStorage.getItem('authToken');
   
   fetch('/api/profile', {
       headers: {
           'Authorization': 'Bearer ' + token
       }
   })
   .then(response => response.json())
   .then(data => {
       // Tampilkan data profil
   });

3. Menghapus Token Saat Logout: Saat logout, hapus token dari local storage atau cookie.

   localStorage.removeItem('authToken');
   // Redirect ke halaman login

4. Menangani Error 401 (Unauthorized): Jika API mengembalikan error 401 (Unauthorized), ini berarti token tidak valid atau sudah kadaluarsa. Anda perlu mengarahkan pengguna kembali ke halaman login.

8. Mengatasi Masalah Umum dan Tips Troubleshooting Laravel Airlock (Sanctum)

Meskipun Airlock/Sanctum mudah digunakan, terkadang Anda mungkin menghadapi beberapa masalah. Berikut adalah beberapa masalah umum dan cara mengatasinya:

• CORS Issues: Pastikan CORS telah dikonfigurasi dengan benar di backend Laravel Anda. Pastikan domain SPA Anda terdaftar di config/cors.php. Periksa juga header yang dikirim oleh server.
• Token Tidak Valid: Pastikan token yang Anda kirim di header Authorization valid dan belum dicabut. Coba login ulang untuk mendapatkan token baru.
• Middleware Tidak Berfungsi: Pastikan middleware auth:sanctum sudah terdaftar di app/Http/Kernel.php dan diterapkan dengan benar ke route yang ingin dilindungi.
• Cookie Tidak Terkirim: Jika Anda menggunakan otentikasi berbasis cookie, pastikan cookie diatur dengan benar dan dikirim dengan setiap permintaan. Periksa domain dan path cookie. Pastikan juga SESSION_DOMAIN dan SANCTUM_STATEFUL_DOMAINS di .env telah dikonfigurasi dengan benar.
• Pesan Error yang Tidak Jelas: Aktifkan debug mode di Laravel (APP_DEBUG=true di .env) untuk mendapatkan pesan error yang lebih detail.

Tips Troubleshooting:

• Periksa Log Laravel: Log Laravel (storage/logs/laravel.log) seringkali berisi informasi berguna tentang kesalahan yang terjadi.
• Gunakan Developer Tools Browser: Developer tools browser (Chrome DevTools, Firefox Developer Tools) dapat membantu Anda memeriksa header permintaan dan respons, cookie, dan pesan error JavaScript.
• Cari di Dokumentasi Laravel: Dokumentasi Laravel adalah sumber informasi yang sangat baik. Cari kata kunci yang relevan untuk masalah yang Anda hadapi.
• Tanya di Komunitas Laravel: Jika Anda masih mengalami kesulitan, jangan ragu untuk bertanya di komunitas Laravel (forum, Stack Overflow, dll.).

9. Laravel Airlock (Sanctum) vs. Laravel Passport: Kapan Menggunakan yang Mana?

Laravel memiliki dua paket otentikasi API populer: Airlock/Sanctum dan Passport. Kapan sebaiknya Anda menggunakan Airlock/Sanctum dan kapan sebaiknya menggunakan Passport?

• Laravel Airlock (Sanctum): Ideal untuk SPA, aplikasi seluler, dan API sederhana yang tidak memerlukan fitur otentikasi OAuth2 yang kompleks. Airlock/Sanctum lebih ringan dan mudah diimplementasikan. Fokus pada otentikasi berbasis token atau cookie untuk aplikasi yang first-party (aplikasi yang Anda kendalikan sepenuhnya).
• Laravel Passport: Cocok untuk aplikasi yang memerlukan fitur otentikasi OAuth2 yang lengkap, seperti otentikasi pihak ketiga (misalnya, “Login dengan Google” atau “Login dengan Facebook”). Passport lebih kompleks dan memakan sumber daya, tetapi menyediakan fleksibilitas dan keamanan yang lebih tinggi untuk skenario yang lebih kompleks. Sangat baik untuk membangun API yang akan digunakan oleh aplikasi pihak ketiga (third-party).

Secara umum, jika Anda membangun SPA atau aplikasi seluler yang hanya akan mengakses API Anda sendiri, Airlock/Sanctum adalah pilihan yang lebih baik. Jika Anda membangun API yang akan digunakan oleh aplikasi pihak ketiga, Passport mungkin lebih sesuai.

10. Tips Keamanan Tambahan untuk Otentikasi API dengan Laravel Airlock (Sanctum)

Selain menggunakan Laravel Airlock/Sanctum, ada beberapa tips keamanan tambahan yang dapat Anda terapkan untuk meningkatkan keamanan otentikasi API Anda:

• Gunakan HTTPS: Pastikan semua komunikasi antara SPA Anda dan API Laravel Anda menggunakan HTTPS. Ini akan mengenkripsi data yang dikirimkan dan mencegah serangan man-in-the-middle.
• Validasi Input dengan Ketat: Validasi semua input yang diterima dari pengguna untuk mencegah serangan SQL injection, Cross-Site Scripting (XSS), dan serangan lainnya.
• Gunakan Password yang Kuat: Enkripsi password pengguna menggunakan fungsi hashing yang kuat seperti bcrypt.
• Implementasikan Rate Limiting: Batasi jumlah permintaan API yang dapat dibuat oleh pengguna dalam periode waktu tertentu untuk mencegah serangan Denial-of-Service (DoS).
• Gunakan CSRF Protection: Lindungi aplikasi Anda dari serangan Cross-Site Request Forgery (CSRF). Airlock/Sanctum menyediakan perlindungan CSRF out-of-the-box untuk otentikasi berbasis cookie.
• Monitor Log Secara Teratur: Pantau log aplikasi Anda secara teratur untuk mendeteksi aktivitas yang mencurigakan.
• Update Laravel dan Package Secara Teratur: Selalu gunakan versi terbaru Laravel dan package yang Anda gunakan untuk mendapatkan perbaikan keamanan terbaru.
• Konfigurasi CORS dengan Hati-hati: Konfigurasi CORS dengan benar untuk hanya mengizinkan permintaan dari domain yang Anda percayai. Hindari menggunakan wildcard (*) untuk allowed_origins.
• Gunakan Token dengan Masa Berlaku Singkat: Pertimbangkan untuk menggunakan token dengan masa berlaku yang lebih pendek dan mengimplementasikan mekanisme refresh token untuk memperbarui token secara otomatis tanpa mengharuskan pengguna untuk login ulang.

11. Kesimpulan: Laravel Airlock (Sanctum) Pilihan Tepat untuk Otentikasi SPA Anda

Laravel Airlock (Sanctum) adalah solusi otentikasi API yang ringan, aman, dan mudah diimplementasikan untuk SPA dan aplikasi lainnya. Dengan implementasi yang tepat, Anda dapat melindungi API Anda dari akses yang tidak sah dan memastikan hanya pengguna yang sah yang dapat mengakses data dan fitur yang Anda tawarkan. Dengan panduan ini, Anda siap untuk mengamankan aplikasi Laravel SPA Anda dengan Laravel Sanctum (dulunya Airlock). Selamat mencoba!

Ingatlah untuk selalu mengikuti praktik keamanan terbaik dan terus memperbarui pengetahuan Anda tentang keamanan aplikasi web. Keamanan adalah proses berkelanjutan, bukan tujuan akhir.