Membuat Autentikasi JWT (JSON Web Token) dengan Laravel 7

whynwd

whynwd Sabtu, 11 Juli 2020

Membuat Autentikasi JWT (JSON Web Token) dengan Laravel 7

Sebenarnya laravel menyediakan kemudahan bagi kita dalam pembuatan autentikasi user untuk aplikasi yang kita bangun.

Kita bisa menggunakan laravel/ui sebuah package yang memberikan kemudahan untuk kita, dimana menyediakan beberapa hal yang kita perlukan untuk proses autentikasi yang ingin kita buat, seperti routing, view/halaman login, register, reset password, logout, controller, validasi, dll.  

Namun terlepas dari cara biasa yang kita gunakan, terkadang kita ingin juga mencoba membuat autentikasi sendiri atau secara manual dan dengan menambah/menggunakan fitur yang ingin kita tambahkan.

Contohnya seperti kita ingin menggunakan JWT (JSON Web Token) untuk autentikasi user. Informasi akan di simpan dalam bentuk token. Ketika user melakukan login, diperlukan verifikasi token terlebih dahulu agar dapat masuk ke aplikasi. 

Sedikit Soal JWT. Kalau dilihat contoh token JWT nya seperti dibawah ini. 

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Pada token JWT diatas, jika kita lihat terdiri dari beberapa bagian yang dipisah oleh titik. Ketiga bagian tersebut yang dipisah dengan titik merupakan stuktur dari JSON Web Token. Dimana terdiri dari Header, Payload, dan Signature.

Bagian pertama yaitu Header, yang merupakan jenis token dan algoritma yang digunakan dan dikodekan dalam Base64Url, lalu pada bagian kedua yaitu ada Payload yang dapat berisi data pengguna, lama waktu kadaluarsa token, subjek, jwt id, dll. Kemudian yang ketiga ada Signature, dimana menggabungkan header dan payload yang telah di kodekan(encoded) kemudian di enkripsi menggunakan algoritma yang digunakan, seperti HMAC SHA256.

Menggunakan JWT untuk aplikasi kita agar lebih secure sangat baik untuk kita terapkan.

Menggunakan JSON Web Token di Laravel

Untuk menggunakan JWT di laravel, terdapat juga package yang bisa kita gunakan. 

Link: - Github Repo - Dokumentasi

Silahkan buka link diatas untuk melihatnya. Penggunaanya sendiri pun tidak sulit, dibawah adalah langkah-langkah untuk menggunakannya.

Kita akan coba membuat authentikasi user, registrasi dan juga login. Data user kita simpan ke database mysql, dan kita gunakan postman untuk testing.

1. Instalasi

Langkah awal kita lakukan instalasi package terlebih dahulu. 

composer require tymon/jwt-auth

Disini saya menggunakan laravel 7 yang baru diinstall/download. Kita akan membuat membuat route, controller, validasi nya secara manual.

2. Konfigurasi

Silahkan jalankan perintah dibawah ini untuk membuat file config package.

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider" 

Kemudian jalankan perintah dibawah ini untuk membuat secret key secara otomatis.

php artisan jwt:secret

Secret key akan terbuat/muncul di file .env pada project. 

Selanjutnya buka file / model user.php dan tambahkan method getJWTIdentifier() dan getJWTCustomClaims(). Seperti dibawah ini:

//user.php
<?php
namespace App;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject;
class User extends Authenticatable implements JWTSubject
{
    use Notifiable;
 
    protected $fillable = [
        'name', 'email', 'password',
    ];
 
    protected $hidden = [
        'password', 'remember_token',
    ];
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
     
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }
    public function getJWTCustomClaims()
    {
        return [];
    }
}

Kemudian buka file auth.php di folder config dan atur seperi dibawah ini.

//config/auth.php
...
'defaults' => [
'guard' => 'api',
'passwords' => 'users',
],
...
'guards' => [
'api' => [
'driver' => 'jwt',
'provider' => 'users',
],
],
...

Kita ubah guard defaultnya 'api' dan driver menjadi 'jwt'.

3. Membuat API Resource User

Kita membuat resource untuk user.

php artisan make:resource User

Buka Resources/user.php dan buat seperti dibawah ini.

<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class User extends JsonResource

    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email, 
        ];
    }
}

4. Membuat Validasi

Kemudian kita membuat form request untuk validasi. 

