Sunday, January 26, 2020

Membuat Login, Session Timeout, dan Logout dengan Flutter dan PHP MySQL

Membuat Login, Session dan Logout dengan Futter dan PHP
Membuat Login, Session Timeout, Autologin, dan Logout dengan Flutter dan PHP MySQL Dilengkapi Source Code -  Dalam membuat aplikasi baik dekstop, web, ataupun mobile fungsi login, session dan logout adalah hal paling penting dan paling utama untuk dibuat sebagai sarat utama user dalam mengakses aplikasi secara valid.

Dalam praktiknya, membuat fungsi login dan logout baik pada aplikasi web maupun mobile dengan back-end dan database pada server hampir serupa caranya. Bedanya, pada aplikasi web, session bisa langsung disimpan pada variabel yang disediakan oleh web server (tergantung bahasa yang dipakai). Namun pada aplikasi mobile, session harus disimpan di database yang nantinya digunakan sebagai kunci utama untuk memvalidasi apakah request yang dilakukan dari sisi klien valid atau tidak.

Untuk itu menguasai pembuatan fungsi login, session, dan timeout sangat wajib sobat kuasai karena merupakan fungsi dasar yang wajib ada pada aplikasi yang sobat buat nantinya. Maka dari itu, pada tutorial kali ini saya membuatkan contoh bagaimana cara membuat (tampilan dan fungsi) login, membuat session, dan fungsi logout pada Flutter dengan backend PHP + MySQL. Tutorial ini melanjutkan source code dari tutorial sebelumnya yaitu (Membuat Search+CRUD dengan Flutter dan PHP + MySQL), dimana saya menambahkan fungsi Login, Session, dan Logout pada source code tutorial tersebut.

Pada source code artikel ini, sobat akan melihat bagaimana cara login dan memvalidasi user, lalu backend akan membuatkan session untuk disimpan pada sisi klien. Setiap kali request yang akan dilakukan, seperti Create, Read, Update, Delete, dan Search akan melalui pengecekan atau validasi session, jika session sudah tidak valid atau dengan kata lain expired (sesuai waktu yang kita tentukan di server) maka request akan ditolak dan diberikan respon dengan kode tertentu agar aplikasi klien kembali ke halaman login.

Pada artikel kali ini, saya hanya akan memaparkan konsep dan bagian-bagian pada source code atau pembuatan fungsi Login, Session, dan Logout.

Konsep Membuat Login, Session, Autologin dan Logout

  1. Aplikasi klien mengirimkan data username dan password, sesuai yang diinput oleh pengguna melalui API.
  2. Backend melalui pencocokan (ke database) username dan password yang dikirim melalui API, untuk password di hash dengan md5 (sesuai hash yang kita pilih atau tentukan).
  3. Jika tidak sesuai, maka berikan respon invalid user.
  4. Jika username dan pasword sesuai, buatkan session (informasi / nilai yang unik) lalu catat session tersebut kedalam database (table users, pada baris username yang login tersebut) dan mencatat last_request.
  5. Klien akan mencatat session yang di hasilkan dari respon API server kedalam memory (untuk digunakan setiap kali request) dan juga ke persistent store melalui SharedPreference (untuk digunakan pada proses autologin)
  6. Setiap kali request dari sisi klien terjadi, harus menyertakan username dan session, dimana informasi ini akan diproses di server, pakah informasi username dan session valid atau tidak.
  7. Jika valid atau terdapat record (baris) dari table user, baru bandingkan waktunya apakah session masih valid atau tidak.
  8. Perbandingan waktu dilakukan dengan field last_request (field ini selalu diupdate dengan timestamp setiap kali ada request melalui API). Jika perbandingan waktu melebihi batas waktu yang kita tentukan (batas timeout), maka request tersebut dianggap tidak valid, dan diberikan kode/status yang menandakan session expired, agar klien bisa melakukan action berupa keluar dari halaman yang aktif dan menuju halaman login lagi.
  9. Proses logout dilakukan dengan cara menghapus data session didalam database, sesuai username dan session yang dikirimkan, fungsinya untuk meproteksi bahwa logout hanya bisa dilakukan oleh username dan session yang cocok.
  10. Proses autologin, dilakukan dengan cara menaruh fungsi pengecekan session pada initState (nilai session dan username diambil dari persistent store SharedPreference), jika session masih valid, maka aplikasi mobile langsung menuju halaman utama tanpa melalui proses login manual. 

Informasi bagian-bagian penting pada source code projek:

- source_backend\table_users.sql
Adalah file script sql untuk tabel users dan 1 record contoh (user admin dengan password 123)

- source_backend\table_siswa.sql
Adalah file script sql untuk tabel siswa untuk table CRUD.

source_backend\service.php
Adalah file PHP atau file back-end untuk memproses API, pada file tersebut terdapat baris code

define("cfg_session_timeout", 60); 

baris kode tersebut, adalah waktu pengaturan untuk tiemout dalam satuan detik. Sobat bisa mengganti nya sesuai keinginan sobat, misalnya untuk 1 jam, maka nilai yang harus dimasukan adalah 3600, dst.

- lib\utils.dart
Adalah file script dart yang berisi kode-kode utilitas pendukung dari projek ini, pada file tersebut terdapat baris code:
const String url_api = "http://nabita.info/eduprog/crud/service.php";

baris kode tersebut, adalah URL dari API dimana lokasi backend berada.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

1 comment: