Pada tutorial ini Anda akan belajar bagaimana membuat login, register, dan memproteksi endpoint atau resources dengan JSON Web Token menggunakan CodeIgniter 4.
Untuk menginstal CodeIgniter 4 dapat dilakukan dengan 2 cara yaitu: Instalasi manual dan Instalasi menggunakan composer.
Pada tutorial ini, saya akan menggunakan composer.
Jika Anda belum memiliki composer, silahkan kunjungi URL berikut untuk mendownload composer, kemudian install di komputer Anda:
https://getcomposer.org/
Setelah composer terinstall di komputer Anda dan untuk memastikan composer terinstall dengan baik di komputer Anda, buka terminal
atau Command Prompt (CMD).
Kemudian ketikan perintah berikut:
composer -v
Seperti gambar berikut:
Setelah composer terinstal dengan baik di komputer Anda, kemudian Anda dapat membuat project CodeIgniter 4 menggunakan composer.
Buat sebuah
folder baru di web server Anda, disini saya beri nama “jwt-app”.
Jika Anda menggunakan WAMPSERVER, buat di folder:
C:/wamp64/www
Jika Anda menggunakan XAMPP, buat di folder:
C:/xampp/htdocs
Pada tutorial ini, saya menggunakan XAMPP.
Kemudian buka folder “jwt-app” tersebut menggunakan Code Editor, disini saya menggunakan Visual Studio Code.
Setelah itu, integrasikan dengan terminal pada Visual Studio Code.
Kemudian ketikan perintah berikut
pada terminal untuk membuat project CodeIgniter 4:
composer create-project codeigniter4/appstarter .
Perintah diatas akan membuat project CodeIgniter baru pada folder “jwt-app”.
Tunggu sampai proses instalasinya selesai.
Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI
Order Sekarang.!
Step #2. Buat Database
Buat sebuah database baru pada MySQL, Anda dapat menggunakan
tools seperti SQLyog, PHPMyAdmin atau sejenisnya.
Disini saya membuat database dengan nama “jsonwebtoken”.
Jika Anda membuat database dengan nama yang sama itu lebih baik.
Untuk membuat database pada MySQL, dapat dilakukan dengan mengeksekusi query berikut:
CREATE DATABASE jsonwebtoken;
Perintah SQL diatas akan membuat sebuah database dengan nama “jsonwebtoken”.
Selanjutnya, buat koneksi antara database dengan project CodeIgniter.
Temukan file
env pada root project, kemudian rename (ganti nama) menjadi .env dan open file tersebut.
Untuk melakukan pengujian, jalankan project kita dengan mengetikan perintah berikut pada terminal:
php spark serve
Seperti gambar berikut:
Pada tutorial kali ini saya akan menggunakan POSTMAN untuk melakukan pengujian.
Saya juga menyarankan Anda untuk menggunakan POSTMAN.
Anda dapat mendownload POSTMAN pada link berikut, dan install di komputer Anda:
https://www.postman.com/downloads/
Setelah POSTMAN terinstal di komputer Anda, buka POSTMAN untuk melakukan pengujian.
#1.
Register
Ketikan URL berikut pada kolom URL Postman:
http://localhost:8080/register
Pilih method POST => Body => raw => JSON => masukkan datanya dalam format JSON, kemudian klik tombol Send, seperti gambar berikut:
Jika berjalan dengan baik, maka akan terlihat
status: 201 Created seperti gambar diatas.
#2. Login
Ketikan URL berikut pada kolom URL Postman:
http://localhost:8080/login
Pilih method POST => Body => raw => JSON => masukkan data email dan password dalam format JSON, kemudian klik tombol Send, seperti gambar berikut:
Jika login berhasil, maka kita akan mendapatkan respon token seperti gambar diatas.
Kita bisa gunakan token tersebut untuk mengakses resources yang di proteksi.
#3. Get Current User Login
Ketikan URL berikut pada kolom URL Postman:
http://localhost:8080/me
Pilih method GET => Authorization => Bearer
Token => copy dan paste-kan token sebelumnya pada field token, kemudian klik tombol Send, seperti gambar berikut:
Jika berjalan dengan baik, maka kita mendapat id dan email dari user login seperti gambar diatas.
#4. Access Protected Resources
Kita juga bisa mengakses
resource yang di proteksi dengan memanfaatkan token tersebut.
Pada tutorial ini, kita proteksi route home. Dengan kata lain, kita tidak dapat mengakses home tanpa token.
Ketikan URL berikut pada kolom URL Postman:
http://localhost:8080
Pilih method GET => Authorization => Bearer Token => copy dan paste-kan token sebelumnya pada field token, kemudian klik tombol Send, seperti gambar berikut:
Jika berjalan dengan baik, maka akan terlihat status: 200 Ok dan response html seperti gambar diatas.
Jika kita mengakses home tanpa token, maka akan terlihat status: 401 Unauthorized dan pesan “Token Required” seperti gambar berikut:
Dan jika kita mengakses home dengan token yang salah, maka akan terlihat status: 401 Unauthorized dan pesan “Invalid Token” seperti gambar berikut:
Related: Tutorial CRUD CodeIgniter
4 dan React JS (Full-Stack)
Kesimpulan:
Pembahasan kali ini adalah tentang bagaimana membuat login, register, dan memproteksi endpoint atau resources dengan JSON Web Token menggunakan CodeIgniter 4.
Jadi tunggu apalagi, let’s coding!
Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI