Wednesday, November 15, 2017

Automasi browser dengan Node, Zombie Apocalypse

Hai Geeks, di postingan ke 4 ini, saya akan melanjutkan series Automasi browser dengan Node, selanjutnya adalah ZombieJS



Zombie adalah framework untuk automasi browser buatan developer Assaf Arkin. Proses zombie sangat cepat, dan headless, karena itulah diibaratkan zombie. Zombie dibuat untuk testing dan sudah support assert.

Awalnya saya ingin mendemokan search di Google, namun setelah dicoba ada error dari javascript. Ternyata, Google memiliki sistem yang menangkal tools otomatis seperti zombie, berikut kutipan dari Stackoverflow

Karena keterbatasan ini maka saya akan mendemokan dengan Search Engine DuckDuckGo

Demo pertama untuk lihat postingan terbaru blog Nostra

npm install zombie

Lalu demo kedua untuk testing menggunakan Mocha, di test ini sama seperti di Nightmare, akan membuka search engine dan memeriksa apakah instagram aditrioka muncul pertama

untuk menjalakan, run command diawali dengan mocha

Kelebihan dan kekurangan Nightmare sebagai berikut
Pro :
  • Ringan dan cepat
  • Sudah langsung support assert untuk testing
Con:
  • Proses hanya bisa dipantau dengan command line
  • Terdeteksi sebagai automatic tools
Selamat mencoba zombie. Creativity is the limit

Sumber
ZombieJS

Friday, October 6, 2017

Automasi browser dengan Node, Face the NightmareJS

Hai Geeks, di posting bulanan ke 3 ini, saya akan membahas tentang Nightmare


Nightmare adalah salah satu npm untuk automasi browser high-level buatan segment, tujuannya adalah meniru perilaku user di browser, seperti goto, click, type, check dan lain-lain. Pada awal pengembangan sebenarnya digunakan untuk automasi task di web yang tidak memberikan API secara publik, lalu berkembang dan sering digunakan untuk UI testing dan crawling

Nightmare mudah digunakan dengan memberikan pengalaman yang synchronous untuk setiap script block dibandingkan dengan callback. Nightmare dibangun dengan Electron, sama dengan PhantomJS, tapi Nightmare mengklaim 2x lebih cepat dibanding PhantomJS dan lebih modern. Dari kode yang saya lihat, memang kode yang digunakan Nightmare lebih simple dengan feel yang didapat seperti Promise, sedangkan PhantomJS dengan feel Callback

Di posting ini, mari kita demo untuk stalking instagram Yuki Buwana. Pertama, cari instagram atas nama Yuki Buwana, lalu klik posting terbarunya, terakhir, print statusnya

npm install nightmare


Di line ke-2 option bisa diatur untuk menampilkan browser
Idealnya elemen didapat dari id nya, tapi karena tidak ada maka diambil dari class

Untuk demo kedua, nightmare digunakan sebagai Tester sederhana untuk load home page google dan memastikan instagram Adi Trioka muncul sebagai pencarian pertama dengan Mocha

npm install mocha -g
npm install assert

untuk menjalakan, run command diawali dengan mocha

Kelebihan dan kekurangan Nightmare sebagai berikut
Pro :
  • Mudah digunakan pemula
  • Dapat berjalan di background process ataupun windows hanya dengan merubah option
  • Dapat diinterupsi di tengah proses, contoh kebutuhan multi factor authentication
Con:
  • Load time lama karena load javascript

Selamat menikmati nightmare. Creativity is the limit

Sumber
Nightmare
Testing Nightmare

Sunday, September 17, 2017

Membuat dan Mengakses OAuth2 protected content dengan OAG

Setelah penjelasan saya sebelumnya mengenai pembuatan OAuth2 Server, sekarang saya akan menjelaskan bagaimana cara pembuatan OAuth2 Protected Content, dan cara mengakses OAuth2 Protected Content dengan OAG.

Seperti sebelumnya untuk penjelasan kali ini saya akan menggunakan client credentials grant untuk mendapatkan access token karena lebih mudah dan simple untuk dijelaskan.

Untuk membuat OAuth2 protected content, kita dapat satu filter khusus yaitu Validate Access Token, bila mengikuti penjelasan saya sebelumnya dengan meng-import template, kita dapat melihat  policy yang terletak pada  Policies > OAuth 2.0 > Resource Service > Resource Service untuk melihat flow pembuatan OAuth2 protected content.

Pembuaan OAuth2 Protected Content

perlu diperhatikan dalam Validate Access Token kita perlu mengeset tempat penyimpanan access token, tempat penyimpanan access token ini harus sama dengan tempat penyimpanan access token pada access token grant yang memberikan access token (dalam hal ini tempat penyimpanan access token yang digunakan pada policy Client Credentials) dan harus menambahkan scope dari scope yang diberikan OAuth2 Authorization Server. untuk pengetesan dalam pengambilan OAuth2 Protected Content dengan command berikut:

curl -X POST \'{Protocol}://{host}:{port}{path}' \
  -H 'authorization: Bearer {access token yang didapat dari access token grant}'

