Cara Membangun Aplikasi Autentikasi Full-Stack

Sebagian besar aplikasi web membutuhkan fitur pendaftaran dan login. Namun, bagi pemula, hal ini bisa menjadi tantangan. Bahkan pengembang ahli lebih memilih menggunakan layanan eksternal untuk menangani autentikasi sejak awal. Ketika kita berbicara tentang alur autentikasi full-stack, itu berarti mengatur proses masuk dan pendaftaran pengguna di frontend serta mengamankan API backend. Jadi, Anda harus bekerja pada kedua bagian tersebut.

Postingan ini akan memandu Anda dalam membangun aplikasi autentikasi full-stack dengan Apache APISIX, Authgear, dan OpenID Connect (OIDC). Anda dapat menemukan kode sumber proyek ini di GitHub. Untuk memulai dengan cepat, cukup klon repositori dan jalankan contoh kode, ikuti langkah-langkah yang disediakan dalam file README.md.

Tujuan Pembelajaran

Konten ini bertujuan untuk menunjukkan kepada semua orang cara mengatur autentikasi di backend dan frontend. Selain itu, dirancang untuk membantu baik pemula maupun pengembang berpengalaman yang ingin menjadi pengembang full-stack.

Peran APISIX, Authgear, dan OIDC dalam Autentikasi

Sebelum menyelami panduan ini, mari kita perkenalkan secara singkat alat-alat yang akan kita gunakan.

OIDC (OpenID Connect) adalah lapisan identitas sederhana yang dibangun di atas protokol OAuth 2.0. Ini memungkinkan aplikasi pihak ketiga untuk memverifikasi pengguna dan mendapatkan informasi profil dasar dengan cara yang terstandarisasi.
APISIX menonjol sebagai salah satu gateway API open-source paling populer. Ini dirancang tidak hanya untuk manajemen API, tetapi juga untuk memastikan keamanan dan perlindungan API tersebut. Salah satu fitur paling menonjol dalam arsenal keamanannya adalah dukungan untuk OIDC menggunakan plugin.
Authgear adalah platform identity-as-a-service (IDaaS) yang sangat adaptif untuk aplikasi web dan seluler. Pengguna Anda dapat masuk ke aplikasi Anda melalui antarmuka UI bawaan (Anda tidak perlu membangun UI untuk alur pendaftaran dan login pengguna), yang memberikan mereka pengalaman login yang aman dan berbasis standar yang dapat Anda sesuaikan dengan merek Anda sendiri dan berbagai metode autentikasi, seperti email, login sosial, tanpa kata sandi, login biometrik, one-time-password (OTP) dengan SMS/WhatsApp, dan autentikasi multi-faktor (MFA). Ini menggunakan OpenID Connect (OIDC) dan OAuth 2.0 untuk mengidentifikasi siapa pengguna dan memberikan otorisasi ke sumber daya yang dilindungi.

Alur Kerja Autentikasi

Berikut adalah diagram arsitektur tingkat tinggi tentang bagaimana proses autentikasi terlihat:

Alur kerja autentikasi dengan OIDC, APISIX, dan Authgear

Langkah-langkah yang ditunjukkan dalam diagram dijelaskan secara detail di bawah ini:

Dalam diagram di atas, Klien adalah aplikasi web apa pun, API Gateway adalah APISIX, Penyedia Identitas adalah Authgear, dan Upstream adalah API backend.

Aplikasi web dapat mengambil berbagai bentuk, dari Aplikasi Halaman Tunggal (SPA) yang dibangun dengan React, Vue, atau Angular, hingga aplikasi web standar yang dibuat menggunakan framework seperti Express, NextJS, dan platform serupa. Aplikasi web adalah aplikasi klien kami dengan frontend yang mengirim permintaan ke Penyedia Identitas (Authgear) dengan ID klien, rahasia klien untuk mengumpulkan token akses seperti JSON Web Tokens (JWT).
Jika kredensial yang diberikan benar, Authgear membalas dengan token JWT ke aplikasi web. Anda dapat membuat banyak pengguna untuk aplikasi Anda di portal Authgear dan pengguna dapat masuk menggunakan halaman UI yang dihosting oleh Authgear.
Setelah memiliki token JWT, klien mengirim permintaan ke API Gateway (APISIX) dengan token akses, dan API backend yang dilindungi oleh gateway.
Sebelum memproses permintaan, APISIX perlu memastikan bahwa token yang diberikan valid, belum kedaluwarsa, dan memiliki ruang lingkup yang tepat untuk data atau layanan yang diminta. Jika APISIX tidak dapat memvalidasi token secara lokal, ia mengirim permintaan introspeksi token ke server otorisasi Authgear. Permintaan ini biasanya dibuat ke endpoint introspection dari server.
Authgear menerima permintaan introspeksi dan memprosesnya. Server memeriksa catatannya untuk menentukan validitas token, waktu kedaluwarsa, dan ruang lingkup yang terkait, dan setelah menentukan status token, ia merespons APISIX.
Berdasarkan respons introspeksi token Authgear, APISIX kemudian dapat membuat keputusan yang tepat. Jika token valid, ia meneruskan permintaan ke API backend, jika tidak, ia menolak permintaan klien dengan kode status HTTP yang tidak sah.
APISIX mengirim respons dari API backend dengan sumber daya yang diminta.

Aplikasi Autentikasi Full-stack dengan APISIX, Authgear, dan OIDC.

