SuperApps Integration Docs

🔒

Autentikasi Terpusat (SSO)

Identitas tunggal terintegrasi melalui Goauthentik OIDC Provider untuk seluruh portal & sub-aplikasi BP Batam.

🖼️

Integrasi Multi-Aplikasi Iframe

Sub-aplikasi (seperti IBOSS, B-SIMS, LMS, bCARE) tertanam secara seamlessly di dalam portal tanpa perlu autentikasi ulang.

⚡

Komunikasi Cross-Window PostMessage

Pengiriman kredensial dan token autentikasi dari Portal Utama ke Iframe Sub-Aplikasi menggunakan HTML5 Event API.

🛡️

Keamanan & Verifikasi Terpadu

Backend sub-aplikasi melakukan verifikasi dan penukaran token secara langsung ke server Goauthentik demi menjamin integritas data.

Overview Arsitektur Integrasi

Sistem SuperApps BP Batam menggunakan pola arsitektur Parent Portal & Embedded Sub-Applications. Portal utama (superapps-fe) bersama Backend Utama (superapps-be) bertanggung jawab mengelola proses autentikasi terpusat melalui Goauthentik (Identity Provider).

Setelah pengguna berhasil melakukan login di Portal Utama, token autentikasi atau kode otorisasi (authorization code) diteruskan ke sub-aplikasi yang berada di dalam <iframe> menggunakan mekanisme HTML5 Cross-Document Messaging (window.postMessage). Sub-aplikasi kemudian memvalidasi kredensial tersebut langsung ke Goauthentik melalui backend masing-masing sebelum menerbitkan sesi lokal.

Prinsip Kerja Utama

Independensi Manajemen Sesi Sub-Aplikasi: Setiap sub-aplikasi tetap mengelola sesi login lokalnya sendiri. Portal SuperApps bertindak sebagai penyedia pemicu autentikasi (authentication trigger) awal.

Pengalaman Pengguna Tanpa Hambatan (Seamless UX): Pengguna tidak perlu memasukkan ulang nama pengguna dan kata sandi saat berpindah antar sub-aplikasi di dalam portal SuperApps.

Penerapan Event Listener Standar: Pengembang sub-aplikasi cukup mendaftarkan event listener window.addEventListener('message', ...) pada komponen utama saat aplikasi dimuat.

Langkah Selanjutnya

🚀 Panduan Memulai Integrasi - Langkah demi langkah implementasi teknis.

💻 Contoh Kode & Snippet - Contoh implementasi dalam React, Vue, Vanilla JS, dan PHP.

⚠️ Limitasi & Keamanan - Persyaratan keamanan wajib (Third-Party Cookies, Origin Checking, Sandbox).

SuperApps Integration DocsPanduan Integrasi SSO & Iframe SuperApps