tentu saja seperti sebelumnya path harus disesuaikan dengan path yang didaftarkan di OAG Policy Studio

Mengakses OAuth2 Protected Content dengan Postman


Sekarang kita akan mencoba mengakses OAuth2 protected Content, hal ini akan cukup sulit bila kita harus mengambil access token terlebih dahulu dengan meng-encode base64 client id dan secret, lalu menyimpan access token yang didapat untuk dimasukkan kedalam authorization header. OAG memberikan solusi agar semua hal tersebut dapat dilakukan oleh OAG tanpa campur tangan dari user.

Hal pertama yang harus dilakukan adalan dengan membuat client credentials profile, hal ini akan memudahkan kita agar tidak perlu lagi meng-encode base64 client id dan secret untuk mendapatkan access token. Client Credentials Profile ini terletak pada External Connections > Client Credentials > OAuth2, dalam pembuatannya kita akan memberikan nama pada profile ini dan menentukan authorization url dan juga token url. karena saya menggunakan template yang sudah di-import disini saya akan menggunakan API Gateway Profile. (Agar lebih mudah gunakan sertifikat yang benar untuk ssl pada protokol https atau buat listener baru dengan protokol http dan ganti URL client client credentials profile)

API Gateway Profile

Setelah membuat profile, klik tombol add pada tab OAuth2 Credentials, masukan nama kredensial, client id dan secret, ganti OAuth Flow Type ke Client Credentials, terakhir optional masukkan scope seperlunya, dan klik OK.

Sekarang kita akan membuat policy untuk mengakses OAuth2 Protected Content, dalam policy ini kita akan menggunakan 3 filter berikut:

1. Retrieve OAuth Client Access Token From Token Storage
Untuk mengecek apakah access token sudah ada atau masih hidup

2. Get OAuth Access Token
Untuk meminta access token baru dan menyimpannya di cache, token yang sudah expired akan langsung dibuang oleh cache

3. Connect to URL
Untuk meneruskan data ke OAuth2 Protected Content

pada ketiga filter tersebut kita harus mengganti isian client credentials profile dengan data client credentials profile yang baru saja kita buat. pada Retrieve OAuth Client Access Token, isian terletak pada  "Choose profile to be used for token request", pada Get OAuth Access Token pada "Optionally select a client credentials profile", dan pada Connect to URL pada "Choose a Client Credential Profile" pada tab Authentication.

Policy baru untuk mengakses OAuth2 Protected Content.

Daftarkan policy tersebut ke listener, lalu mari kita test dengan command:

curl -X POST \'{Protocol}://{host}:{port}{path}'

Testing dengan postman tanpa penggunaan authorization header

Sekian penjelasan saya untuk kali ini,

Terimakasih.

Mengenal Ionic!

Halo, Nostra Readers!

Tadi siang sepupu saya datang ke rumah untuk silaturahmi. Sambil mengobrol-ngobrol, tiba-tiba terbahas suatu framework yang baru saya dengar, namanya itu Ionic. Wah menarik nih, langsung coba googling apa itu ionic.

Nah untuk postingan kali ini, saya akan membahas singkat mengenai sebuah framework yang disebut-sebut mudah untuk membuat sebuah mobile apps ini.

Iconic merupakan open source SDK mobile untuk membuat native dan progressive web apps dengan mudah. Awalnya iconic dibuat pada tahun 2013 berdasarkan Angular dan Apache Cordova. Sekarang ini Iconic merupakan versi yang kedua, namun tetap dipanggil Ionic, yang berdasarkan dari Angular. Di Ionic ini memberikan tools dan service untuk membuat hybrid mobile apps yang menggunakan teknologi-teknologi dari web seperti HTML, CSS, dan Sass. Lalu dari pemanfaatan teknologi-teknologi web, dengan menggunakan Cordova dapat diinstall pada device-device.

Getting Started

Untuk memulai Ionic cukup mudah, pertama-tama kita perlu menginstall node js terlebih dahulu untuk dapat menggunakan fitur npm. Lalu dari command prompt (Command Line) dimulai dengan menginstall ionic dengan cara mengetik,

npm install -g cordova ionic


Ketika sudah selesai menginstall, lalu dilanjutkan dengan memulai app yang sudah ada(Preset) dengan mengetik di command line dari salah satunya dibawah ini,









- ionic start myApp blank - ionic start myApp tabs - ionic start myApp sidemenu

kemudian setelah kita melakukan command diatas, dimana dari command itu kita sudah meng-clone dari git, kita masuk ke dalam foldernya yaitu myApp,

cd myApp

Lalu dimulai dengan cara,

ionic serve

Setelah dijalankan nantinya akan membuka page baru yang berisikan content dari apa yang sudah di clone tadi.

Nah sekarang ini sudah ada yang namanya Ionic Creator, dimana Ionic Creator merupakan tools dari Ionic yang penggunaannya untuk membuat interface hanya dengan drag and drop.

Mungkin itu dulu dari saya kali ini, semoga bermanfaat untuk kedepannya!


References:
- Ionic
- Wikipedia

Membuat OAuth2 Server dengan OAG

