JURNAL TEKNIK POMITS Vol. 1, No. 1, (2012) 1-4
1
Smart Login pada Situs Web Menggunakan Qr-Code Masdito Bachtiar, Ary Mazharuddin S., S.Kom., M.Comp.Sc. Jurusan Teknik Informatika, Fakultas Teknologi informasi Institut Teknologi Sepuluh Nopember Jl. Arief Rahman Hakim, Surabaya 60111 E-mail:
[email protected] Abstrak—Perkembangan populasi manusia dan zaman, diikuti oleh perkembangan teknologi. Begitu pula, pertumbuhan infrastruktur dunia maya, seiring dengan pertumbuhan jumlah manusia, jumlah situs – situs social network, blog, dan forum juga semakin bertambah.Semakin banyaknya situs yang bermunculan, mendorong pengguna internet untuk membuat banyak account di berbagai situs tersebut. Dengan banyaknya account, maka semakin lama waktu yang dibutuhkan untuk melakukan logins. Semakin sulit pula untuk memanage dan mengingat username dan password milik user. Penggunaan smart login yang dikombinasikan dengan teknologi QR-code dinilai praktis dan dapat memberi solusi pada masalah tersebut. User tidak perlu melakukan login berulang– ulang ke suatu website yang sama. ID dan username serta password user disimpan dalam suatu database, saat user melakukan login, maka aplikasi akan otomatis mengisi form web dengan ID dan password yang tersimpan tersebut. Aplikasi Smart Login pada Situs Web menggunakan QR-Code merupakan alternatif untuk membantu user melakukan manajemen account di berbagai situs web, dengan cara yang praktis, mudah, dan sederhana. Kata Kunci—Aplikasi Desktop, QR-Code, Situs Web, Smart Login.
I.
P
PENDAHULUAN
erkembangan jaman dan budaya telah banyak membuat perubahan pada gaya hidup ber-internet manusia. Kebutuhan manusia untuk eksis pada berbagai komunitas dan situs dunia maya mendorong juga kebutuhan untuk memiliki banyak account di berbagai situs web. Dengan banyaknya account yang dimiliki seseorang, maka semakin lama dan tidak praktis untuk melakukan login pada setiap account situs yang dia miliki, dan semakin susah pula untuk mengingat-ingat setiap username dan password dari setiap account yang dia miliki. QR-code merupakan wujud barcode dua dimensi yang memiliki kemampuan menyimpan informasi berupa teks atau string. Penggunaan QR-code untuk menyimpan informasiinformasi penting belakangan ini semakin marak dan awam. Di beberapa situs forum, disediakan QR-code yang jika dipindai dengan QR-code pemindai akan menampilkan tautan menuju forum yang dimaksud. Di beberapa pameran lukisan di negara-negara Eropa, QR-code digunakan sebagai penyimpan informasi lukisan yang dipajang. Pengunjung
pameran dapat memindai QR-code untuk menemukan informasi seperti nama pelukis, jenis lukisan, dan esai singkat tentang lukisan tersebut. Di Jepang dan Korea QR-code dijadikan sebagai sarana belanja online. Konsumen cukup memindai gambar QR-code yang ada di poster suatu produk untuk melakukan pemesanan produk yang dijual. Pembayaran dilakukan lewat rekening bank yang terhubung ke jaringan perangkat mobile. Disini, penulis ingin melakukan implementasi QR-code sebagai sarana smart login berbasis desktop, untuk mempermudah pengguna aplikasi melakukan login ke berbagai situs web. Oleh karena itu, penulis mengambil judul “Smart Login Pada Situs Web Menggunakan Qr-code” II.
KAJIAN PUSTAKA
A. QR-code QR-code adalah jenis barcode yang berbentuk dua dimensi yang dikembangkan oleh Denso Wave, sebuah divisi Denso Corporation, sebuah perusahaan di Jepang, yang dipublikasikan pada tahun 1994. QR merupakan singkatan dari Quick Response (respon / tanggapan cepat), sehingga fungsi atau tujuan utama dari teknologi ini adalah penyampaian informasi dengan cepat dan mendapat tanggapan atau respons yang cepat pula. Oleh karena itu QR-code dapat dengan mudah dibaca oleh pemindai. Berbeda dengan barcode biasa yang berbentuk satu dimensi dan menyimpan informasi secara horizontal, QR-code mampu menyimpan informasi secara horisontal dan vertikal. QR-code juga mampu menyimpan teks alfanumerik, kanji, kana, hiragana, simbol, biner, dan control code. QR-code adalah simbol matriks dengan karakteristik sebagai berikut: 1. Karakter yang dapat di-encode: a. Data numerik (digit 0 - 9); b. Data alfanumerik (digit 0 - 9; huruf kapital AZ; sembilan karakter tanda baca: space, $ % * + - . / : ); c. Data byte (default: ISO/IEC 8859-1); d. Huruf kanji. 2. Versi (Ukuran simbol) (tidak termasuk quiet zone): 21 x 21 modul hingga 177 x 177 modul (Versi 1
JURNAL TEKNIK POMITS Vol. 1, No. 1, (2012) 1-4
3.
4.
5.
6.
hingga 40, setiap versi yang lebih tinggi memiliki ukuran 4 modul lebih besar pada sisinya). Ukuran maksimum simbol QR Code, Versi 40-L: a. Data numerik: 7089 characters b. Data alfanumerik: 4296 characters c. Data byte: 2953 characters d. Data kanji: 1817 characters Level koreksi kesalahan yang tersedia: Empat level koreksi kesalahan Reed-Solomon dengan kemampuan koreksi sebagai berikut: a. L 7% b. M 15% c. Q 25% d. H 30% Penambahan Terstruktur (Structured Append): Memungkinkan file data direpresentasikan secara logikal dan terus-menerus pada 16 simbol QR-code. Simbol dapat dipindai dengan urutan apapun agar data orisinal ter-rekonstruksi dengan benar. Extended Channel Interpretations: Mekanisme ini memungkinkan untuk menggunakan karakter selain set karakter default (contoh: Arabic, Cyrillic, Greek) and interpretasi data lainnya (contoh: data yang dikompresi menggunakan kompresi tertentu).
B. Java Media Framework (JMF) Java Media Framework (JMF) merupakan API yang memungkinkan audio, video, dan media berbasis waktu lainnya untuk ditambahkan dan dijalankan pada aplikasi yang berbasis java. Library ini mengijinkan aplikasi untuk menangkap, memainkan, streaming dan transcode berbagai format multimedia. C. Enkripsi AES Aplikasi smart login pada situs web menggunakan QR-code memakai enkripsi AES sebagai penunjang aspek keamanan pada data yang disimpan dalam file database maupun data yang disimpan dalam QR-code. Java sendiri sudah memiliki support terhadap enkripsi ini, sehingga untuk menggunakannya tidak perlu melakukan install library atau perangkat lunak third-party. D. XAMPP XAMPP adalah software open source multiplatform yang fungsinya sebagai server localhost. Nama XAMPP merupakan singkatan dari X (simbol bahwa dapat dijalankan di sistem operasi Windows, Linux, MacOS, dan Solaris), Apache, MySQL, PHP dan Perl. Artinya XAMPP merupakan server Apache dan MySQL yang ditulis dalam bahasa PHP dan Perl. XAMPP merupakan perangkat lunak yang populer digunakan untuk mengembangkan web karena sangat mudah untuk diinstall dan digunakan. Pada aplikasi smart login pada situs web menggunakan QRcode, XAMPP digunakan sebagai server localhost untuk menjalankan halaman php redirect untuk menginjeksikan data login ke situs web. Halaman php ini disimpan dalam folder “htdocs” yang merupakan folder penyimpanan untuk halaman web yang di-hosting di XAMPP.
2 E. Smart Login Smart login merupakan sistem login cerdas dimana sistem akan mengenali gambar tertentu yang diinputkan user melalui kamera atau alat pemindai lainnya untuk melakukan login. Smart login bisa menyimpan informasi spesifik dari user, sesuai dengan tipe pemindai yang digunakan. Contoh dari sistem smart login adalah, ASUS Smart Logon. Suatu aplikasi yang memungkinkan user untuk masuk ke sistem operasi komputer melalui scan wajah. III.
METODOLOGI
A. Deskripsi Umum Tugas akhir ini dirancang untuk menyimpan data username dan password yang dimasukkan user ke dalam suatu database, lalu men-generate QR-code yang berisi nomor indeks database tersebut. Aplikasi juga dapat melakukan login ke situs web yang telah dimasukkan datanya oleh user tersebut, dengan cara user harus memindai kartu QR-code yang telah di-generate aplikasi tersebut melalui kamera. Aplikasi desktop berbasis java ini menggunakan library Java barcode generator dan QR code untuk melakukan encode dan decode QR-code. Aplikasi ini juga menggunakan library Java Media Framework untuk melakukan pemindaian gambar menggunakan kamera. Selain menggunakan library – library diatas, aplikasi ini membutuhkan XAMPP sebagai server Apache dan MySQL lokal, untuk menjalankan halaman php redirect yang digunakan untuk login ke situs web asli. B. Perancangan Arsitektur Sistem Alur kerja aplikasi smart login pada situs web menggunakan QR-code dibagi dalam tiga tahap. Yaitu tahap pendaftaran profil user, peng-input-an data login, dan tahap smart login. Berikut alur kerja pada masing – masing tahapan. Pada tahap pendaftaran profil user, user diminta untuk memberikan input nama profil yang hendak didaftarkan. Sistem akan melakukan enkripsi pada nama profil yang dibuat, kemudian membuatkan file txt database dan gambar QR-code untuk dicetak. Terdapat dua buah prosedur periksa kesalahan (error checking) pada tahap ini. Yang pertama adalah, apabila user tidak memberi input pada textbox (textbox dibiarkan kosong), kemudian menekan tombol submit. Sistem akan memberikan peringatan kepada user untuk memberikan input nama profil, dan membatalkan pendaftaran. Yang kedua adalah, apabila user memberi input nama profil yang sudah terdaftar pada textbox input nama profil, kemudian menekan tombol submit. Sistem akan memberikan peringatan kepada user untuk memasukkan nama profil yang lain, dan membatalkan pendaftaran. Alur kerja pendaftaran profil user dapat dilihat pada Gambar 1.
JURNAL TEKNIK POMITS Vol. 1, No. 1, (2012) 1-4
Tahap ketiga adalah tahap smart login. User menggunakan webcam untuk menangkap gambar QR-code untuk melakukan smart login ke situs web. Berikut alur kerjanya dapat dilihat pada Gambar 3.
Get nama profil
Nama profil kosong
3
Ya
Get image QR-code
Tidak
Ya
Nama profil sudah ada di userlist
Simpan dalam file
Baca pesan dalam QR-code
Baca dan terjemahkan isi file teks
Cari file teks
Tidak
Enkripsi nama profil
Buat QR-code
Simpan nama profil dalam userlist
Inject data login ke browser
Selesai
Tidak
Gambar 1. Alur Kerja Pendaftaran Profil User
Kemudian, tahap berikutnya adalah tahap input data login. User memasukkan data login berupa URL, username, dan password dari situs tujuan login. Data ini akan dienkripsi, kemudian data tersebut akan disimpan ke dalam sebuah file txt database. Data yang tersimpan ini akan digunakan untuk proses smart login. Berikut alur kerjanya dapat dilihat pada Gambar 2. Get data login situs web
Cari file txt dengan nama sesuai profil
Ya File ditemukan
Tidak
Buat file
Enkripsi data login
Simpan teks kedalam file
Selesai
Gambar 2. Alur Kerja Penginputan Data Login
Selesai membaca baris terakhir file teks Ya
Selesai
Gambar 3. Alur Kerja Smart Login
C. Implementasi Sistem Implementasi sistem merupakan tahapan dimana rancangan sistem dituliskan dalam baris kode. Implementasi Pembuatan Profil Pembuatan profil melibatkan tiga tahapan proses. Proses pertama, sistem akan meminta input nama profil dari user. Nama profil yang dimasukkan ini akan diperiksa oleh sistem. Sistem akan membatalkan pendaftaran apabila nama tersebut kosong atau sudah terdaftar. Kemudian, sistem akan melakukan enkripsi pada nama profil dan menyimpan nama profil terenkripsi kedalam QRcode. QR-code inilah yang nantinya akan dicetak dan digunakan untuk login. Terakhir, sistem akan mendaftarkan nama profil ke dalam file userlist. Implementasi Input Data Login Input data login akan dienkripsi menggunakan enkripsi AES, kemudian disimpan ke dalam file txt database pada sistem. Terdapat prosedur koreksi kesalahan. Apabila user tidak mengisi salah satu atau lebih textbox data login, maka sistem akan mengeluarkan peringatan dan membatalkan proses. Implementasi Smart Login Kamera menangkap gambar QR-code, kemudian melakukan proses decode pada gambar. Kemudian, sistem akan mencari data login milik user yang terbaca dari QR-
JURNAL TEKNIK POMITS Vol. 1, No. 1, (2012) 1-4
4
code. Setelah mendapatkan data login milik user, sistem akan menjalankan halaman php redirect dan melakukan injeksi data login ke halaman web untuk melakukan login. IV.
UJI COBA DAN EVALUASI
A. Uji Coba Fungsional Pada aplikasi smart login pada situs web menggunakan QRcode ini telah dilakukan beberapa uji coba ke berbagai situs web untuk mencoba kinerja dari aplikasi. Berikut hasil dari uji coba tersebut dapat diamati pada Tabel 1. Tabel 1 Hasil uji coba smart login menggunakan QR-code Data Uji Hasil Yang Hasil Nyata Diharapkan a. yahoo.com a. login sukses a. User berhasil login ke halaman web yahoo.com b. login sukses b. mintees.com b. User berhasil login ke halaman web c. login sukses mintees.com c. adrive.com
d. 99designs.com
e. blapkmarket.com
d. login sukses e. login sukses f. login sukses
f. gmail.com
g. twitter.com
g. login sukses
V.
UCAPAN TERIMA KASIH Penulis M.B. mengucapkan terima kasih kepada Tuhan Yang Maha Esa, kedua orang tua dan keluarga penulis, dosen pembimbing, dosen dan kepala jurusan Teknik Informatika, kerabat-kerabat dekat, serta berbagai pihak yang telah membantu penulis dalam menyelesaikan Tugas Akhir ini. DAFTAR PUSTAKA [1] [2]
Hasil
[3]
OK [4] OK [5]
c. User berhasil login ke halaman web adrive.com
OK
d.User berhasil login ke halaman web 99designs.com
OK
e.User berhasil login ke halaman web blapkmarket.com
OK
f. User tidak dapat login ke gmail.com karena ada proteksi cookie
Gagal
d.User berhasil login ke halaman web twitter.com
OK
KESIMPULAN
Berdasarkan analisis dan pengujian yang telah dilakukan pada tugas akhir ini maka dapat diambil beberapa kesimpulan antara lain: a. Aplikasi “Smart Login pada Situs Web menggunakan QR-code” telah berhasil mengimplementasikan sistem smart login. b. Aplikasi dapat meng-generate dan men-decode QR-code dengan bantuan dua buah library, yaitu Java Barcode Generator dan Java QR-code. c. Aplikasi dapat mengirimkan data ke situs web yang bersangkutan untuk login dengan menggunakan halaman php sebagai redirect untuk menginjeksikan script login. d. Smart login tidak berhasil di seluruh situs web yang dijadikan sasaran eksperimen, dikarenakan terdapat proteksi – proteksi yang dipasang di situs web tersebut.
Denso-Wave. About 2D code .
diakses pada 13 Januari, 2012. Oracle. Java SE Desktop Technologies. diakses pada 20 Mei ,2012. Barcodelib. Java Barcode Generator for Generating Barcode Images in Java Applications. diakses pada 15 Januari, 2012. Yanbe,Yusuke. Open source QR Code Library. diakses pada 28 Januari, 2012. Leakhina, Chem. JMF Webcam app with saving JPEG diakses pada 26 Mei, 2012.