php artisan make:request ValidateUserLogin
php artisan make:request ValidateUserRegistration

Kita membuat 2 file request untuk validasi form login dan form registrasi.

Silahkan buka kedua file tersebut pada folder Request dan atur seperti dibawah ini:

//ValidateUserRegistration.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class ValidateUserRegistration extends FormRequest
{
    public function authorize()
    {
        return true;
    }
    public function rules()
    {
        return [
            "name" => "required",
            "email" => "required|unique:users",
            "password" => "required|min:8"
        ];
    }
}
//ValidateUserLogin.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class ValidateUserLogin extends FormRequest
{
    public function authorize()
    {
        return true;
    } 
    public function rules()
    {
        return [  
            "email" => "required",
            "password" => "required"
        ];
    }
}

5. Membuat Route

Selanjutnya kita membuat route. Silahkan buka routes/api.php dan tambahkan route dibawah ini.

Route::post('/register', 'AuthController@register');
Route::post('/login', 'AuthController@login');
Route::get('/user', 'AuthController@user');

6. Membuat Controller

Setelah route dibuat selanjutnya kita buat sebuah controller.

php artisan make:controller AuthController

Buka AuthController.php dan buat seperti dibawah ini:

//AuthController.php
<?php
namespace App\Http\Controllers;
use App\Http\Resources\User as UserResource;
use Illuminate\Http\Request;
use App\Http\Requests\ValidateUserRegistration;
use App\Http\Requests\ValidateUserLogin;
use App\User;
class AuthController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth:api', ['except' => ['login','register']]);
    }
    public function register(ValidateUserRegistration $request){
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => bcrypt($request->password),
        ]); 
        return new UserResource($user); 
    }
    public function login(ValidateUserLogin $request){
      
        $credentials = request(['email', 'password']);
        if (!$token = auth()->attempt($credentials)) {
            return  response()->json([ 
                'errors' => [
                    'msg' => ['Incorrect username or password.']
                ]  
            ], 401);
        }
    
        return response()->json([
            'type' =>'success',
            'message' => 'Logged in.', 
            'token' => $token
        ]);
    }
 
    public function user()
    { 
       return new UserResource(auth()->user());
    }
}

-Pada konstruktor kita tambahkan midleware 'auth:api' dan kita berikan pengecualian untuk method login dan register. Dan untuk method user sendiri harus melewati autentikasi dan verifikasi token untuk membuka atau menampilkan data user.

- Pada method register kita input value dan jika lolos validasi akan return data user dalam bentuk json.

- Pada method login kita input email dan password untuk masuk, jika data benar akan men-generate token.

-Token akan digunakan untuk membuka setiap route yang di proteksi pada header http authorization.

Lihat juga: Cara Membuat Autentikasi Login dan Registrasi User dengan Laravel 7 + Vue.js (CLI)

7. Testing

Setelah tahap diatas selesai dikerjakan, selanjutnya kita akan coba untuk melakukan registrasi, login dan menggunakan token nya.

Sebelum ke postman, buat dulu database mysql, lalu hubungkan dengan project dan lakukan migrasi table.

1. Buat database baru.

2. Buka file .env, dan atur db. 

    DB_DATABASE=nama_database 
    DB_USERNAME=root
    DB_PASSWORD=

3. Migrasi

php artisan migrate

8. Postman:

- Register

Method => POST API Endpoint => http://localhost:8000/api/register
Body => raw - JSON
Header => Accept: application/json

Membuat Autentikasi JWT (JSON Web Token) dengan Laravel 7

Silahkan kirim/registrasi kembali dengan data yang sama untuk melihat validasi error.

- Login
Method => POST
API Endpoint => http://localhost:8000/api/login
Body => raw - JSON

Membuat Autentikasi JWT (JSON Web Token) dengan Laravel 7

Silahkan input data yang salah/mengkosongkan untuk melihat keterangan validasi yang akan muncul.

- User
Method => GET
API Endpoint => http://localhost:8000/api/user
Header => Accept: application/json, Authorization: Bearer <token>

Membuat Autentikasi JWT (JSON Web Token) dengan Laravel 7

Ketika Authorization dimatikan:

Membuat Autentikasi JWT (JSON Web Token) dengan Laravel 7

Sampai disini bagaimana menggunakan jwt untuk autentikasi user di laravel telah selesai dan dapat bekerja, silahkan mencobanya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel