Login Widget

Tampilan langsung

Kartu di atas dirender oleh login-button.v1.js di Shadow DOM — gaya halaman ini tidak memengaruhinya, dan sebaliknya. Tampilan identik dengan kartu di halaman login Redmine (#11053).

Panduan pasang

1. Sisipkan satu elemen penampung di tempat tombol ingin muncul (mis. di bawah form login bawaan).
2. Isi data-href dengan endpoint mulai-login aplikasi Anda — bukan URL beo. Widget hanya tampilan + tautan; aplikasi Anda tetap client OIDC sendiri (PKCE, redirect_uri terdaftar di GoTrue).
3. Muat skrip widget dari beo (atau salin berkasnya ke aset aplikasi Anda bila CSP melarang skrip pihak ketiga).

<div data-beo-login
     data-href="/oidc/authorize"
     data-label="Login dengan BEO.gov3.id"
     data-hint="Jika Anda telah memiliki akun SSO Government 3.0 (beo.gov3.id) maka Anda bisa gunakan untuk login"></div>
<script src="https://beo.gov3.id/gov2sso/js/login-button.v1.js" async></script>

Nilai data-href per aplikasi

Atribut

Catatan

• CSP tuan rumah. Bila aplikasi melarang skrip dari beo.gov3.id (Nextcloud), unduh login-button.v1.js dan sajikan dari aset aplikasi sendiri. Logo sudah ter-embed di dalam JS, jadi tidak ada request lain ke beo.
• Versi. Nama berkas berversi (v1). Perubahan tampilan yang tidak kompatibel akan dirilis sebagai v2, sehingga tuan rumah yang sudah memasang tidak berubah tiba-tiba.
• Beberapa tombol dalam satu halaman didukung; skrip aman dimuat dua kali; elemen yang disisipkan belakangan (SPA) ikut dirender. API: BeoLoginWidget.render().
• Teks diisi lewat textContent (bukan innerHTML); widget tidak membaca cookie, token, atau localStorage.

Tampilan langsung

Yang Anda lihat adalah form login beo asli yang sedang di-iframe oleh halaman ini — sama dengan yang tampil di halaman login portal sandbox. Tinggi iframe mengikuti isi (iframeResizer).

Panduan pasang

1. Portal phpVB: cukup set <platform><ssonode>https://beo.gov3.id</ssonode></platform> di config.{stage}.xml. App gov2login bawaan framework sudah memuat iframe ini di /gov2login dan menangani token balik (resolver). Tidak perlu menyalin snippet.
2. Aplikasi lain yang ingin meniru pola ini harus memenuhi kontrak portal: menerima redirect.html berisi token lalu memanggil https://beo.gov3.id/slogin.php?cmd=authorize&token=… dari sisi server, dan domainnya terdaftar di Registry Portal. Bila tidak, gunakan cara 1 (OIDC).

<!-- form login beo; client = domain portal Anda (harus terdaftar di Registry Portal) -->
<iframe class="beo-auth-frame"
        src="https://beo.gov3.id/slogin.php?client=PORTAL.ANDA.go.id"
        style="width:100%;height:560px;border:0;display:block"
        referrerpolicy="unsafe-url"></iframe>

<!-- tinggi iframe mengikuti isi: beo sudah memuat iframeResizer.contentWindow (anak) -->
<script src="/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({ log: false, enablePublicMethods: true }, '.beo-auth-frame');
</script>

Halaman beo lain yang bisa di-iframe dengan cara sama

Catatan

• Registry Portal. Token sesi hanya dikirim ke domain yang terdaftar dan aktif. Domain baru → minta webmaster beo mendaftarkannya. Alternatif client_id= (id registry) diterima menggantikan client=.
• referrerpolicy="unsafe-url" dipertahankan supaya beo mengetahui halaman pemanggil secara utuh.
• Cookie pihak ketiga. Browser modern memblokir cookie beo di dalam iframe; login email + kata sandi, OTP, dan magic link tetap berjalan karena konteks dibawa lewat token bertanda tangan, bukan cookie.
• Google. Tombol "Masuk dengan Google" di form otomatis memakai target="_top" — Google menolak dibuka di dalam iframe.
• Tinggi iframe. Jangan bungkus dengan .saas-frame (overflow:hidden + rasio persegi) — form terpotong di mobile. Versi iframeResizer.min.js induk harus cocok dengan skrip anak di beo (framework phpVB: public/js/iframeResizer.min.js).
• Profil / ganti kata sandi jangan di-iframe: buka top-level lewat tautan stoken (profil portal gov2login).

Nilai konfigurasi penyedia

Langkah pendaftaran client

1. Tentukan redirect URI persis dari aplikasi Anda (biasanya ditampilkan di halaman pengaturan plugin/app OIDC-nya). Contoh: Redmine https://HOST/oidc/callback, Nextcloud https://HOST/index.php/apps/user_oidc/code, oauth2-proxy https://HOST/oauth2/callback.
2. Minta pendaftaran client lewat tiket Redmine ke agen_gajah (jurnal #4988 atau tiket turunan): nama client, jenis confidential, redirect URI, scope. Tidak ada pendaftaran mandiri.
3. client_id + client_secret diterima lewat vault (pointer path di tiket, bukan nilai). Jangan tempel secret di tiket, chat, atau repo.
4. Isi konfigurasi aplikasi: issuer/discovery, client id/secret, scope. Aktifkan PKCE bila ada pilihannya.
5. Uji E2E dengan satu akun dulu, lalu pasang tombol bagian 1 dengan data-href = endpoint mulai-login aplikasi.

Kebijakan pemetaan akun (pelajaran dari lebah & kambing)

• Identitas = alamat email beo. Cocokkan akun aplikasi dengan klaim email (bukan sub yang di-hash). Email beo tepercaya: pendaftaran mewajibkan konfirmasi (email_verified ada di klaim).
• Tanpa pembuatan akun otomatis. beo terbuka untuk umum (pendaftaran + Google). Bila aplikasi membuat akun untuk siapa pun yang lolos SSO, semua pemilik akun Google bisa masuk. Buat akun lewat admin, SSO hanya untuk akun yang sudah ada. Pengecualian hanya bila aplikasi punya allowlist sendiri (pola gerbang n8n gurita: anggota proyek).
• Cocokkan ke kolom akun, bukan kolom email sekunder. Nextcloud sempat memasukkan pengguna ke akun layanan karena kolom emailnya sama. Akun layanan/aplikasi tidak boleh memakai email yang terdaftar di beo.
• Kata sandi lokal tidak disentuh dan tidak disinkronkan. Pengguna SSO tidak memakai kata sandi lokal; jangan paksa "ganti kata sandi" pada login SSO (Redmine: flag must_change_passwd). Kata sandi lokal hanya untuk admin darurat dan akun layanan (API key, app-password WebDAV).
• Login lokal tetap ada untuk admin, supaya aplikasi tidak terkunci saat beo/gajah tidak terjangkau.
• Pencabutan akses dilakukan di aplikasi (nonaktifkan akun / keluarkan dari allowlist), bukan dengan mengubah kata sandi di beo. Sesi aplikasi yang sudah terbentuk tidak otomatis putus saat kata sandi beo diganti.

Rujukan implementasi yang sudah jalan