Tutorial Authentication dengan React.js & Laravel JWT #3 : Membuat RESful API Authentication


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

Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bersama-sama bagaimana cara melakukan proses installasi dan konfigurasi JWT di dalam project Laravel. Di artikel kali ini kita semua akan belajar bagaimana cara membuat sebuah RESTful API untuk proses register dan login di dalam Laravel. Dimana untuk proses login akan menerapkan JWT atau Json Web Token untuk melakukan generate sebuah API token.

Langkah 1 - Membuat Controller Register

Pertama-tama kita akan membuat sebuah controller untuk proses register. Disini kita akan mengimplementasikan Single Action Controller. Konsep ini digunakan jika kita ingin menjadikan sebuah class controller hanya menangani satu action saja. Biasanya karena kode di dalam controller tersebut sangat kompleks dan kita bisa fokus ke dalam 1 controller saja. Silahkan jalankan perintah berikut ini di dalam terminal / CMD dan pastikan berada di dalam folder project Laravel.

php artisan make:controller Api/RegisterController -i

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file baru dengan nama RegisterController.php di dalam folder app/Http/Controllers/Api. Dan kita tambahkan flag -i, artinya controller tersebut akan di set menjadi invoke atau single action.

Sekarang, silahkan buka file tersebut dan ubah semua kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Api;

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

class RegisterController extends Controller
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        //set validation
        $validator = Validator::make($request->all(), [
            'name'      => 'required',
            'email'     => 'required|email|unique:users',
            'password'  => 'required|min:8|confirmed'
        ]);

        //if validation fails
        if ($validator->fails()) {
            return response()->json($validator->errors(), 422);
        }

        //create user
        $user = User::create([
            'name'      => $request->name,
            'email'     => $request->email,
            'password'  => bcrypt($request->password)
        ]);

        //return response JSON user is created
        if($user) {
            return response()->json([
                'success' => true,
                'user'    => $user,  
            ], 201);
        }

        //return JSON process insert failed 
        return response()->json([
            'success' => false,
        ], 409);
    }
}

Di atas, pertama kita import model User, karena kita akan menggunakan model User untuk menyimpan data user baru.

use App\Models\User;

Selanjutnya, kita import Facades Validator, ini akan digunakan untuk membuat rule validasi di dalam Rest API.

use Illuminate\Support\Facades\Validator;

Kemudian di dalam method __invoke, pertama kita membuat beberapa rule validasi, kurang lebih seperti berikut ini :

//set validation
$validator = Validator::make($request->all(), [
    'name'      => 'required',
    'email'     => 'required|email|unique:users',
    'password'  => 'required|min:8|confirmed'
]);

Dari rule validasi di atas, kurang lebih penjelasannya seperti berikut ini :

ATTRIBUE VALIDATION DESCRIPTION
name required field/input wajib diisi.
email required field/input wajib diisi.
email field/input harus memili format email.
unique:users field/input bersifat unik di dalam table users.
password required field/input wajib diisi.
min:8 field/input minimal 8 karakter
confirmed field/input harus mempunyai inputan lagi untuk konfirmasi data yang sama.

Jika validasi di atas tidak terpenuhi, maka akan mengembalikan sebuah response error kurang lebih seperti berikut ini :

if ($validator->fails()) {
  return response()->json($validator->errors(), 422);
}

Response error akan bersifat dinamis, yaitu menampilkan pesan error sesuai dengan kondisi yang di dapatkan.

Tapi, jika data yang di masukkan sudah sesuai dengan validasi di atas, maka kita akan melakukan proses insert data menggunakan Eloquent. Kurang lebih seperti berikut ini :

//create user
$user = User::create([
    'name'      => $request->name,
    'email'     => $request->email,
    'password'  => bcrypt($request->password)
]);

Setelah itu, kita membuat sebuah kondisi untuk memastikan apakah proses insert data di atas berhasil. Kurang lebih seperti berkut ini :

//return response JSON user is created
if($user) {
    return response()->json([
        'success' => true,
        'user'    => $user,  
    ], 201);
}

Jika data gagal di insert ke dalam database, maka akan mengembalikan JSON dengan format seperti berikut ini :

//return JSON process insert failed 
return response()->json([
    'success' => false,
], 409);

Langkah 2 - Menambahkan Route Api Register

Setelah berhasil menambahkan controller untuk register, sekarang kita akan lanjutkan untuk membuat sebuah route untuk register. Silahkan buka file routes/api.php, kemudian ubah kode-nya menjadi seperti berikut ini :

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/**
 * route "/register"
 * @method "POST"
 */
Route::post('/register', App\Http\Controllers\Api\RegisterController::class)->name('register');

Dari perubahan kode route, di atas kita menambahkan 1 route baru dengan method POST yaitu /register. Dimana route tersebut kita arahkan ke dalam controller App\Http\Controllers\Api\RegisterController. Dan route tersebut kita berikan nama register.

Langkah 3 - Membuat Controller Login

Setelah berhasil membuat controller dan route untuk register, maka sekarang kita akan lanjutkan untuk membuat controller dan juga route untuk proses login.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel.

php artisan make:controller Api/LoginController -i

Perintah di atas digunakan untuk membuat / men-generate sebuah controller baru dengan nama LoginController dan kita berikan flag -i, yang artinya kita akan jadikan sebagai __invoke atau single action controller.

Silahkan buka file tersebut di dalam app/Http/Controllers/Api/LoginController.php, kemudian ubah semua kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Api;

use Illuminate\Http\Request;
use Tymon\JWTAuth\Facades\JWTAuth;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Validator;

class LoginController extends Controller
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        //set validation
        $validator = Validator::make($request->all(), [
            'email'     => 'required',
            'password'  => 'required'
        ]);

        //if validation fails
        if ($validator->fails()) {
            return response()->json($validator->errors(), 422);
        }

        //get credentials from request
        $credentials = $request->only('email', 'password');

        //if auth failed
        if(!$token = JWTAuth::attempt($credentials)) {
            return response()->json([
                'success' => false,
                'message' => 'Email atau Password Anda salah'
            ], 401);
        }

        //if auth success
        return response()->json([
            'success' => true,
            'user'    => auth()->user(),    
            'token'   => $token   
        ], 200);
    }
}

Dari perubahan kode di dalam controller Login di atas, pertama kita import Facades JWTAuth, karena akan kita gunakan untuk proses otentikasi.

use Tymon\JWTAuth\Facades\JWTAuth;

Selanjutnya, karena kita akan membutuhkan validasi, maka kita juga import Facades Validator dari Laravel.

use Illuminate\Support\Facades\Validator;

Dan di dalam method __invoke, pertama kita akan melakukan definisi sebuah validasi terlebih dahulu, dimana validasi ini akan memastikan bahwa data yang dikirmkan sudah benar-benar sesuai dengan yang diharapkan.

//set validation
$validator = Validator::make($request->all(), [
    'email'     => 'required',
    'password'  => 'required'
]);

Dari rule validasi di atas, kurang lebih penjelasannya seperti berikut ini :

ATTRIBUE VALIDATION DESCRIPTION
email required field/input wajib diisi.
password required field/input wajib diisi.

Jika validasi di atas tidak terpenuhi, maka akan mengembalikan sebuah response error kurang lebih seperti berikut ini :

if ($validator->fails()) {
  return response()->json($validator->errors(), 422);
}

Tapi, jika validasi sudah sesuai dengan yang diharapkan, maka selanjutnya kita membuat sebuah variable dengan nama credentials, dimana variable tersebut akan kita gunakan untuk menyimpan data yang dikirimkan dari request berupa email dan password.

//get credentials from request
$credentials = $request->only('email', 'password');

Setelah itu, jika proses otentikasi gagal dilakukan menggunakan JWT, maka kita aka mengembalikan sebuah response JSON dengan status success false.

//if auth failed
if(!$token = JWTAuth::attempt($credentials)) {
     return response()->json([
       'success' => false,
       'message' => 'Email atau Password Anda salah'
     ], 401);
}

Tapi, jika proses otentikasi berhasil dilakukan, maka kita aakan mengembalikan sebuah response dengan status success true dan memerikan informasi data user yang login, beserta sebuah token yang di generate oleh JWT.

//if auth success
return response()->json([
    'success' => true,
    'user'    => auth()->user(),    
    'token'   => $token   
], 200);

Langkah 4 - Menambahkan Route Login

Sekarang kita lanjutkan untuk menambahkan route untuk login. Silahkan buka file routes/api.php, kemudian ubah kode-nya menjadi seperti berikut ini :

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/**
 * route "/register"
 * @method "POST"
 */
Route::post('/register', App\Http\Controllers\Api\RegisterController::class)->name('register');

/**
 * route "/login"
 * @method "POST"
 */
Route::post('/login', App\Http\Controllers\Api\LoginController::class)->name('login');

/**
 * route "/user"
 * @method "GET"
 */
Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Di atas, kita menambahkan 2 route baru, yaitu /login dan /user. Untuk route /login akan kita gunakan untuk proses otentikasi dan generate token JWT.

Sedangkan untuk route /user akan digunakan untuk menampilkan informasi user yang sedang login, dimana di dalam route ini kita tambahkan middleware yang bernama auth:api, artinya route ini hanya bisa diakses jika user sudah melakukan proses otentikasi.

Langkah 5 - Membuat Controller Logout

Terakhir, kita akan membuat controller baru untuk proses logout. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel.

php artisan make:controller Api/LogoutController -i

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru yang berada di dalam folder app/Http/Controllers/Api/LogoutController.php. Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers\Api;

