Minggu yang lalu kita sudah
Memodifikasi Model User Yii2 Basic Template Untuk Kebutuhan Autentikasi Pengguna Menggunakan JWT (JSON Web Token), dan untuk minggu ini kita akan coba menggunakan model tersebut untuk registrasi user dan login user. Sebagai gambaran dalam tutorial ini kita akan membuat 2 file baru diantaranya:
1. controllers/AuthController.php
2. models/SignupForm.php
Tidak lupa, kita juga akan memodifikasi file
model/LoginForm.phpB,
controllers/SiteController.php dan configurasi aplikasi di
config/web.php. Selain itu, kita akan mulai menjalankan aplikasi kita menggunakan PHP built-in web server dan menggunakan
postman untuk mencoba melakukan request secara langsung ke endpoint url yang kita buat.
Sebelum kita membuat dan memodifikasi file-file tersebut, berikut ini adalah diagram alur proses registrasi (signup) dan login user.
Sekarang, kita akan coba implementasikan alur tersebut.
1. Membuat SignupForm.php
Dalam file tersebut kita membuat sebuah class model baru bernama SignupForm untuk memproses dan memvalidasi data registrasi user, class yang kita buat merupakan turunan dari
\yii\base\Model. Dengan menggunakan method
validate() dari base class tersebut kita dapat memvalidasi data registrasi user berdasarkan aturan yang kita buat didalam method
rules() . Kita juga menambahkan sebuah method baru bernama signup(), dalam method ini kita mencoba menyimpan data registrasi user yang sudah divalidasi kedalam database barbek menggunakan model User yang sudah kita modif minggu lalu.
2. Modifikasi LoginForm.php
File ini secara default ada di Yii2 basic template. Agar sesuai dengan kebutuhan dari aplikasi BarBek kita melakukan modifikasi pada method login(). Fungsi utama dari method login() ini adalah untuk melakukan validasi data login (username & password) menggunakan method
validate() dari base class
\yii\base\Model. Jika validasi berhasil dilakukan maka kita generate JWT token menggunakan method generateJWT() yang kita buat pada model User minggu lalu.
3. Membuat AuthController.php
Dalam file tersebut kita membuat sebuah class bernama AuthController yang merupakan class turunan dari
\yii\rest\Controller yang dibuat khusus untuk kebutuhan Restful Web API. Base class tersebut memiliki fitur seperti validasi HTTP verb methods, authenticator, respon formating, dan lain-lain ( baca lebih lanjut dihalaman dokumentasi
http://www.yiiframework.com/doc-2.0/guide-rest-controllers.html ). Namun, disayangkan sekali
\yii\filters\Cors yang dibutuhkan dalam aplikasi BarBek tidak tersedia secara default dalam base class tersebut, jadi kita harus meng-overide method behaviours() dan menambahkannya secara manual. Selain itu, filter CORS ini tidak akan berfungsi jika dijalankan setelah authenticator, jadi kita harus menghapus fitur authenticator dan menembahkannya kembali setelah CORS filter jika kita akan menggunakan fitur tersebut (baca disini:
http://www.yiiframework.com/doc-2.0/guide-rest-controllers.html#cors). Kita juga mengoveride mehtod
verbs() base class
\yii\rest\Controller validasi HTTP method untuk action signup dan login. Dalam action signup dan login kita menggunakan method
getBodyParams() dari
\yii\web\Request untuk mendapatkan data yang dikirim browser melalui method POST, kemudian dengan method
load() dari model SignupForm atau LoginForm untuk memproses data tersebut (validasi, dll). Untuk action signup jika berhasil akan mengirim respon berupa data user yang berhasil dibuat dan action login jika berhasil akan mengirim respon data berupa JSON Web Token (JWT). Adapun format response data bisa berupa json atau xml, tergantung dari Accept Header yang dikirim saat browser melakukan request atau query parameter
_format (baca lebih lanjut disini:
http://www.yiiframework.com/doc-2.0/guide-rest-response-formatting.html)¯.
4. Mengedit config/web.php
Dalam file tersebut kita coba memodifikasi beberapa konfigurasi aplikasi komponen yaitu
user (\yii\web\User),
response, dan
urlManager (yii\web\UrlManager).
1). user
Karena aplikasi kita stateless jadi kita tidak akan menggunakan session untuk autentikasi sehingga kita harus mengatur beberapa properties dari
\yii\web\User yaitu
enableAutoLogin menjadi false,
enableSession menjadi false,
loginUrl menjadi null.
2). response
3). urlManager
Untuk mengatur url routing agar mudah dibaca kita akan mengatur
enablePrettyUrl menjadi true, serta agar semua url routing harus melihat aturan yang ada dalam
rules kita akan mengatur
enableStrictParsing menjadi true, dan agar index.php hilang dari url kita akan atur
showScriptName menjadi false. Selain itu, kita juga menambahkan beberapa rules untuk mengatur routing ke AuthController dan SiteController.
5. Mengedit SiteController.php
File ini secara default ada di Yii2 basic template. Yang perlu kita modifikasi adalah memodifikasi parent class atau base class-nya menjadi
\yii\rest\Controller. Sama halnya dengan AuthController kita akan menggunakan
\yii\filters\Cors di method behaviors() dan menambahkan beberapa validasi HTTP verb method untuk action index dan error. Oh ya, selain action index dan error akan kita delete karena tidak terpakai. Pada action index ini akan mejadi base url dari BarBek Restful Web APIs jadi saat user/orang mengunjungi api.barbek.com (misalnya), maka sesuai dengan url rules yang ada di config.php action index pada SiteController akan digunakan. Dan pada error action untuk menghandel error seperti 404 Not Found.
6. Mengedit model User.php
Itulah beberapa file yang harus kita buat dan modifikasi, selanjutnya adalah mencoba mendaftarkan user baru dan login menggunakan postman. Namun sebelumnya kita harus menjalankan terlebih dahulu aplikasi BarBek kita menggunakan terminal. Silahkan buka terminal, kemudian masuk ke direktori aplikasi barbek. Dan ketikkan perintah berikut ini:
Pastikan output dari terminal adala seperti screenshot berikut:
Note: Jika port 8080 sudah digunakan gunakan port yang lain.
Sekarang, kita buka postman dan silahkan coba lakukan:
1. GET request ke http://localhost:8080
pastikan response yang diterima adalah seperti pada screenshot berikut:
2. POST request ke http://localhost:8080/auth/signup dengan data username, password, email.
pastikan response yang diterima adalah seperti pada screenshot berikut:
3. POST request ke http://localhost:8080/auth/login dengan data username dan password yang sudah diregistrasi.
4. Silahkan explore sendiri bagaimana jika kita menginput data yang tidak sesuai dengan aturan validasi pada model SingupForm dan LoginForm yang telah kita buat.. cari tahu apa response yang diterima.
contoh:
Login dengan informasi yang salah:
Registrasi menggunakan username yang sudah digunakan:
Sampai disini dulu postingan kali ini, semoga bermanfaat. kita lanjutkan minggu depan.
Terimakasih..
maaf gan untuk yang memodifikasi yang bagian user bisa di perjelas lagi ga ya ?
ReplyDelete