Membangun Autentikasi Kustom Menggunakan Appsmith dan APISIX
June 5, 2023
Alur autentikasi adalah bagian fundamental dari aplikasi web. Ini memastikan keamanan dan privasi data pengguna saat mereka menggunakan aplikasi Anda. Meskipun ada banyak solusi autentikasi siap pakai yang tersedia, membangun sistem autentikasi menggunakan platform pengembangan UI low-code dan solusi manajemen API memungkinkan Anda membuat aplikasi web yang aman dengan mudah. Anda dapat membuat aplikasi tanpa perlu mengetahui teknologi dan alat frontend maupun backend. Anda tidak perlu mengetahui Python, Java, HTML, CSS, atau framework JavaScript lainnya. Dalam postingan ini, Anda akan mempelajari cara membangun alur login sederhana dan halaman kustom di UI untuk mengamankan aplikasi Anda menggunakan Appsmith, Apache APISIX, dan JWT.
Appsmith adalah platform pengembangan low-code yang kuat yang memungkinkan pengguna dengan mudah membuat aplikasi web dan dashboard. Ini menyediakan antarmuka visual dan serangkaian komponen pra-bangun yang komprehensif, membuatnya dapat diakses oleh pengembang dan non-pengembang.
Tujuan pembelajaran
Anda akan mempelajari hal-hal berikut sepanjang artikel ini:
- Merancang proses autentikasi dalam lingkungan low-code.
- Menyiapkan API autentikasi backend dengan APISIX.
- Membuat Halaman UI menggunakan widget di Appsmith.
- Mengaktifkan autentikasi berbasis token.
Merancang Arsitektur Autentikasi
Sebelum terjun ke implementasi, penting untuk terlebih dahulu merancang arsitektur sistem autentikasi untuk aplikasi Anda. Pertimbangkan komponen kunci seperti pendaftaran pengguna, login, kata sandi, manajemen sesi, dan autentikasi berbasis token JWT. Tentukan alur informasi antara Appsmith dan APISIX, memastikan alur kerja autentikasi yang jelas dan efisien.
Kita akan membangun aplikasi seluler sederhana yang memiliki 3 halaman yaitu Pendaftaran, Login, dan Halaman Utama. Tugas yang kita lakukan dibagi menjadi dua bagian. Pada bagian pertama, kita akan menyiapkan API backend dengan Apache APISIX API Gateway yang akan menangani permintaan autentikasi. Kami menggunakan endpoint API Gateway yang ada untuk mencapai alur pendaftaran pengguna, login, dan pembuatan token. Pada bagian kedua, kami menggunakan antarmuka drag-and-drop Appsmith dengan komponen UI siap pakai untuk membangun halaman Pendaftaran, Login, dan Utama dan akhirnya, kami menghubungkannya ke API untuk menangani pengiriman formulir. Mari kita mulai dengan membangun komponen-komponen ini di bagian berikut.
Bagian 1: Menyiapkan API Autentikasi Backend
Kita mulai dengan menyiapkan API backend yang akan menangani permintaan autentikasi dari aplikasi seluler. APISIX dapat digunakan untuk menerapkan autentikasi guna melindungi endpoint API. APISIX memungkinkan Anda memvalidasi kredensial pengguna, menerbitkan token autentikasi, dan mengontrol akses ke API Anda. Dengan mengintegrasikan APISIX ke dalam sistem autentikasi seluler Anda, Anda dapat menambahkan lapisan keamanan tambahan dan memastikan bahwa hanya pengguna yang terautentikasi yang dapat mengakses sumber daya yang dilindungi.
Prasyarat
- Docker digunakan untuk menginstal etcd dan APISIX yang dikontainerisasi.
- curl digunakan untuk mengirim permintaan ke API Admin APISIX. Anda juga dapat menggunakan alat seperti Postman untuk berinteraksi dengan API.
Langkah 1: Menginstal Apache APISIX
APISIX dapat dengan mudah diinstal dan dijalankan dengan skrip quickstart berikut:
curl -sL https://run.api7.ai/apisix/quickstart | sh
Langkah 2: Mengonfigurasi layanan backend (upstream)
Selanjutnya, kita mengonfigurasi layanan backend kita. Untuk tujuan demo, ini bisa berupa layanan API apa pun yang melayani logika backend kita. Anda juga dapat menggantinya dengan layanan Anda sendiri. Saya menggunakan server publik mock http://httpbin.org/ yang menghasilkan respons secara acak. Untuk kesederhanaan, kita akan memiliki satu endpoint yang mengembalikan alamat IP publik mesin kita di endpoint ini http://httpbin.org/ip.
Untuk mengarahkan permintaan ke layanan backend untuk API mock, Anda perlu mengonfigurasinya dengan menambahkan server upstream di Apache APISIX melalui Admin API.
curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d ' { "name":"Mock API upstream", "desc":"Register Mock API as the upstream", "nodes":{ "httpbin.org:80":1 } }'
Langkah 3: Membuat konfigurasi plugin baru
Langkah ini melibatkan pengonfigurasian plugin (menggunakan objek Plugin Config) untuk rute yang kita buat di langkah berikutnya. Jadi, APISIX mengaktifkan plugin JWT untuk mengamankan endpoint kita. Setiap kali kita meminta endpoint, itu memeriksa kredensial JWT di header permintaan.
curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d ' { "plugins":{ "jwt-auth": {} } }'
Langkah 4: Membuat Rute untuk API Backend
Kita membuat objek Route baru di APISIX yang mencegat semua permintaan GET ke URI /ip, dan menggunakan konfigurasi upstream dan plugin yang ada untuk mengaktifkan mekanisme routing dan kebijakan autentikasi. Ini memeriksa plugin JWT di header, dan jika ada dan valid, meneruskan permintaan ke server mock kita. Jika tidak, itu mengembalikan kesalahan tidak sah segera dan permintaan tidak akan mencapai layanan sebenarnya.
curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d ' { "name":"Mock API server route", "desc":"Create a new route in APISIX for the mock server endpoint", "methods":[ "GET" ], "uri":"/ip", "upstream_id":"1", "plugin_config_id":1 }'
Langkah 5: Membuat Rute untuk menandatangani token JWT
Kami menerapkan autentikasi berbasis token untuk API kami. APISIX juga dapat bertindak sebagai penyedia identitas untuk menghasilkan dan memvalidasi token. Untuk melakukannya, Anda perlu menyiapkan Rute untuk endpoint API baru yang menandatangani token menggunakan plugin public-api:
curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d ' { "uri": "/login", "plugins": { "public-api": { "uri": "/apisix/plugin/jwt/sign" } } }'
Dengan menjalankan perintah curl di atas, kami mendaftarkan rute baru bernama login dengan jalur URI /login yang menandatangani token baru setiap kali pengguna yang ada mencoba login dari halaman Login di aplikasi seluler menggunakan email mereka.
Bagian 2: Membuat Formulir Pendaftaran dan Login Pengguna di Appsmith
Menggunakan antarmuka low-code Appsmith, kita dapat membuat formulir pendaftaran dan login pengguna. Appsmith menyediakan berbagai widget pra-bangun yang dapat dengan mudah disesuaikan. Rancang formulir dengan bidang input untuk nama pengguna, kata sandi, dan informasi tambahan apa pun yang Anda perlukan di dashboard.
Sebelum memulai
Saya akan melewatkan bagian instalasi Appsmith di mesin Anda. Anda dapat mempelajari cara menginstal Appsmith menggunakan Docker di situs web Appsmith. Pastikan bahwa Anda telah menginstal Appsmith dan dapat mengaksesnya di http://localhost. Saat Anda menerapkan dan menjalankan Appsmith, aplikasi berjudul Aplikasi pertama saya akan ditambahkan secara default. Anda dapat menggunakan aplikasi ini untuk membangun aplikasi pertama Anda.
Langkah 1: Membuat halaman Pendaftaran
Dalam kasus kami, pengguna baru pertama kali mendaftar di aplikasi seluler dari halaman Pendaftaran. Mulailah dengan membuat halaman baru bernama HalamanPendaftaran di aplikasi Anda. Tambahkan widget Input untuk email (bernama InputEmail), nama pengguna (bernama InputNamaPengguna), dan kata sandi (InputKataSandi). Juga, tambahkan tombol Daftar (bernama TombolDaftar) dan Login (bernama TombolLogin) widget Tombol ke papan gambar. Hasil akhirnya terlihat seperti di bawah ini:
Ketika pengguna menekan tombol Daftar dengan detail input yang diberikan, Anda memerlukan kueri untuk menangani komunikasi dengan endpoint API Admin APISIX untuk mendaftarkan konsumen API baru di API Gateway. Buat kueri API (bernama API_Admin_Tambah_Konsumen_API) dengan endpoint URI konsumen APISIX /apisix/admin/consumers. Tempatkan teks widget Input ke dalam badan kueri Anda. Mengakses widget Input seharusnya terlihat seperti ini:
Perhatikan bahwa kami menggunakan alamat
host.docker.internalalih-alih localhost karena APISIX berjalan di dalam kontainernya sendiri di jaringan docker yang berbeda dari Appsmith.
Setelah kueri dikirim ke APISIX, itu mendaftarkan konsumen baru, dan objek konsumen akan menggunakan plugin jwt-auth dengan kunci dan rahasia. Anda dapat menguji apakah konsumen berhasil terdaftar di sistem dengan mengambil konsumen tertentu berdasarkan nama pengguna appsmithuser. Jalankan perintah curl ini:
curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser
Sementara pengguna yang ada dapat langsung menuju ke halaman Login. Lihat di bagian berikutnya.
Langkah 2: Membuat halaman Login
Kembali ke kanvas aplikasi, tambahkan halaman baru bernama HalamanLogin dan siapkan Formulir Login dengan widget Input (untuk memasukkan email pengguna) dan Tombol (untuk login).
Kemudian buat kueri API (bernama api_login) untuk jalur URI rute login APISIX /login dan atur parameter key ke {{InputEmail.text}}. Jika Anda menguji kueri dan menekan tombol jalankan, pada respons yang berhasil, endpoint API Gateway autentikasi kami harus mengembalikan token akses yang valid. Dalam contoh di bawah ini, kunci jwt adalah token yang menunjukkan bahwa pengguna telah terautentikasi di sisi APISIX.
Untuk menjalankan kueri api_login melalui tombol Login, Anda perlu mengatur properti onClick kueri.
Anda juga dapat menyimpan token JWT di toko Appsmith dan kemudian membawa pengguna ke HalamanUtama. Untuk melakukannya, sisipkan kode di bawah ini ke aksi api_login dari HalamanLogin di properti onClick:
{{api_login.run(() => { const jwt = api_login?.data; if (jwt) { storeValue('jwt', jwt); navigateTo('HalamanUtama', {}); } else { showAlert('Login gagal!', 'error'); } })}}
Jika pengguna gagal melakukan autentikasi dengan APISIX, tampilkan pesan peringatan sebagai panggilan balik untuk memberi tahu pengguna bahwa ada kesalahan.
Langkah 3: Membuat halaman Utama
Akhirnya, sekarang saatnya mengonfigurasi HalamanUtama dari aplikasi seluler untuk mengizinkan akses ke pengguna yang telah login dan menampilkan beberapa data. Anda dapat menggunakan kanvas yang sama untuk membangun UI Anda dari widget. Setelah pengguna berhasil login, logika kami mengarahkan ke HalamanUtama, dan pada pemuatan halaman pertama, itu membuat panggilan API secara otomatis ke rute http://127.0.0.1:9080/ip di APISIX menggunakan kueri yang Anda tambahkan (bernama api_data_halaman_utama) dan mengambil alamat IP dari server upstream (yang kita buat di Bagian 1 dan langkah 2).
Anda mungkin memperhatikan di header Authorization nilai {{appsmith.store.jwt}} nilai jwt yang kita simpan di toko Appsmith di langkah sebelumnya yang digunakan untuk membuktikan ke aplikasi Anda bahwa pengguna dikenali. Jika nilai jwt tidak ada di toko Appsmith, kami menampilkan kesalahan tidak sah kepada pengguna.
Dalam kasus saya, saya menambahkan dua widget Teks ke HalamanUtama dan mengatur nilai bidang teks yang kedua ke {{api_data_halaman_utama.data}} yang merupakan output data dari panggilan api_data_halaman_utama. Lihat hasilnya.
Langkah selanjutnya
Anda juga dapat menambahkan satu HalamanTidakSah untuk mengarahkan pengguna yang tidak sah ke halaman itu, menampilkan kesalahan dan menyarankan mereka untuk login atau mendaftar untuk membuat akun baru. Berikan pengguna Anda kemampuan untuk keluar dari aplikasi Anda dengan widget tombol ketika mereka selesai yang dapat membantu meningkatkan keamanan data Anda.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, kami membuat sistem autentikasi yang dipersonalisasi menggunakan Appsmith dan APISIX. Appsmith cocok untuk berbagai kasus penggunaan, mulai dari membangun alat internal dan dashboard admin hingga prototipe dan pengembangan aplikasi lengkap. Dengan APISIX, Anda tidak hanya dapat menerapkan autentikasi untuk pengguna Anda tetapi juga memperkenalkan langkah-langkah keamanan tambahan seperti pembatasan kecepatan, pemblokiran IP, dan pembatasan konsumen untuk menjaga keamanan solusi autentikasi kustom kami.