3.4.3 Perancangan Basis Data
Basis Data atau dalam bahasa inggris disebut database adalah sekumpulan informasi yang disimpan di dalam komputer secara sistematik sehingga dapat di periksa
menggunakan suatu bahasa pemrograman komputer untuk memperoleh informasi dari basis data tersebut. Di dalam perancangan resource server dan authorization server
OAuth ini diperlukan 2 dua database yakni database heaven dan database oauth2- heaven meliputi tabel - tabel yang berada di dalamnya. Di dalam database heaven
diperlukan tabel reservasi seperti yang ditunjukkan pada tabel 3.5, database oauth2- heaven diperlukan untuk tabel clients dan tabel tokens seperti pada tabel 3.6 dan 3.7.
Tabel 3.5 Tabel Reservasi Field
Type Length
PrimaryKey Autoincrement
ID INT
5 nama
Varchar 30
tgl_reservasi Varchar
20 gender
Varchar 8
Hp Varchar
13 message
Varchar 350
Tabel 3.6 Tabel Clients Field
Type Length
PrimaryKey Autoincrement
client_id Varchar
20 client_secret
Varchar 20
redirect_uri Varchar
200
Universitas Sumatera Utara
Tabel 3.7 Tabel Tokens Database : heaven-oauth
Field Type
Length PrimaryKey
Autoincrement
oauth_token Varchar
40 client_id
Varchar 20
expires INT
11 scope
Varchar 250
3.4.4 Flowchart Sistem
Flowchart adalah suatu bagan dengan simbol - simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses instruksi dengan
proses lainnya dalam suatu program atau prosedur sistem secara logika. Pada perancangan flowchart yang terjadi pada sistem otentikasi OAuth terbagi menjadi dua
mekanisme yakni flowchart sistem aplikasi secara umum dan flowchart otentikasi OAuth 2 yang diterapkan pada sistem.
Universitas Sumatera Utara
3.4.4.1 Flowchart Sistem Aplikasi Secara Umum
Gambar 3.7 Flowchart Sistem Aplikasi Secara Umum
Prosedur flowchart di atas merupakan gambaran sistem aplikasi secara umum. Sistem diatas memberikan petunjuk bahwa ada proses otentikasi OAuth yang harus di
lalui oleh pengunjung untuk dapat masuk dan menerima akses layanan yang tersedia pada aplikasi. Di bawah ini adalah prosedur kerja dari flowchart di atas :
1. Mulai.
2. Melakukan “sign-in” pada sistem aplikasi.
3. Data credential client berupa client id dan client secret di proses
menggunakan teknologi otentikasi OAuth.
Universitas Sumatera Utara
4. Di asumsikan data client adalah sesuai, client dapat menerima layanan yang
tersedia pada sistem aplikasi web single sign on. 5.
Client dapat memilih akses salah satu pada web aplikasi single sign on. Dengan melakukan akses pada web aplikasi pertama, kedua ataupun ketiga.
6. Selesai.
3.4.4.2 Flowchart Otentikasi OAuth 2
Gambar 3.8 Flowchart Otentikasi OAuth 2
Universitas Sumatera Utara
Prosedur flowchart di atas di gunakan untuk memproses credential dari client apakah valid atau tidak, menggunakan prosedur teknologi otentikasi OAuth. Di bawah
ini akan di jelaskan prosesnya secara terperinci : 1.
Mulai. 2.
Client menginput client id, client secret dan redirect uri 3.
Client melakukan tindakan “sign-in” menuju aplikasi. Jika client sesuai maka proses otentikasi dilanjutkan menggunakan teknologi OAuth.
4. Proses otentikasi OAuth dilakukan untuk mengecek keabsahan dari data client,
Dengan melakukan otorisasi untuk menghadirkan halaman Authorize App. 5.
Halaman persetujuan otorisasi pada halaman Authorize App merupakan halaman melakukan tindakan persetujuan otoritas untuk mendapat akses
token. 6.
Client yang melakukan tindakan persetujuan akan di arahkan browser menuju halaman utama sistem aplikasi single sign on, ditandai dengan keluarnya
akses token pada alamat browser. 7.
Jika client tidak melakukan tindakan persetujuan maka browser akan mengeluarkan keterangan error yang berarti client tidak dapat mengakses
aplikasi utama. 8.
Selesai.
3.4.5 Perancangan Tampilan
Perancangan tampilan pada implementasi resource server dan authorization server otentikasi oauth pada web aplikasi single sign on di maksudkan sebagai gambaran
umum user interface dalam penerapan perancangan aplikasi yang sebenarnya antara pengguna dengan komputer.
Universitas Sumatera Utara
3.4.5.1 Rancangan Halaman Tambah Client
Halaman ini dimaksudkan atau diperuntukkan untuk kegiatan menambah pengunjung baru yang digunakan dalam otorisasi hak akses menggunakan web aplikasi single sign
on credential pengunjung yang ciri khasnya menggunakan username dan password di ganti sesuai dengan model workflow otentikasi OAuth 2 yakni client id dan client
secret. Pada gambar 3.9 di bawah ini adalah halaman perancangan tambah client yang terdapat pada web aplikasi single sign on.
Gambar 3.9 Rancangan Tampilan Halaman Tambah Client
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web aplikasi dengan link - link halaman
2. Canvas yang memuat dari slogan web
1 2
3 4
5 6
7
Universitas Sumatera Utara
3. Label yang berisikan “masukan client id” lengkap dengan input text
4. Label yang berisikan “masukan client secret” lengkap dengan input text
5. Label yang berisikan “redirect uri” lengkap dengan input text
6. Tombol button yang terdiri dari tombol tambah dan batal
7. Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.2 Rancangan Halaman Sign In
Halaman ini diperuntukkan bagi pengunjung untuk melakukan “sign-in” menuju halaman utama aplikasi. Tersedia inputan yang terdiri dari client id dan client secret.
Pada gambar 3.10 di bawah ini adalah model rancangan dari halaman “sign-in”. Tersedia link jika pengunjung belum mendaftar, silahkan melakukan pendaftaran.
Gambar 3.10 Rancangan Tampilan Halaman Sign-In
1 2
3 4
5 6
7
Universitas Sumatera Utara
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web dengan link - link halaman 2.
Canvas yang memuat dari slogan web 3.
Label yang berisikan “client id” lengkap dengan input text 4.
Label yang berisikan “client secret” lengkap dengan input text 5.
Label keterangan “Belum Terdaftar, silahkan klik disini” 6.
Tombol button yang terdiri dari tombol Kirim dan Batal 7.
Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.3 Rancangan Halaman Utama
Gambar 3.11 Rancangan Tampilan Halaman Utama
1 2
3
4
5
6
Universitas Sumatera Utara
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web dengan link - link halaman 2.
Canvas yang memuat dari slogan web 3.
Image slider yang terdiri dari 3 image yang melakukan animasi transisi 4.
Image feature sebagai image keterangan kondisi web 5.
Isi dari halaman utama sisi kiri dan sisi kanan 6.
Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.4 Rancangan Halaman Menu Dan Harga
Halaman ini di rancang untuk pengunjung agar dapat menikmati layanan dari web aplikasi single sign on, berupa informasi aneka menu lengkap dengan daftar harganya.
Adapun ilustrasi halaman menu dan harga dapat dilihat seperti gambar 3.12 di bawah ini :
Gambar 3.12 Rancangan Tampilan Halaman Menu dan Harga
1 2
3
5 4
6
Universitas Sumatera Utara
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web dengan link - link halaman 2.
Canvas yang memuat dari slogan web 3.
Image dan keterangan dari hidangan spesial 4.
List daftar harga menu 5.
List image dari menu - menu yang tersedia lengkap dengan harga 6.
Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.5.5 Rancangan Halaman Reservasi
Halaman ini bertujuan agar pengunjung dapat melakukan pemesanan tempat untuk suatu acara tertentu, dan di hari tertentu. Adapun ilustrasi halaman reservasi dapat
dilihat seperti gambar 3.13 di bawah ini :
Gambar 3.13 Rancangan Tampilan Halaman Reservasi
1 2
3 4
5
6
Universitas Sumatera Utara
Keterangan : 1.
Canvas yang memuat logo dari aplikasi web dengan link - link halaman 2.
Canvas yang memuat dari slogan web 3.
Image dan keterangan dari hidangan spesial 4.
List daftar harga menu 5.
Form Reservasi untuk melakukan pemesanan tempat 6.
Bagian footer berisi tentang hak cipta dan tahun aplikasi dilaunchingkan
3.4.6 Pseudocode
Pseudocode adalah deskripsi dari algoritma program komputer yang menggunakan struktur sederhana dari beberapa bahasa pemrograman, tetapi bahasa tersebut hanya
ditujukan agar dapat dipahami manusia. Tujuan penggunaan utama dari pseudocode adalah untuk memudahkan manusia dalam memahami prinsip-prinsip dari suatu
algoritma ataupun metode. Dari aplikasi sistem yang dibangun, pseudocode mengenai teknologi otentikasi OAuth 2 akan di jabarkan seperti pada tabel 3.8 di bawah ini.
Tabel 3.8 Kode Program Untuk Membuat Kode OAuth 2
No Kode
1 definePDO_DSN, mysql:dbname=heaven-
oauth;host=localhost; definePDO_USER, root;
definePDO_PASS, root;
2 include oauth.php; 3
class PDOOAuth2 extends OAuth2 { private db;
public function __construct { parent::__construct;
try { this-db = new PDOPDO_DSN, PDO_USER,
PDO_PASS;
Universitas Sumatera Utara
} catch PDOException e { dieConnection failed: . e-
getMessage; }
} function __destruct {
this-db = null; }
private function handle_exceptione { echo Database error: . e-getMessage;
exit; }
4 public function add_clientclient_id, client_secret, redirect_uri {
try { sql = insert into clients client_id,
client_secret, redirect_uri values :client_id, :client_secret, :redirect_uri;
stmt = this-db-preparesql; stmt-bindParam:client_id, client_id,
PDO::PARAM_STR; stmt-bindParam:client_secret,
client_secret, PDO::PARAM_STR; stmt-bindParam:redirect_uri,
redirect_uri, PDO::PARAM_STR; stmt-execute;
} catch PDOException e { this-handle_exceptione;
} }
5 protected function auth_client_credentialsclient_id, client_secret = null {
try { sql = select client_secret from clients
where client_id = :client_id; stmt = this-db-preparesql;
stmt-bindParam:client_id, client_id, PDO::PARAM_STR;
stmt-execute; result = stmt-fetchPDO::FETCH_ASSOC;
if client_secret === null return result == false;
return result[client_secret] == client_secret;
Universitas Sumatera Utara
} catch PDOException e { this-handle_exceptione;
} }
6 protected function get_redirect_uriclient_id { try {
sql = select redirect_uri from clients where client_id = :client_id;
stmt = this-db-preparesql; stmt-bindParam:client_id, client_id,
PDO::PARAM_STR; stmt-execute;
result = stmt-fetchPDO::FETCH_ASSOC; if result === false
return false; return issetresult[redirect_uri]
result[redirect_uri] ? result[redirect_uri] : null;
} catch PDOException e { this-handle_exceptione;
} }
7 protected function get_access_tokenoauth_token { try {
sql = select client_id, expires, scope from tokens where oauth_token = :oauth_token;
stmt = this-db-preparesql; stmt-bindParam:oauth_token,
oauth_token, PDO::PARAM_STR; stmt-execute;
result = stmt-fetchPDO::FETCH_ASSOC; return result == false ? result : null;
} catch PDOException e { this-handle_exceptione;
} }
8 protected function store_access_tokenoauth_token, client_id, expires, scope = null {
try { sql = insert into tokens oauth_token,
client_id, expires, scope values :oauth_token, :client_id, :expires, :scope;
stmt = this-db-preparesql; stmt-bindParam:oauth_token,
oauth_token, PDO::PARAM_STR;
Universitas Sumatera Utara
stmt-bindParam:client_id, client_id, PDO::PARAM_STR;
stmt-bindParam:expires, expires, PDO::PARAM_INT;
stmt-bindParam:scope, scope, PDO::PARAM_STR;
stmt-execute; } catch PDOException e {
this-handle_exceptione; }
}
9 protected function get_supported_grant_types { return arrayAUTH_CODE_GRANT_TYPE;
} protected function get_stored_auth_codecode {
try { sql = select code, client_id,
redirect_uri, expires, scope from auth_codes where code = :code;
stmt = this-db-preparesql; stmt-bindParam:code, code,
PDO::PARAM_STR; stmt-execute;
result = stmt-fetchPDO::FETCH_ASSOC; return result == false ? result : null;
} catch PDOException e { this-handle_exceptione;
} }
10 protected function store_auth_codecode, client_id, redirect_uri, expires, scope {
try { sql = insert into auth_codes code,
client_id, redirect_uri, expires, scope values :code, :client_id, :redirect_uri, :expires, :scope;
stmt = this-db-preparesql; stmt-bindParam:code, code,
PDO::PARAM_STR; stmt-bindParam:client_id, client_id,
PDO::PARAM_STR; stmt-bindParam:redirect_uri,
redirect_uri, PDO::PARAM_STR; stmt-bindParam:expires, expires,
PDO::PARAM_INT; stmt-bindParam:scope, scope,
Universitas Sumatera Utara
PDO::PARAM_STR; stmt-execute;
} catch PDOException e { this-handle_exceptione;
} }
}
Keterangan :
1. Menetapkan koneksi PDO PHP Data Object ke database MySQL.
2. Menyertakan dan memanggil fungsi file yang berada pada oauth.php.
3. Melakukan pencocokan koneksi PDO dengan database, jika tidak sesuai
akan mendapatkan pesan error. 4.
Penambahan data client ke dalam tabel clients yang terdiri atas kolom client id, client secret, dan redirect uri.
5. Mengembalikan nilai array berdasarkan kolom tabel untuk ditampilkan
sesuai dengan pengaturan pada penseleksian. 6.
Menampilkan redirect uri yang berasal dari tabel clients, pengaturan berdasarkan kolom client_id.
7. Menampilkan data client id, expires, dan scope yang berasal dari tabel
oauth_token berdasarkan kolom tabel tokens. 8.
Melakukan penyisipan data pada tabel token yang terdiri atas kolom oauth_token, client_id, expires, scope.
9. Menampilkan code, client_id, redirect_uri, expires, scope yang berasal dari
basis data auth_codes berdasarkan code. 10.
Penambahan nilai data ke dalam tabel auth_codes.
Universitas Sumatera Utara
BAB 4 IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi Sistem
Implementasi adalah tahapan penerapan di mana sistem telah selesai dirancang setelah melewati tahapan analisis dan perancangan. Dalam penelitian ini, penulis
mengimplementasikan aplikasi yang dirancang menggunakan bahasa pemrograman PHP Hypertext Preprocessor yang bersifat open source di bawah naungan PHP
License beserta penggunaan basis data yang melibatkan DBMS Database Management System MySQL.
Implementasi sistem dari perancangan sistem yang sudah dikerjakan di bagi menjadi beberapa bagian seperti berikut :
1. Implementasi aktivitas menambah client pengunjung baru.
2. Implementasi aktivitas sign-in.
3. Implementasi proses otentikasi OAuth 2 yang melibatkan authorization server
yang bertindak mengeluarkan halaman authorize app otorisasi aplikasi kemudian diotorisasi dalam bentuk akses token.
4. Implementasi reservasi pada web aplikasi cafe
Hal ini dimaksudkan untuk mengetahui proses tahapan kerja penerapan teknologi otentikasi OAuth 2 yang melibatkan authorization server sebagai pihak yang
memproses otorisasi valid atau tidaknya credential client pada web aplikasi single sign on.
Universitas Sumatera Utara
Kategori