Pada kesempatan ini saya ingin menjelaskan cara membuat OAuth2 dengan OAG, dapat diketahui dengan demikian OAG akan menjadi Authorization Server.

Pada OAG terbaru kali ini (11.1.2.1.4.0) membuat OAuth Server sangatlah mudah, yang pertama harus dilakukan adalah dengan meng-import pada OAG pada Policy Studio. template OAuth2 Server yang sudah disediakan dalam folder berikut:

"Your OAG Installation Folder/apigateway/samples/oauth/authzserver/config.xml"

File yang akan di import di OAG

Template ini menyediakan cache-cache untuk menyimpan kredensial OAuth, User yang diperlukan untuk mengakses OAuth Server, dan OAuth Acces Token Grant yang dapat digunakan. untuk meng-import template ini, diperlukan mengklik File > Import.

data-data yang di-import dari template


Untuk mengakses OAuth Server, user diperlukan mengakses oaghost:oauthport dengan protokol https, kali ini saya menggunakan localhost dengan port 8089 (default OAuth2 Port OAG) untuk mengakses OAuth Server.

OAuth2 Authorization Server

Dalam OAuth Authorization Server ini kita akan memasukkan credentials user dengan admin role yang telah didaftarkan, default dari template adalah dengan login name "regadmin" dan password "changeme" (untuk mengubah atau menambahkan user, dapat dilakukan dengan mengakses Users and Groups > Users pada OAG Policy Studio), setelah memasuki OAuth Server ini kita dapat mendaftarkan aplikasi ataupun meng-import konfigurasi aplikasi yang sudah ada, tentu saja aplikasi-aplikasi yang akan kita buat ini merupakan aplikasi yang akan mengakses OAuth Server kita (Client kita).  

Untuk membuat aplikasi dapat dimulai dari mengklik "new application" lalu memasukkan application name dan descriptionnya jika dibutuhkan, setelah selesai klik tombol "Create"

Pembuatan aplikasi baru

setelah itu masuk ke bagian "OAuth Credentials" lalu klik "New Client Id". pilihlah jenis client dari aplikasi ini baik itu confidential maupun public dan isilah data-data lainnya bila perlu lalu klik "Create"
Pembuatan OAuth2 Credentials

Pada saat ini akan muncul satu baris data yang berisi OAuth Credentials, simpanlah Client ID dan Secret yang tercipta (Untuk menampilkan Secret klik Show Secret), agar data aplikasi ini bisa diakses oleh aplikasi kita harus menambah scope, scope ini akan menentukan batasan-batasan yang dapat dilakukan aplikasi pada data yang dia dapat dari OAuth2, untuk saat ini saya menambahkan 2 scope yaitu resource.READ dan resource.WRITE.

Setelah membuat aplikasi, kita perlu untuk membuat OAuth2 Stores yang akan digunakan untuk menyimpan data access token dikala aplikasi yang kita daftarkan menghit OAuth2 yang kita buat untuk mendapatkan token, namun kali ini kita akan menggunakan hasil import dari template yaitu OAuth Access Token Store. (Saya akan menggunakan OAuth2 Stores dari sample yang kita import, dan OAuth2 Stores ini terletak di Libraries > OAuth2 Stores)

Pembuatan OAuth2 Stores


Terdapat berbagai macam metode penyimpanan baik itu pada cache KPS (KPS yang dibuat saat meng-import config OAuth2), menyimpan pada database, dan terakhir penyimpanan pada apache cassandra. Saya menggunakan apache cassandra agar kita tidak perlu repot memonitor data access token dan langsung tersimpan pada OAG.

Dengan menggunakan generated policies dari konfigurasi yang kita import, agar lebih mudah dipahami saya akan menggunakan client credentials grant karena lebih simple dan straight forward, dan saat ini kita sudah bisa melihat OAG menghasilkan Access Token, namun saya ingin menggunakan Authorization Header yang menggunakan encode BASE64 dari (Client ID:Secret) untuk mendapatkan token, sehingga saya mengubah policy dari Client Credentials untuk mengambil data dari Authorization Header. (Policy terletak di Policies > OAuth 2.0 > Client Credentials), jangan lupa mengecek tab Access Token untuk merubah data lama waktu hidup token, panjang token, dimana token akan disimpan, apakah akan memberikan refresh token, membuat scope token pada tab Access Token (Saya menggunakan default setting dimana token akan disimpan pada OAuth2 Stores yang dibuat/diimport diatas)

Pengubahan validasi aplikasi pada policy client credentials

Mari kita melakukan percobaan untuk mendapatkan access token dengan menggunakan curl dengan command sebagai berikut:

curl -X POST \'{protocol}://{host:port}{path}' \
  -H 'authorization: Basic {BASE64Encode(Client_id:Secret)}' \
  -H 'content-type: application/x-www-form-urlencoded' \
  -d grant_type=client_credentials

path disesuaikan dengan relative path yang didaftarkan di OAG policy studio

Pengambilan Access Token menggunakan Postman dengan command yang sama dengan diatas.

Sekian penjelasan mengenai OAuth2 Server dari saya.

Terimakasih.