7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Android SDK

Cara Menambahkan CAPTCHA ke Aplikasi Android

Scroll to top
Read Time: 8 mins

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Jika Anda mengembangkan aplikasi Android yang perlu berinteraksi dengan server back-end Anda, penting bagi Anda untuk mengambil langkah-langkah untuk mempertahankannya dari bots—skrip otomatis yang ingin melewati menyerupai manusia. Jika tidak, server Anda memiliki peluang yang sangat nyata untuk dikuasai oleh mereka.

CAPTCHA, singkatan dari Completely Automated Public Turing tests for telling Computers and Humans Apart, saat ini merupakan pertahanan yang paling efektif melawan bot. Seperti yang mungkin sudah Anda ketahui, biasanya tes gambar, suara, atau akal sehat yang mudah dilakukan manusia, namun sangat sulit dilakukan komputer.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan API SafetyNet reCAPTCHA yang baru dirilis untuk menambahkan CAPTCHA ke aplikasi Android Anda.

Prasyarat

Untuk dapat mengikuti tutorial ini, Anda memerlukan hal berikut ini:

Setup Proyek

Luncurkan Android Studio dan buat proyek baru dengan activity kosong. Dalam form Configure your new project, pastikan Anda mengetikkan nama paket yang berarti-Anda akan menggunakannya saat mendaftarkan aplikasi Anda dengan layanan reCAPTCHA.

Selain itu, ceklis juga Include Kotlin Support . Karena Kotlin sekarang merupakan bahasa Android resmi, kita akan menggunakannya bukan Java dalam tutorial ini.

Configure your new project formConfigure your new project formConfigure your new project form

API SafetyNet adalah bagian dari layanan Google Play. Untuk dapat menggunakannya dalam proyek Anda, tambahkan depedensi implementasi berikut ke file build.gradle modul app:

Selain itu, untuk melakukan operasi yang berhubungan dengan jaringan, kita akan menggunakan library Fuel, yang memiliki API berbasis Kotlin yang sangat ringkas. Karena itu, tambahkan sebagai depedensi implementasi lainnya.

Anda tidak dapat melakukan operasi yang berhubungan dengan jaringan tanpa izin INTERNET, jadi tambahkan baris berikut ke file manifest proyek Anda:

Terakhir, tekan tombol Sync Now untuk menyelesaikan konfigurasi proyek.

Memperoleh kunci reCAPTCHA

Anda memerlukan dua kunci sebelum dapat menggunakan layanan reCAPTCHA:

  • kunci situs, yang harus diteruskan ke layanan dari aplikasi Android Anda
  • dan kunci rahasia, yang harus dilewatkan ke layanan dari server back-end Anda

Untuk mendapatkan kunci, gunakan akun Google Anda dan masuk ke konsol admin reCAPTCHA. Jika Anda membuka konsol untuk pertama kalinya, Anda akan secara otomatis disajikan dengan formulir pendaftaran singkat tempat Anda dapat mengetikkan nama paket aplikasi Anda.

reCAPTCHA registration formreCAPTCHA registration formreCAPTCHA registration form

Setelah Anda menerima persyaratan layanan reCAPTCHA, lanjutkan dan tekan tombol Register untuk menghasilkan kedua tombol.

Site key and secret key screenSite key and secret key screenSite key and secret key screen

Sekarang Anda dapat menambahkan kunci situs ke proyek Android Studio Anda dengan hanya menuliskannya di file res/values/strings.xml:

Kita akan bekerja dengan kunci rahasia hanya pada saat menjelang akhir tutorial ini, jadi catatlah di tempat yang aman untuk saat ini.

3. Mengenerate CAPTCHA

Saat kita mendengar kata CAPTCHA, biasanya kita memikirkan gambar berantakan yang berisi huruf dan angka yang sulit dibaca. CAPTCHA seperti itu, bagaimanapun, berkat kemajuan teknologi computer vision, tidak lagi cukup baik untuk menghentikan semua bot.

CAPTCHA yang dihasilkan oleh layanan reCAPTCHA sangat maju, dan sangat interaktif juga. Sebenarnya, memecahkannya sama seperti bermain game sederhana. Akibatnya, Anda tidak bisa langsung menyematkannya ke dalam layout activity Anda. Sebagai gantinya, Anda harus menambahkan tombol ke layout, yang jika ditekan, harus mengarahkan pengguna ke layar atau dialog baru yang berisi CAPTCHA.

Kode berikut menunjukkan cara menambahkan widget Button ke file XML tata letak aktivitas Anda:

Sebelum Anda mulai mengenerate CAPTCHA, Anda harus menginisialisasi klien untuk API SafetyNet. Anda dapat melakukannya dengan memanggil metode getClient() dari kelas SafetyNet. Oleh karena itu, tambahkan kode berikut di dalam metode onCreate() pada kelas Activity Anda:

CAPTCHA harus ditampilkan saat pengguna menekan tombolnya, jadi tambahkan pengendali event on-click ke dalamnya menggunakan metode setOnClickListener(). Di dalam handler, yang perlu Anda lakukan hanyalah memanggil metode verifyWithRecaptcha() dan meneruskan kunci situs Anda sebagai argumen untuk membuka dialog berisi CAPTCHA.

Nilai kembalian dari metode verifyWithRecaptcha () adalah objek Task. Dengan melampirkan sebuah event handler on-success ke dalamnya, Anda akan bisa mendapatkan objek RecaptchaTokenResponse yang berisi token yang dapat Anda gunakan untuk mengetahui apakah pengguna tersebut lulus atau gagal dalam CAPTCHA. Begini caranya:

Memvalidasi Token CAPTCHA