use Illuminate\Http\Request;
use Tymon\JWTAuth\Facades\JWTAuth;
use App\Http\Controllers\Controller;
use Tymon\JWTAuth\Exceptions\JWTException;
use Tymon\JWTAuth\Exceptions\TokenExpiredException;
use Tymon\JWTAuth\Exceptions\TokenInvalidException;

class LogoutController extends Controller
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {        
        //remove token
        $removeToken = JWTAuth::invalidate(JWTAuth::getToken());

        if($removeToken) {
            //return response JSON
            return response()->json([
                'success' => true,
                'message' => 'Logout Berhasil!',  
            ]);
        }
    }
}

Di atas, kita membuat kondisi di dalam method __invoke, dimana kita membuat sebuah variable dengan nama removeToken yang isinya adalah kita melakukan logout dari token yang active. Jika proses tersebut berhasil, maka akan mengembalikan sebuah response success true.

Langkah 6 - Menambahkan Route Logout

Sekarang, kita akan menambahkan route untuk proses logout. Silahkan buka file routes/api.php, kemudian ubah semua kode-nya menjadi seperti berikut ini :

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/**
 * route "/register"
 * @method "POST"
 */
Route::post('/register', App\Http\Controllers\Api\RegisterController::class)->name('register');

/**
 * route "/login"
 * @method "POST"
 */
Route::post('/login', App\Http\Controllers\Api\LoginController::class)->name('login');

/**
 * route "/user"
 * @method "GET"
 */
Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

/**
 * route "/logout"
 * @method "POST"
 */
Route::post('/logout', App\Http\Controllers\Api\LogoutController::class)->name('logout');

Di atas kita menambahkan 1 route baru dengan method POST, yaitu /logout.

Langkah 7 - Uji Coba RESTful API

Untuk melakukan proses uji coba RESTful API, kita membutuhkan sebuah tools tambahan yang bernama Postman. Silahkan teman-teman bisa mengunduhnya di link berikut ini : https://www.postman.com/downloads/

Uji Coba Proses Register

Pertama-tama kita akan melakukan proses uji coba register. Silahkan buka aplikasi Postman dan masukkan URL berikut ini : http://localhost:8000/api/register dan untuk method-nya silahkan pilih POST.

Setelah itu, silahkan klik tab Body dan pilih form-data. Kemudian masukkan key dan value berikut ini :

KEY VALUE
name isi sesuai keinginan.
email isi sesuai keinginan.
password isi sesuai keinginan.
password_confirmation isi sesuai dengan field/kolom password.

Jika sudah, silahkan klik Send, jika berhasil maka kita akan mendapatkan response kurang lebih seperti berikut ini :

Uji Coba Proses Login

Setelah berhasil membuat proses register, sekarang kita akan lanjutkan untuk melakukan uji coba proses login. Silahkan buka aplikasi Postman dan masukkan URL berikut ini : http://localhost:8000/api/login dan untuk method-nya silahkan pilih POST.

Setelah itu, silahkan klik tab Body, kemudian pilih form-data dan masukkan key dan value berikut ini :

KEY VALUE
email isi email yang digunakan saat register.
password isi password yang digunakan saat register.

Jika sudah, silahkan klik Send, jika berhasil maka kita akan mendapatkan sebuah response JSON dengan beberapa informasi seperti data user yang sedang login dan token yang telah di generate oleh JWT.

Uji Coba Get User

Setelah berhasil melakukan proses otentikasi, sekarang kita akan coba menampilkan data user yang telah login. Silahkan buka aplikasi Postman, kemudian masukkan URL berikut ini : http://localhost:8000/api/user dan untuk method-nya silahkan pilih GET.

Setelah itu, silahkan klik tab Header. Kemudian masukkan beberapa key dan value berikut ini :

KEY VALUE
Accept application/json
Content-Type application/json
Authorization Bearer <spasi> Token

CATATAN ! : untuk value Authorization, yaitu Bearer spasi Token yang digenerate saat proses login.

Jika sudah, silahkan klik Send dan jika berhasil maka kita akan mendapatkan sebuah response berupa JSON yang berisi informasi data user.

Uji Coba Logout

Terakhir, kita akan lakukan proses uji coba untuk Logout. Silahkan buka aplikasi Postman dan masukkan URL berikut ini : http://localhost:8000/api/logout dan untuk method-nya silahkan pilih POST.

Setelah itu, silahkan klik tab Header. Kemudian masukkan beberapa key dan value berikut ini :

KEY VALUE
Accept application/json
Content-Type application/json
Authorization Bearer <spasi> Token

Jika sudah, silahkan klik Send, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :

Sampai disini pembahasan bagaimana cara membuat RESTful API untuk Authentication menggunakan JWT di dalam Laravel. Di artikel selanjutnya kita akan belajar bagaimana cara melakukan installasi atau membuat project React.js baru.

Terima Kasih



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at 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

KOMENTAR