Download Login Tunggal pada Berbagai Social Chat: Studi Kasus Twitter

Login Tunggal pada Berbagai Social Chat: Studi Kasus Twitter
Marvin Chandra Wijaya
Fakultas Teknik, Universitas Kristen Maranatha, Bandung
Abstract
At this time a person already has a lot of accounts on cloud computing. Social Chat such as
facebook, twitter; email account such as Gmail, Microsoft Exchange - EWS, Microsoft Exchange IMAP, Office 365, Microsoft Exchange - Active sync; storage files such as Evernote, SkyDrive,
Google Drive, Dropbox, Box is already widely used by people. With many accounts, it would appear
the confusion when log in (fill in the username and password), so we need a single sign on for
various accounts.
By using a single login, user only need to remember one username and one password.
Application uses open source program like XAMPP: Apache for web server, PHP for programming
adan MYSQL for database.
Keywords: cloud computing, single sign on, facebook
I.
Pendahuluan
1.1 Latar Belakang
Berbagai akun yang dimiliki dalam internet baik berupa social chat (seperti : facebook,
twitter, dll), email account (seperti : Gmail, Microsoft Exchange, dll), media penyimpanan dalam
dunia intenet (seperti : SkyDrive, Google Drive, Dropbox, Box, dll) dapat membuat pengguna
kewalahan sewaktu login (mengisikan username dan password), karena harus menghapal cukup
banyak username dan password pada setiap akun1.
Setiap akun memiliki alamat website yang berbeda-beda. Sebagai contoh untuk facebook
menggunakan alamat URL www.facebook.com dan untuk twitter memiliki alamat URL
www.twitter.com. Sehingga pengguna harus menghafal dan mengingat setiap alamat yang ada.
Dengan adanya alamat tunggal maka dapat mempermudah setiap penggunaan dalam pembukaan
setiap alamat karena cukup menggunakan satu alamat URL saja.
Penggunaan satu alamat email dan dan membuat satu akun tunggal yang dapat mengakses
beberapa akun pada beberapa tempat dapat mempermudah proses login. Selain itu dengan
menggunakan satu alamat web terintegrasi maka dimungkinkan unutuk mengakses beberapa situs
dalam suatu halaman (page) dalam satu situs yang sama.
1
6
Iwan Sofana, Cloud Computing – Teori, Praktek, CV. Informatika, 2012
Single Sign On pada Cloud Computing: Studi Kasus Twitter
(Marvin Chandra Wijaya)
Gambar 1. Setiap orang memiliki banyak aplikasi dalam dunia internet
Sumber : Dokumen Pribadi
Dalam sistem single sign on, setiap pengguna melakukan login pada satu server yang disebut
dengan identity server. Setelah pengguna terindetifikasi oleh identity server tersebut, pengguna
tersebut dapat mengakses akun pada server yang lain tanpa memasukkan username dan password
kembali. Dengan tidak diperlukannya memasukkan username dan password berulang kali di beberapa
situs.
Gambar 2. Menggunakan satu akun tunggal.
Sumber : Dokumen Pribadi
7
Zenit
Volume 2 Nomor 1 April 2013
1.2 Rumusan Masalah
Berdasarkan latar belakang yang ada, dapat dirumuskan beberapa pokok permasalahan yang
akan dianalisis dan dikaji :
 Bagaimana membuat koneksi dengan server provider seperti twitter, facebook dan lainnya
menggunakan satu akun ?
 Bagaimana pengambilan data dari server provider seperti twitter, facebook dan lainnya
menggunakan satu akun ?
1.3 Tujuan
Berdasarkan rumusan masalah yang ada, dapat diarahkan tujuan pembahasan adalah sebagai
berikut :
 Membuat koneksi dengan server provider seperti twitter, facebook dan lainnya menggunakan
satu akun.
 Membuat aplikasi pengambilan data dari server provider seperti twitter, facebook dan lainnya
menggunakan satu akun.
1.4 Batasan Masalah
Berdasarkan tujuan pembahasan yang dibuat, aspek-aspek yang menjadi pembatasan masalah
adalah :
 Aplikasi yang dihasilkan berbasis web.
 Aplikasi yang dihasilkan mampu melakukan koneksi dengan dua server provider pada saat
