Tutorial Laravel Sanctum dan Vue Js Authentication #3 - Membuat Controller Login


Tutorial Laravel Sanctum dan Vue Js Authentication #3 - Membuat Controller Login

Halo teman-teman semuanya, setelah sebelumnya kita sudah berhasil menginstall dan meng-konfigurasi Laravel Sanctum sekarang kita lanjutkan untuk membuat controller untuk melakukan Authentication.

Langkah 1 - Membuat Controller Login

Silahkan jalankan perintah di bawah ini untuk membuat controller login.

php artisan make:controller Api\\LoginController

Perintah di atas akan membuat controller baru di dalam folder app/Http/Controllers/Api/LoginController.php dan silahkan buka file tersebut ubah kodenya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Api;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;

class LoginController extends Controller
{    
    /**
     * index
     *
     * @param  mixed $request
     * @return void
     */
    public function index(Request $request)
    {
        $request->validate([
            'email' => 'required|email',
            'password' => 'required',
        ]);

        $user= User::where('email', $request->email)->first();
        
            if (!$user || !Hash::check($request->password, $user->password)) {
                return response([
                    'success'   => false,
                    'message' => ['These credentials do not match our records.']
                ], 404);
            }
        
            $token = $user->createToken('ApiToken')->plainTextToken;
        
            $response = [
                'success'   => true,
                'user'      => $user,
                'token'     => $token
            ];
        
        return response($response, 201);
    }
    
    /**
     * logout
     *
     * @return void
     */
    public function logout()
    {
        auth()->logout();
        return response()->json([
            'success'    => true
        ], 200);
    }

}

Di atas kita import model User terlebih dahulu, karena kita nanti akan menggunakan model ini untuk proses Authentication.

use App\User;

Kemudian kita juga import Http Request dari Laravel

use Illuminate\Http\Request;

Dan kita juga import Facades Hash dari Laravel, ini kita akan gunakan untuk pengecekan password Hash daat proses login.

use Illuminate\Support\Facades\Hash;

Kemudian di atas kita membuat 2 function/method yaitu :

  • function index
  • function logout

function index

fungsi ini digunakan untuk melakukan proses login dan disini kita menggunakan validasi untuk email dan password, kurang lebih seperti berikut ini :

$request->validate([
   'email'    => 'required|email',
   'password' => 'required',
]);

Setelah proses validasi terpenuhi kita bisa melakukan authentication, jika proses authentication berhasil maka akan membuat token dengan kode berikut ini :

$token = $user->createToken('ApiToken')->plainTextToken;

Dan akan mengembalikan response kurang lebih seperti berikut ini :

$response = [
   'success' => true,
   'user'    => $user,
   'token'   => $token
];

Jika proses authentication gagal maka akan mengembalikan response kurang lebih seperti berikut ini :

return response([
    'success' => false,
    'message' => ['These credentials do not match our records.']
], 404);

function logout

Fungsi ini digunakan untuk melakukan logout dengan mengembalikan sebuah response kurang lebih seperti beirkut ini :

return response()->json([
   'success' => true
], 200);

Langkah 2 - Menambahkan Route

Sekarang kita akan menambahkan route baru untuk proses login dan logout. Silahkan buka file routes/api.php kemudian tambahkan kode berikut ini :

Route::post('/login', 'Api\LoginController@index');
Route::get('/logout', 'Api\LoginController@logout');

Dan kita juga akan merubah default route untuk mendapatkan data user menggunakan Sanctum. Ubah kode berikut ini :

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

Menjadi seperti berikut ini :

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

Langkah 3 - Uji Coba

Sekarang kita akan lakukan uji coba untuk melakukan Authentication menggunakan Postman. Silahkan download terlebih dahulu Postman dari situs resminya di : https://www.postman.com/

Uji Coba Login

Silahkan masukkan endpoint berikut ini http://localhost:8000/api/login di dalam Postman dan pada method silahkan gunakan POST dan pada header tambahkan key Content-Type dengan value application/json dan key Accept dengan value application/json. Kurang lebih seperti berikut ini :


Dan kemudian pada body silahkan pilih form-data dan masukkan key email dan key password, kurang lebih seperti berikut ini :


Kemudian kita bisa coba klik SEND dan kurang lebih hasilnya seperti berikut ini :


Di atas akan menampilkan response validasi dari Laravel, karena kita belum memasukkan value dari email dan password. Kemudian jika kita isi email dan password, maka kita akan mendapatkan success response dengan Token, kurang lebih seperti berikut ini :


Jika kita perhatikan dari hasil response login success di atas, kita mendapatkan Token dan Token ini akan kita gunakan untuk mendapatkan data data dari database.

Uji Coba Mendapatkan Data User

Silahkan masukkan endpoint berikut ini di Potsman http://localhost:8000/api/user dan untuk methosnya silahkan gunakan GET dan pada header kita akan menambahkan 3 key yaitu :

  • Content-Type
  • Accept
  • Authorization

Untuk Content-Type silahkan valuenya diisi dengan application/json, kemudian untuk Accept diisi dengan application/json dan untuk Authorization silahkan diisi dengan Bearer + Token. Token-nya bisa di ambil dari hasil response yang ada di login. Kurang lebih seperti berikut ini :


Kemudian jika kita klik SEND maka hasil responsenya kurang lebih seperti berikut ini :


Langkah selanjutnya kita akan coba integrasikan menggunakan project dari Vue Js untuk melakukan Authentication.


EBOOK MEMBANGUN WEBSITE SEKOLAH DENGAN LARAVEL, VUE JS DAN BOOTSTRAP 5 : https://bit.ly/ebook-laravel-vue-js


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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