Untuk proyek demo, kami menggunakan Docker untuk menginstal dan menjalankan 3 komponen (backend, API Gateway, dan frontend) dengan satu perintah. Kami menggunakan ExpressJS untuk aplikasi web frontend, menghosting aplikasi halaman tunggal kami di localhost:3000. Gateway APISIX dapat diakses di localhost:9080, sementara API backend kami (ini bisa berupa API apa pun yang Anda bangun menggunakan Python, Java, NodeJS, dan lainnya) diatur di localhost:9081.

Prasyarat

Sebelum memulai, Anda memerlukan hal-hal berikut:

Akun Authgear gratis. Daftar jika Anda belum memilikinya.
Docker digunakan untuk menginstal semua layanan.

Mengkonfigurasi Authgear

Untuk menggunakan layanan Authgear, Anda perlu menyiapkan aplikasi di Dashboard Authgear dan mendapatkan informasi Klien OIDC Authgear. Pengaturan ini memungkinkan pengguna di Authgear untuk masuk ke aplikasi web secara otomatis setelah mereka diautentikasi oleh Authgear.

Langkah 1: Buat aplikasi di Authgear

Untuk menyiapkan aplikasi, navigasikan ke UI Portal Authgear dan pilih Aplikasi di bilah navigasi sebelah kiri. Gunakan pemilih interaktif untuk membuat Aplikasi Klien OIDC Authgear baru.

Buat aplikasi di Authgear

Langkah 2: Salin kredensial aplikasi

Setiap aplikasi di Authgear diberi ID KLIEN dan Rahasia Klien unik alfanumerik yang akan digunakan kode aplikasi Anda untuk memanggil API Authgear di aplikasi web. Catat PENERBIT Authgear yang dihasilkan (misalnya, https://example-auth.authgear-apps.com), ID KLIEN, RAHASIA KLIEN dari output. Anda akan menggunakan nilai-nilai ini di langkah berikutnya untuk konfigurasi aplikasi web.

Salin kredensial aplikasi

Langkah 3: Konfigurasi URI Pengalihan

URI Pengalihan yang Diizinkan dari aplikasi Anda adalah URL yang akan dialihkan oleh Authgear setelah pengguna diautentikasi agar middleware OpenID Connect dapat menyelesaikan proses autentikasi. Dalam kasus kami, ini akan menjadi halaman beranda untuk frontend kami dan akan berjalan di http://localhost:3000.

Atur http://localhost:3000 sesuai dengan bidang URI Pengalihan yang Diizinkan. Jika tidak diatur, pengguna tidak akan dikembalikan ke aplikasi Anda setelah mereka masuk.

Langkah 4: Aktifkan Token Akses

Juga, aktifkan opsi Issue JWT as an access token di bagian Token Akses dari konfigurasi aplikasi:

Aktifkan Token Akses Authgear

Setelah Anda membuat aplikasi Authgear, Anda memilih bagaimana pengguna perlu diautentikasi di halaman login. Dari tab Autentikasi, navigasikan ke Metode Login, Anda dapat memilih metode login dari berbagai opsi termasuk, melalui email, seluler, atau sosial, hanya menggunakan nama pengguna atau metode kustom yang Anda tentukan. Untuk demo ini, kami memilih pendekatan Email+Tanpa Kata Sandi di mana pengguna kami diminta untuk mendaftar akun dan masuk dengan menggunakan email mereka. Mereka akan menerima One-time password (OTP) ke email mereka dan memverifikasi kode untuk menggunakan aplikasi.

Pilih Metode Login

Menyiapkan dan Menjalankan Proyek Demo

Dengan Authgear berhasil dikonfigurasi, sekarang kita dapat mengambil repositori GitHub, mengkonfigurasi variabel lingkungan, dan menjalankan layanan:

Mulailah dengan mengkloning proyek ke mesin lokal Anda:

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

Jadikan direktori proyek sebagai direktori kerja Anda saat ini:

cd apisix-authgear-oidc-full-stack-auth

Di direktori root proyek Anda di mana file Docker compose yaml berada, buat file .env dengan variabel lingkungan berikut:

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

Ganti nilai dalam kurung dengan pengaturan aplikasi Authgear Anda dari bagian Konfigurasi Authgear di atas seperti Penerbit, ID Klien, Rahasia Klien.

Setelah Anda menambahkan file lingkungan, jalankan perintah docker compose up dari direktori root.

Menguji Alur Autentikasi

Untuk demo, kami menggunakan Docker untuk menginstal dan menjalankan 3 komponen (backend, API Gateway, dan frontend) dengan satu perintah. Kami menggunakan ExpressJS untuk aplikasi web frontend, menghosting aplikasi halaman tunggal kami di localhost:3000. Gateway APISIX dapat diakses di localhost:9080, sementara API backend kami (ini bisa berupa API apa pun yang Anda bangun menggunakan Python, Java, NodeJS, dan lainnya) diatur di localhost:9081.

Halaman login Authgear

Setelah Anda mendaftar menggunakan email Anda, Anda akan menerima one-time password (OTP):

Menerima one-time password

Setelah Anda diautentikasi, Anda diizinkan untuk meminta sumber daya API dan Anda mendapatkan respons dari layanan backend:

Respons layanan backend

APISIX memberlakukan autentikasi OIDC dengan Authgear dan menyediakan alur autentikasi yang aman dan terstruktur dengan pengaturan yang mudah.

Langkah Selanjutnya

Kombinasi alat yang kami gunakan ini memastikan keamanan yang memungkinkan pengembang untuk fokus pada logika bisnis inti alih-alih kompleksitas proses autentikasi. Mulai sekarang, Anda memiliki fitur autentikasi yang diaktifkan, Anda dapat mulai membangun UI untuk halaman beranda, menampilkan data dari API, dan mengembangkan halaman lainnya.