yang bersamaan.
 Aplikasi dibuat dengan menggunakan XAMPP.
2. METODE PENELITIAN
Teknologi Single-sign-on (sering disingkat menjadi SSO) adalah teknologi yang mengizinkan
pengguna jaringan agar dapat mengakses sumber daya dalam jaringan hanya dengan menggunakan
satu akun pengguna saja. Teknologi ini sangat diminati, khususnya dalam jaringan yang sangat besar
dan bersifat heterogen (di saat sistem operasi serta aplikasi yang digunakan oleh komputer adalah
berasal dari banyak vendor, dan pengguna dimintai untuk mengisi informasi dirinya ke dalam setiap
platform yang berbeda tersebut yang hendak diakses oleh pengguna). Dengan menggunakan SSO,
seorang pengguna hanya cukup melakukan proses autentikasi sekali saja untuk mendapatkan izin
akses terhadap semua layanan yang terdapat di dalam jaringan.
Selain mendatangkan manfaat, SSO juga dapat mendatangkan bencana. Dari cara pandang
seperti ini, beberapa pengamat memperkirakan bahwa penggunaan SSO dapat menghemat biaya untuk
memelihara password yang rumit yang dapat mencapai ratusan dolar setiap pengguna tiap tahun. 2
2
8
Elcom, Cloud computing, Andi Publisher, 2012
Single Sign On pada Cloud Computing: Studi Kasus Twitter
(Marvin Chandra Wijaya)
Gambar 3. Single Sign On
2.1. Twitter
Twitter adalah sebuah situs web yang dimiliki dan dioperasikan oleh Twitter Inc., yang
menawarkan jejaring sosial berupa mikroblog sehingga memungkinkan penggunanya untuk mengirim
dan membaca pesan yang disebut kicauan (tweets). Kicauan adalah teks tulisan hingga 140 karakter
yang ditampilkan pada halaman profil pengguna. Kicauan bisa dilihat secara luar, namun pengirim
dapat membatasi pengiriman pesan ke daftar teman-teman mereka saja. Pengguna dapat melihat
kicauan penulis lain yang dikenal dengan sebutan pengikut ("follower").
Semua pengguna dapat mengirim dan menerima kicauan melalui situs Twitter, aplikasi
eksternal yang kompatibel (telepon seluler), atau dengan pesan singkat (SMS) yang tersedia di negaranegara tertentu. Situs ini berbasis di San Bruno, California dekat San Francisco, situs ini pertama kali
dibuat. Twitter juga memiliki server dan kantor di San Antonio, Texas dan Boston, Massachusetts.
Sejak dibentuk pada tahun 2006 oleh Jack Dorsey, Twitter telah mendapatkan popularitas di
seluruh dunia dan saat ini memiliki lebih dari 100 juta pengguna. Hal ini kadang-kadang digambarkan
sebagai "SMS dari internet".
Twitter memiliki logo berupa seekor burung berwarna biru yang bernama "Larry the "Bird",
dinamai setelah nama seorang mantan pemain basket NBA, Larry Bird.3
Twitter adalah merupakan salah satu dari 10 situs web yang paling sering dikunjungi di
seluruh dunia oleh Alexa trafik web analisis. Februari 2009 Compete.com blog entry mengatakan
bahwa Twitter berada di tingkat ketiga sebagai situs yang digunakan jaringan sosial berdasarkan
jumlah pengunjung bulanan sebanyak 6 juta pengunjung. Pada bulan Maret 2009, Nielsen.com blog
menyatakan Twitter sebagai situs yang tumbuh tercepat--dalam kategori Komunitas Anggota. Twitter
memiliki pertumbuhan bulanan sebesar 1.382%, meningkat dari 475.000 pengunjung pada Februari
2008 menjadi 7 juta pada Februari 2009.
Kurang dari setengah kicauan yang dikirim-tampil menggunakan web, sedangkan sebagian
besar pengguna menggunakan aplikasi pihak ketiga (berdasarkan analisis 500 juta kicauan oleh
Sysomos). Ada banyak alat atau aplikasi dari twitter. Beberapa di antarnya adalah aplikasi
TweetDeck, Salesforce.com, HootSuite, Twitterfeed, UberSocial, Snaptu, TweetWawa, SnapTwit,
SimpleTweet, Gravity
3
_ ,” http://id.wikipedia.org/wiki/Twitter”
9
Zenit
Volume 2 Nomor 1 April 2013
2.2. Twitter developer
Fungsi yang dimiliki oleh twitter developer untuk para pembuat aplikasi adalah dengan
menggunakan twitter cards. Twitter cards memiliki beberapa fungsi, yaitu :
1.
2.
3.
4.
5.
Contoh pada twitter card, dihasilkan :
Gambar 4: Contoh dari twitter card dihasilkan
Sumber : https://dev.twitter.com/docs/cards
Tabel 1. Meta tag pada twitter cards
10
Single Sign On pada Cloud Computing: Studi Kasus Twitter
(Marvin Chandra Wijaya)
Sumber : https://dev.twitter.com/docs/cards/markup-reference
Property
Card
Value
OpenGraph
Fallback
twitter:card
all
summary, photo, gallery, product,
app, player
twitter:site
summary, photo,
gallery, product,
app, player
@username of website
twitter:site:id
summary, photo,
gallery, product,
player
Same as twitter:user, but the
user's Twitter ID
twitter:creator
summary, photo,
gallery, product,
player
@username of content creator
twitter:creator:id
summary, photo,
gallery, product,
player
Twitter user ID of content creator
twitter:description
summary, gallery, Description of content (maximum
og:description
product, player
200 characters)
twitter:title
summary, photo,
gallery, product,
player
Title of content (max 70
characters)
og:title
twitter:image
summary, photo,
product, player
URL of image to use in the card
og:image
twitter:image:width
summary, photo,
product, player
Width of image in pixels
og:image:width
twitter:image:height
summary, photo,
product, player
Height of image in pixels
og:image:height
twitter:image0, twitter:image1,
twitter:image2, and twitter:image3
gallery
1st, 2nd, 3rd, and 4th image in
the gallery, respectively
twitter:player
player
HTTPS URL of player iframe
twitter:player:width
player
Width of iframe in pixels
twitter:player:height
player
Height of iframe in pixels
twitter:player:stream
player
URL to raw video or audio
stream
twitter:data1
product
Top customizable data field, can
be a relatively short string (ie
"$3.99")
twitter:label1
product
Customizable label or units for
the information in twitter:data1
(best practice: use all caps)
twitter:data2
product
Bottom customizable data field,
can be a relatively short string (ie
"Seattle, WA")
twitter:label2
product
Customizable label or units for
the information in twitter:data1
(best practice: use all caps)
twitter:app:name:iphone
all
Name of your iPhone app
twitter:app:id:iphone
all
Your app ID in the iTunes App
Store (Note: NOT your bundle
ID)
11
Zenit
Volume 2 Nomor 1 April 2013
Property
Card
Value
twitter:app:url:iphone
all
Your app's custom URL scheme
(you must include "://" after your
scheme name)
twitter:app:name:ipad
all
Name of your iPad optimized app
twitter:app:id:ipad
all
Your app ID in the iTunes App
Store
twitter:app:url:ipad
all
Your app's custom URL scheme
twitter:app:name:googleplay
all
Name of your Android app
twitter:app:id:googleplay
all
Your app ID in the Google Play
Store
twitter:app:url:googleplay
all
Your app's custom URL scheme
Contoh pada twitter timelines adalah :
Gambar 5. Contoh Embedded timelines
Sumber : https://dev.twitter.com/docs/embedded-timelines
Contoh pada embedded tweet :
Gambar 6. Contoh Embeded Tweet
Sumber : https://dev.twitter.com/docs/embedded-tweets
12
OpenGraph
Fallback
Single Sign On pada Cloud Computing: Studi Kasus Twitter
(Marvin Chandra Wijaya)
Maka hasil dari embedded tweet adalah :
Gambar 7. Hasil dari embedded tweet
Sumber : https://dev.twitter.com/docs/embedded-tweets
2.3 XAMPP
Banyak sekali bahaas pemograman yang dapat dipelajari untuk membangun sebuah aplikasi
berbasis web. Mulai dari HTML, XML, Perl, CGI Script, Java Script, Java Servets, ASP, PP dan lain
sebagainya. Sedangkan database yang digunakan pun bervariasi mulai dari Microsoft Access, SQL
Server, MySQL dan lain-lain. Tetapi kebanyakan dar program dan database di atas berdiri sendiri
sebagai sebuah perangkat lunak, sehingga menyulitkan proses intalasi dan aktivasi, jika akan
digunakan secara terintegrasi.
J Wynia, seorang ahli pemograman web server side berkebangsaan Czech menciptakan
perangkat lunak yang berisi tiga paket utama untuk keperluan pemograman web server side yang
disebut PHP Triad. PHP Triad terdiri atas “APACHE” yang menjalankan fungsi sebagai web server,
“PHP” sebagai bahasa pemograman berbasis web (web programming) dan “MYSQL” untuk
keperluan pengelolaan data berbasis web (web database). Sesuai dengan perkembangannya nama
PHP Triad berubah menjadi XAMPP.
XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah
paket.Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web
server Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan
mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi. Versi XAMPP yang ada
saat ini adalah Versi 1.4.14 atau yang terbarunya anda bisa diunduh pada
http://www.apachefriends.org/en/xampp-window.html.
Software XAMPP versi ini terdiri atas:
a. Apache
b. MySQL
c. PHP
d. phpMyAdmin
2.3.1. APACHE
Apache sudah berkembang sejak versi pertamanya. Apache bersifat open source, artinya
setiap orang boleh menggunakannya, mengambil dan bahkan mengubah kode programnya. Apache
berfungsi menghasilkan halaman web yang benar untuk pengguna, berdasarkan kode PHP yang
dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan,
maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung
halaman web yang dihasilkan.
2.3.2. PHP
Bahasa pemrograman PHP merupakan bahasa pemrograman untuk mebuat web yang bersifat
server-side scripting. PHP memungkinkan untuk membuat suatu halaman web yang bersifat dinamis.
PHP dapat dijalankan pada berbagai macam Operating System (OS), misalnya Windows, Linux dan
13
Zenit
Volume 2 Nomor 1 April 2013
Mac OS.Selain Apache, PHP juga mendukung beberapa web server lain, misalnya Microsoft IIS,
Caudium, PWS dan lain-lain.
PHP dapat memanfaatkan database untuk menghasilkan halaman web yang dinamis. Sistem
manajemen database yang sering digunakan bersama PHP adalah MySQL. Namun PHP juga
mendukung sistem menajamen database lainnya seperti Oracle, Microsoft Acces, Interbase, d-Base,
PostgreSQL dan sebagainya. Sama dengan web server lainnya PHP juga bersifat open source
sehingga setiap orang dapat menggunakannya dengan gratis.
2.3.3. MySQL
SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa
terstruktur yang khusus digunakan untuk mengolah database.SQL pertama kali didefinisikan oleh
American National Standards Institute (ANSI) pada tahun 1986. MySQL adalah sebuah sistem
manajemen database yang bersifat open source. MySQL dapat digunakan untuk membuat dan
mengola database beserta isinya. MySQL dapat dimanfaatkan untuk menambahkan, mengubah dan
menghapus data yang berada dalam database. MySQL dapat digunakan untuk mengelola database
mulai dari yang kecil sampai dengan yang sangat besar. MySQL juga dapat menjalankan perintahperintah Structured Query Language (SQL) untuk mengelola database-database yang ada di dalamnya.
2.3.4. PHPMyAdmin
Pengelolaan database dengan MYSQL harus dilakukan dengan mengetikkan baris-baris
perintah yang sesuai (command line) untuk setiap maksud tertentu. Selain dengan mengetikan setiap
baris perintah query-nya, maka dapat juga menggunakan phpMyadmin untuk mempermudah
manipulasi database. Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola data
base dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin dapat membuat tabel,
mengisi data dan lain-lain dengan mudah tanpa harus hafal perintahnya. Untuk mengaktifkan
phpMyAdmin langkah-langkahnya adalah : yang pertama setelah XAMPP terinstall, maka harus
mengaktifkan web server Apache dan MySQL dari control panel XAMPP. Yang kedua, jalankan
browser (IE, Mozilla Firefox atau Opera) lalu ketikkan alamat web berikut :
http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga apabila telah nampak
interface (tampilan antar muka) phpMyAdmin dapat dimulai dengan mengetikkan nama database,
nama tabel dan seterusnya.
3. HASIL DAN PEMBAHASAN
3.1 Perancangan
Adapun langkah-langkah cara kerja website yang dibuat adalah :
 Halaman Pembuka
 Halaman Login
 Halaman Pendaftaran anggota baru / registrasi
 Halaman Utama setelah login
 Halaman untuk setting
 Halaman untuk menampilkan facebook, chat, dan lain-lain.