Token yang Anda dapatkan pada langkah sebelumnya harus dilewatkan lagi ke layanan reCAPTCHA untuk memeriksa apakah pengguna tersebut lulus atau gagal dalam tes. Namun, saat ini, panggilan ke layanan reCAPTCHA harus dilakukan dari server back-end Anda.

Server, tentu saja, tidak akan memiliki token kecuali aplikasi Android Anda mengirimkannya ke sana. Karena itu, sekarang kita harus menulis kode untuk mengirim token dari aplikasi Android ke server.

Untuk saat ini, anggap saja server kita memiliki endpoint yang disebut validasi, yang dapat menerima token sebagai parameter string kueri. Saya akan menggunakan 10.0.2.2 sebagai alamat IP server dan 8000 sebagai portnya. Jika Anda berniat menjalankan server di komputer Anda sendiri dan aplikasi pada emulator yang berjalan pada komputer yang sama, Anda juga dapat menggunakan alamat IP yang sama.

Sekarang Anda dapat memanggil metode httpGet() yang ditawarkan oleh library Fuel untuk mengirim token ke server. Metode ini mengharapkan daftar parameter string kueri sebagai satu-satunya argumennya, jadi saya sarankan Anda menggunakan metode utilitas listOf() untuk membuat daftar berisi satu item: token yang ditetapkan ke parameter kueri bernama user_token.

Karena metode httpGet() berjalan asynchronous, Anda harus memanggil metode responseString() untuk menangani nilai kembaliannya. Kode berikut menunjukkan caranya:

Anda dapat melihat bahwa kita sekarang memiliki akses ke objek result. Jika tidak ada kesalahan, ini akan berisi respons server kita sebagai string.

Anggaplah server kita mengembalikan string "PASS" jika pengguna melewati ujian, dan "GAGAL" jika tidak. Apa yang sebenarnya Anda lakukan saat pengguna melewati atau gagal dalam ujian, tentu saja, terserah Anda. Untuk saat ini, saya sarankan Anda hanya menampilkan pesan Toast yang sesuai. Kode berikut menunjukkan cara melakukannya dengan ringkas:

Pada titik ini, aplikasi sudah siap. Anda bisa lanjut dan mendeploynya ke emulator atau perangkat Anda.

CAPTCHA dialog shown when user presses the buttonCAPTCHA dialog shown when user presses the buttonCAPTCHA dialog shown when user presses the button

5. Membuat Server

Kita membuat banyak asumsi tentang server web kita di langkah awal. Sekarang saatnya untuk membuatnya, memastikan hal itu tidak menyimpang dari asumsi tersebut.

Cara cepat dan mudah untuk membuat server web yang berfungsi penuh adalah dengan menggunakan platform Node.js dan framework Express.js. Untuk membuat proyek Node.js baru, buatlah sebuah direktori baru di komputer Anda dan jalankan perintah npm init di dalamnya.

Untuk menambahkan framework Express ke proyek, Anda dapat menggunakan perintah npm install.

Selain itu, kita akan meminta paket Request untuk berkomunikasi dengan layanan reCAPTCHA. Karena itu, install juga itu sebagai dependensi lainnya.

Anda sekarang dapat menggunakan editor kode favorit Anda untuk membuat file baru yang disebut index.js dan mulai menulis semua kode sisi server yang diperlukan.

Mulailah dengan memuat modul express dan request menggunakan fungsi require() dan buat aplikasi Express baru dengan memanggil fungsi express().

Aplikasi Express kita harus memiliki endpoint yang disebut validate, yang dapat diakses menggunakan metode HTTP GET. Oleh karena itu, buat rute baru untuk itu dengan menggunakan metode get():

Untuk memvalidasi token yang dihasilkan oleh aplikasi Android, Anda sekarang harus membuat permintaan POST ke layanan reCAPTCHA. Permintaan itu harus berisi kunci rahasia dan token itu sendiri. Kode berikut menunjukkan kepada Anda bagaimana membuat body request POST dengan mengekstrak token dari string kueri:

Untuk benar-benar membuat request POST, Anda dapat memanggil metode post() dari modul request. Responnya adalah dalam bentuk dokumen JSON pendek berisi kunci yang disebut success. Seperti yang Anda bisa duga, nilainya true hanya jika pengguna telah lulus dari tes.

Kode berikut menunjukkan cara mengurai dokumen JSON, mengekstrak kunci success, dan menghasilkan respon "PASS" dan "FAIL" yang dibutuhkan aplikasi Android kita:

Terakhir, Anda harus memanggil metode listen() dari objek aplikasi Express agar bisa mendeteksi sebuah koneksi.

Pada titik ini server web kita sudah siap. Untuk memulainya, kembali ke terminal dan jalankan perintah berikut:

Jika Anda menjalankan aplikasi Android Anda sekarang, tekan tombolnya, dan berhasil menyelesaikan CAPTCHA, Anda akan melihat pesan Toast yang memberitahukan bahwa Anda adalah manusia.

Toast message shown when user passes the CAPTCHAToast message shown when user passes the CAPTCHAToast message shown when user passes the CAPTCHA

Kesimpulan

Sekarang Anda tahu cara menggunakan API reCAPTCHA SafetyNet untuk mengamankan aplikasi Android dan infrastruktur back-end Anda dari bot. Anda tidak perlu khawatir tentang pendaftaran otomatis, screen scrapers, atau spam yang dihasilkan bot lagi.

Untuk mempelajari lebih lanjut tentang API reCAPTCHA, Anda dapat merujuk ke dokumentasi resmi.

Sementara itu, lihat beberapa tulisan keren kami lainnya di pengembangan aplikasi Android!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.