April 20, 2017 thumb Melakukan Remote Terminal Server dengan Facebook Messengger.

setelah kemarin saya sedikit menjelaskan tentang Messengger Desktop, kali ini, saya ingin sedikit membahas pemanfaatan lain dari Facebook Messengger. ya , kita akan mencoba mengakali bagaimana caranya Facebook Messengger bisa kita pakai untuk melakukan Remote Server. kita akan memanfaatkan facebook API sedemikian hingga kita dapat membuat sebuah aplikasi yang dapat dipakai sebagai jembatan untuk me-remote Server dengan fasilitas Facebook Messengger. berikut ini adalah langkah-langkahnya.

  • Punya akun Facebook.
  • bikin Fan Page.
  • bikin Facebook Apps
  • HTTPS Tunneling
  • Tanam Source Code
  • Koneksikan Webhook.
  • Testing.

sebelum melakukan ini paling tidak sudah harus punya dasar programming tentang web, simple saja, minimal bisa programming web dan sudah punya sebuah web server localhost, tentang bagaimana caranya menginstall web server silakan baca di postingan saya yang berjudul Cara Install dan Settings Apache , MySQL dan PHPMyAdmin di Ubuntu Server . minimal bisa setup server apache lah. oke kita mulai dengan tahap 1, yakni harus sudah punya akun facebook, tapi hari gini gak punya akun facebook, kan gak mungkin banget. jadi langsung saya skip ke yang kedua. bikin sebuah Page.

Bikin Fan Page Facebook.

Pilih Facebook Fan Page Anda

Pilih Facebook Fan Page Anda

untuk membuat sebuah page, cukup kunjungi https://www.facebook.com/pages/create/ ,  setelah itu pilih salah satu jenis kategori. bolehlah kategori apapun, saya pilih Cause or Community. setelah itu page akan tampila sebagai halaman kosong, silakan ditambahkan edit-edit apapun untuk memberikan kesan page professional (tapi gak usah keren-keren intinya bukan ini).

Facebook Fan Page Milik Saya

Facebook Fan Page Milik Saya

Bikin Facebook Apps.

untuk bikin Facebook apps cukup kunjungi https://developers.facebook.com/apps , klik pada “Add New App Button“. pastikan sudah punya akun developer Facebook, karena kalau tidak, tidak akan bisa. untuk daftar jadi developer Facebook gampang sekali, cukup register doang nggak pakai bayar. setelah captcha muncul maka kita akan di bawa ke halaman Apps Page.

Buat sebuah App ID Baru

Buat sebuah App ID Baru

pada bagian sebelah kiri, pilih Add Product, maka akan muncul halaman Product Facebook. silakan pilih pada bagian Messengger, tekan get Started.

pada bagian Add Product piliih Messengger

pada bagian Add Product piliih Messengger

setelah itu scroll kebawah, sampai menemukan token Generation, dan pilih page yang akan kita pakai sebagai basis, sebagai contoh saya pakai page goblooge. setelah itu akan muncul halaman untuk meminta login, login seperti biasa (continue as bla-bla-bla). dan kemudian pada bagian page access token akan terisi denga sebuah karakter super panjang dalam bahasa Homo Sapiens Kuno. catat baik-baik access token tersebut. kalau sudah, berikutnya adalah kita setup sebuah web hook.  klik pada bagian “setup webhook” dibawah Token Generation tadi.

Simpan Elok - Elok Token Ini. lepas tuh klik Setup Web Hook.

Simpan Elok – Elok Token Ini. lepas tuh klik Setup Web Hook.

 Koneksikan Facebook Apps dengan Server.

tahap ini yang sebenarnya agak ribet, pertama facebook meminta kita untuk membuat sebuah callback url. maksudnya adalah, ketika ada Message masuk, akan diteruskan kemana oleh facebook. nah itu yang kita isi pada bagian Call Back URL , sedangkan untuk verify token kasih aja tulisan apapun tidak masalah, yang pasti mudah diingat. jangan lupa centangi pada bagian message dan message deliverles. jika di klik verify akan error, biarkan saja dahulu.

Pastikan Call Back Benar, kita akan isi ini nanti. Verify Token isi sesuai dengan keinginan anda.

Pastikan Call Back Benar, kita akan isi ini nanti. Verify Token isi sesuai dengan keinginan anda.

untuk call back url ini, tidak bisa sembarangan, pertama harus menggunakan protocol https, kedua harus punya IP public, sehingga untuk membuat hal tersebut, kita harus punya server baik beli atau sewa server yang menggunakan protocol https. sehingga untuk testing tidak bisa kita menggunakan Localhost. untungnya ada banyak disana https tunneling yang mana berfungsi untuk menjembantani antara komputer kita dengan dengan facebook. salah satunya dalah ngrok. silaan download ngrok di https://ngrok.com/download . pilih sesuai Operating System komputer kita. sebagai contoh saya pakai Linux.

sebelum kita lanjut, untuk bagian Setup Facebook, pause dulu , kita akan masuk pada bagian setup HTTP Tunneling.

HTTPS Tunneling

Ngrok yang berjalan di Terminal

Ngrok yang berjalan di Terminal

download dan kemudian jalankan ngrok, karena kebetulan saya memakai linux tinggal saya extract hasil download tadi dan kemudian saya jalankan dengan perintah :

./ngrok http 80

maksud dari perintah ini adalah untuk meminta ngrok melakukan tunneling pada server localhost milik kita. sebelum melakukan hal ini pastikan konfigurasi apache anda sudah selesai. jangan sampai sudah sampai kesini tapi ternyata konfigurasi untuk apache belum selesai. ketika ngrok berjalan akan memberikan tampilan konfirmasi bahwa ngrok sedang berjalan dalam bentuk output terminal. kalau mau lebih yakin sebagai contoh ngrok menyediakan web interface, cukup ketikan url web interface yang tertera pada console ke browser sebagai contoh milik saya adalah  http://127.0.0.1:4040/inspect/http. jika web interface muncul , pertanda ngrok sudah berjalan dengan baik.

Ngrok yang sudah berjalan dan siap menunggu request dari facebook

Ngrok yang sudah berjalan dan siap menunggu request dari facebook

Tanam Source Code

source code disini yang saya maksudkan adalah source code php. source code inilah yang nantinya akan bertugas untuk menjawab perintah dari facebook menssengger yang masuk. untuk lebih gampangnya , karena saya menggunakan linux, cukup saya buat sebuah folder bernama chatbot di directory /var/ww/html/. kemudian buat sebuah file index.php dalam folder gbot tersebut. sehingga path lengkapnya adalah /var/www/html/gbot/index.php. nah index.php inilah yang nantinya akan kita buat sedemikian rupa supaya bisa membalas chat facebook. untuk index.php berikut ini source code yang harus dituliskan.

<?php 


$access_token = "EAAYaxAAjA3cBAH3s178ae986YArLwwhZCS44ROdJlFTeZB0GbnhHVhe7hegnVI1rnXl2KCJTLnYFOp50Tc4GmEZBfgmuBMNpfMZAseU1I33RYWlyeZAnFHS00fz0iEZBPUhUZAFCt2CEISG5NkjU6BQmCheGEDm82TwJxZAjCAciAQZDZD";
$verify_token = "gbot_goblooge";
$hub_verify_token = null;


if(isset($_REQUEST['hub_challenge'])) {
 $challenge = $_REQUEST['hub_challenge'];
 $hub_verify_token = $_REQUEST['hub_verify_token'];
}

if ($hub_verify_token === $verify_token) {
    echo $challenge;
    return;
}


$message_to_reply = 'Testing Gan';
$input = json_decode(file_get_contents("php://input"), true);
$sender = $input["entry"][0]["messaging"][0]["sender"]["id"];
$message = $input["entry"][0]["messaging"][0]["message"]["text"];

$url = "https://graph.facebook.com/v2.6/me/messages?access_token=".$access_token;
$ch = curl_init($url);


$hasil=shell_exec ( $message );
if($hasil=="" || $hasil==NULL){
    $hasil="Process Rampung Gak Ono Hasil";
}

$jsonData=array();
$jsonData['recipient']=array();
$jsonData['recipient']['id']=$sender;
$jsonData['message']=array();
$jsonData['message']['text']=$hasil;


$jsonDataEncoded = json_encode($jsonData);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonDataEncoded);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

if(!empty($input['entry'][0]['messaging'][0]['message'])){
    $result = curl_exec($ch);
}



?> 

dengan adanya source code tersebut kita sudah siap untuk mengkoneksikan antara bot yang kita buat dengan faceook. yang perlu diperhatikan adalah access_token dan verify_token. access token adalah string panjang yang tadi kita dapat dalam bahasa Homo Sapiens Kuno, sedangkan verify_token adalah string yang kita bikin saat setup webhook tadi.

Koneksikan Webhook.

cukup koneksikan dengan webhook, caranya, lihat pada bagian ngrok, tadi, saya mendapatkan tunneling ngrok adalah https://c9483679.ngrok.io  karena path file yang ingin saya access ada di gbot/index.php maka ketikan  https://c9483679.ngrok.io/gbot/index.php pada bagian call back url (Lihat pada bagian Koneksikan Facebook Apps). sedangkan untuk verify_token, sebagai contoh saya menggunakan String gbot_goblooge. klik verify and save jika berhasil maka sudah selesai.

Pastikan Call Back Benar, kita akan isi ini nanti. Verify Token isi sesuai dengan keinginan anda.ingat gambar ini, tadi sesuaikan dengan callback url yang anda dapat dari ngrok. kemudian klik verify dan save.

Testing.

untuk testing yang kita butuhkan adalah cukup buka Facebook Messengger di HP atau di Browser kemudian hubungi fanpage kita tadi, cobalah ketikan ls. (ls adalah perintah dari terminal linux yang akan menampilkan sebuah isi folder). atau coba ketikan “uname -a” maka akan ditampilkan sebuah string yang berisi informasi operating system linux kita. berikut ini adalah beberapa Screenshot milik saya.

Saya menjalankan perintah terminal Linux yang akan di teruskan faceboko messengger ke Ngrok melalui Call back, dan oleh ngrok akan diteruskan ke web server local, dan lewat web server local akan diteruskan ke bagian terminal Linux kmeudian hasilnya di return.

Saya menjalankan perintah terminal Linux yang akan di teruskan faceboko messengger ke Ngrok melalui Call back, dan oleh ngrok akan diteruskan ke web server local, dan lewat web server local akan diteruskan ke bagian terminal Linux kmeudian hasilnya di return.

 

contoh perintah lain yang berhasil diteruskan.

contoh perintah lain yang berhasil diteruskan.

oke sampai disini dulu ya, lain waktu saya lanjutkan tentang penjelasan dari source codenya, dan kita akan berkreasi dengan security dan lain-lain. pada dasarnya ini bisa kita jadikan tool atau alat sebagai pengganti sms gateway untuk berbagai keperluan. untuk source code dapat diambil di-download di Dropbox atau Google Drive. samapai ketemu lagi Okey Donkey.

Comments

total comments