Sehingga dalam pembuatan program ini diperlukan juga database untuk kebutuhan data anggota
(master) dan juga data anggota (detail) yang berisi setting ataupun aktivitas dari setiap anggotanya.
14
Single Sign On pada Cloud Computing: Studi Kasus Twitter
(Marvin Chandra Wijaya)
3.2 Coding
Pada bagian ini akan dibahas beberapa bagian dari coding yang dibuat. Adapu coding yang
dibuat untuk setiap halaman website cukup banyak, disini akan ditampilkan beberapa bagian coding
yang penting yang berkaitan dengan koneksi dengan twitter.

Pada penggunaan embedded timelines diperlukan iframe seperti di bawah ini :
<a class="twitter-timeline"
href="https://twitter.com/$user"
data-widget-id="339733083882389505">Tweets by $email </a>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'htt
p':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertB
efore(js,fjs);}}(document,"script","twitter-wjs");</script>

Pada pembuatan tweet button diperlukan tag seperti di bawah ini :
1.
<a href="https://twitter.com/share" class="twitter-share-button"
data-lang="en">Tweet</a>
2.
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.cr
eateElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.
js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter
-wjs");</script>

Pada pembuatan follow button diperlukan tag seperti di bawah ini :
1.
<a href="https://twitter.com/twitterapi" class="twitter-followbutton" data-show-count="false" data-lang="en">Follow @twitterapi</a>
2.
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.cr
eateElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fj
s.parentNode.insertBefore(js,fjs);}}(document,"script","twitterwjs");</script>
3.2 Hasil Tampilan
Pada saat web dibuka maka akan muncul homepage seperti di bawah ini. Pengguna dapat
memasukkan username dan password untuk Single Sign ON, atau membuat username baru :
15
Zenit
Volume 2 Nomor 1 April 2013
Gambar 8. Halaman Pembuka / login
Sumber : Dokumen Pribadi
Pengguna dapat mendaftarkan akun-akun pada facebook, twitter dan lain sebagainya :
Gambar 9. Pendaftaran Akun
Sumber : Dokumen Pribadi
Pada gambar di bawah ini adalah contoh ketika twitter dibuka.
Gambar 10. Twitter
Sumber : Dokumen Pribadi
Pada contoh di bawah ini adalah ketika hendak melakukan twit :
16
Single Sign On pada Cloud Computing: Studi Kasus Twitter
(Marvin Chandra Wijaya)
Gambar 11. Twit
Sumber : Dokumen Pribadi
Gambar di bawah ini contoh ketika login ke facebook. Dalam gambar tersebut diperlihatkan contoh
dalam satu page, dapat terkoneksi ke twitter dan facebook secara bersamaan.
Gambar 12. Facebook
Sumber : Dokumen Pribadi
4. SIMPULAN
Pembuatan koneksi ke berbagai akun telah berhasil dilakukan. Dalam satu page yang sama
juga dapat terkoneksi ke beberapa akun berbeda secara bersamaan. Hanya saja perlu adanya
pengaturan lebih lanjut dan lebih baik lagi dalam pengorganisasian akun.
DAFTAR PUSTAKA
1.
2.
3.
4.
5.
6.
7.
Iwan Sofana, Cloud Computing – Teori, Praktek, CV. Informatika, 2012
Elcom, Cloud computing, Andi Publisher, 2012
_ , http://id.wikipedia.org/wiki/Facebook
Twitter, https://dev.twitter.com/docs/cards
Twitter, https://dev.twitter.com/docs/embedded-timelines
Twitter, https://dev.twitter.com/docs/embedded-tweets
Twitter, https://dev.twitter.com/docs/cards/markup-reference
17