--- url: 'https://www.corbado.com/id/blog/webauthn-conditional-ui-isi-otomatis-kunci-sandi' title: 'Penjelasan Teknis WebAuthn Conditional UI (Isi Otomatis Kunci Sandi)' description: 'Conditional UI / Conditional Mediation / Isi Otomatis Kunci Sandi adalah fitur baru dari kunci sandi. Artikel ini menjelaskan pengertian, cara kerja, dan implementasinya.' lang: 'id' author: 'Vincent Delitz' date: '2026-07-03T07:10:20.768Z' lastModified: '2026-07-03T07:11:02.844Z' keywords: 'isi otomatis kunci sandi, conditional mediation, webauthn, kredensial yang dapat ditemukan, passkeys autofill' category: 'WebAuthn Know-How' --- # Penjelasan Teknis WebAuthn Conditional UI (Isi Otomatis Kunci Sandi) ## Key Facts - **Kredensial yang dapat ditemukan (resident keys)** diperlukan untuk Conditional UI: autentikator tidak menyimpan data spesifik pengguna untuk non-resident keys, sehingga membuat isi otomatis (autofill) tidak mungkin dilakukan dengan jenis tersebut. - **`isConditionalMediationAvailable()`** harus dipanggil sebelum memulai alur Conditional UI apa pun untuk mencegah kesalahan yang terlihat oleh pengguna pada browser atau perangkat yang tidak didukung. - Token **`autocomplete="username webauthn"`** pada kolom input HTML memberi sinyal kepada browser untuk memunculkan kunci sandi bersamaan dengan saran kata sandi di menu tarik-turun isi otomatis. - Mengatur **`mediation: "conditional"`** dalam pemanggilan `navigator.credentials.get()` mengaktifkan isi otomatis kunci sandi tanpa mengganggu pengguna dengan dialog modal yang memblokir. - Sebuah **`AbortController`** diperlukan untuk membatalkan permintaan Conditional UI yang sedang berlangsung karena menu tarik-turun isi otomatis, tidak seperti prompt modal, tidak memiliki tombol pembatalan bawaan. ## 1. Pengantar Dengan adopsi kunci sandi yang cepat (serta protokol WebAuthn yang mendasarinya), autentikasi telah menjadi lebih aman dan ramah pengguna bagi banyak orang. Salah satu kemajuan menonjol dari kunci sandi adalah integrasi Conditional UI, yang sering disebut sebagai "isi otomatis kunci sandi" atau Conditional Mediation (berikutnya kita akan tetap menggunakan istilah Conditional UI). Terlepas dari perkenalannya yang baru-baru ini dan adopsinya yang terus berlanjut oleh browser, terdapat kesenjangan yang mencolok dalam dokumentasi teknis dan saran implementasi untuk Conditional UI. Artikel ini bertujuan untuk menjembatani kesenjangan tersebut dengan menjelaskan apa itu Conditional UI, bagaimana cara kerjanya, dan bagaimana mengatasi tantangan umum selama implementasinya. ## 2. Apa itu Conditional UI? Conditional UI mewakili mode baru untuk proses login kunci sandi / WebAuthn. Fitur ini secara selektif menampilkan kunci sandi dalam antarmuka pengguna (UI) hanya ketika seorang pengguna memiliki kredensial yang dapat ditemukan (resident key), yang merupakan jenis kunci sandi, terdaftar pada pihak pengandal (relying party - layanan online) yang disimpan di dalam autentikator sebuah perangkat (misalnya laptop, ponsel pintar). Kunci sandi tersebut ditampilkan dalam menu tarik-turun pilihan yang bercampur dengan kata sandi yang diisi secara otomatis, memberikan transisi yang mulus antara sistem kata sandi tradisional dan autentikasi kunci sandi tingkat lanjut, karena pengguna melihat keduanya dalam konteks yang sama. Pendekatan cerdas ini memastikan bahwa pengguna tidak kewalahan dengan pilihan yang tidak perlu dan dapat menavigasi proses login dengan lebih mulus. Pondasi dari Conditional UI dibangun di atas tiga pilar utama: 1. **Menghargai Privasi Pengguna:** Memastikan privasi pengguna dengan mencegah pengungkapan kredensial yang tersedia atau kurangnya persetujuan pengguna untuk mengungkap kredensial ini. 2. **Pengalaman Pengguna yang Hebat Meskipun Tidak Ada Kunci Sandi:** Memberdayakan pihak pengandal untuk mengimplementasikan WebAuthn secara oportunistik, memastikan pengalaman pengguna tetap baik bahkan jika kunci sandi tidak tersedia. 3. **Transisi yang Mulus Dari Kata Sandi ke Kunci Sandi:** Menggabungkan kunci sandi dengan autentikasi berbasis kata sandi untuk memuluskan transisi menuju metode autentikasi tanpa kata sandi (passwordless), memanfaatkan paradigma UX yang sudah dikenal pengguna. ![Login kunci sandi WebAuthn conditional ui](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/Web_Authn_passkey_login_conditional_ui_8c8e7b0de5.png) ## 3. Keuntungan dan Kekurangan Conditional UI ### 3.1 Keuntungan - **Autentikasi yang Disederhanakan:** Prosesnya lebih disederhanakan dan efisien, menghilangkan kompleksitas yang sering kali terkait dengan berbagai metode autentikasi. - **Pengurangan Kesalahan Pengguna:** Dengan hanya menyajikan opsi yang relevan, kemungkinan pengguna untuk melakukan kesalahan selama proses autentikasi menjadi lebih kecil. - **Peningkatan Kepuasan Pengguna:** Menghapus langkah-langkah yang tidak perlu berarti pengguna dapat login dengan lebih cepat dan lebih mudah, yang mengarah pada peningkatan kepuasan pengguna. - **Integrasi Frontend yang Sederhana:** Salah satu fitur menonjol dari Conditional UI adalah kemudahan integrasinya. Pengembang dapat dengan mulus menggabungkannya ke dalam frontend dengan beberapa baris kode (lihat di bawah). - **Login Tanpa Kata Sandi dan Tanpa Nama Pengguna:** Salah satu manfaat besarnya adalah bahwa Conditional UI tidak hanya mempromosikan autentikasi tanpa kata sandi (passwordless) tetapi juga pengalaman tanpa nama pengguna atau tanpa akun. Pengguna terbebas dari beban mental untuk mengingat alamat email tertentu atau handle pengguna mereka dari saat pendaftaran. Sebaliknya, mereka dapat mengandalkan saran dari browser, yang mencakup alamat email/handle pengguna yang dipasangkan dengan kunci sandi yang sesuai dalam menu isi otomatis. - **Menyelesaikan Dilema Bootstrapping:** Transisi dari sistem nama pengguna-kata sandi tradisional ke kunci sandi bisa jadi menakutkan. Conditional UI mengatasi tantangan transisi ini. Situs web dapat menginisiasi panggilan kunci sandi / WebAuthn di samping prompt kata sandi konvensional tanpa khawatir tentang potensi kesalahan dialog modal jika perangkat tidak memiliki kredensial yang dibutuhkan. ### 3.2 Kekurangan - **Kurva Pembelajaran bagi Pengembang:** Conditional UI memperkenalkan paradigma baru, yang berarti ada kurva pembelajaran yang terlibat bagi pengembang yang tidak familier dengan kerumitannya. - **Ketergantungan Perangkat / Browser:** Keberhasilan Conditional UI bergantung pada perangkat pengguna atau kompatibilitas browser. Mengingat bahwa saat ini tidak semua browser atau perangkat mendukungnya, hal ini dapat membatasi penerapannya. - **Pengelola Kata Sandi Menonaktifkan Autocomplete:** Beberapa pengelola kata sandi modern dan ekstensi browser mereka memodifikasi DOM situs web dan menonaktifkan atau menimpa tag autocomplete di bidang input untuk mendukung fitur autocomplete mereka sendiri. Ini dapat menyebabkan pengalaman pengguna yang tidak konsisten dan tidak memuaskan. Mengingat standar untuk Conditional UI masih relatif baru, kami berharap segalanya membaik, sehingga misalnya tidak ada dua menu isi otomatis yang tumpang tindih atau menu yang diinginkan tidak ditampilkan sama sekali. ## 4. Bagaimana cara kerja Conditional UI? Berikut ini, kami memberikan rincian langkah demi langkah dari setiap langkah dalam keseluruhan alur Conditional UI: ![Bagan alir proses Conditional UI WebAuthn](https://www.corbado.com/website-assets/653274ad0332e7d69c77e199_webauthn_conditional_ui_process_flow_chart_6a1709e56d.png) Secara umum, alur proses Conditional UI dapat dibagi menjadi dua fase. Selama fase pemuatan halaman (page load), logika Conditional UI terjadi di latar belakang, sedangkan di fase operasi pengguna, pengguna harus secara aktif melakukan sesuatu. 1. **Pemeriksaan Ketersediaan Conditional UI:** Klien (browser) memanggil fungsi `isConditionalMediationAvailable()` untuk mendeteksi apakah kombinasi browser / perangkat saat ini mendukung Conditional UI. Hanya jika responsnya adalah true, proses berlanjut, jika tidak, proses Conditional UI dibatalkan. 2. **Memanggil Endpoint Conditional UI:** Selanjutnya, klien memanggil endpoint Conditional UI milik server untuk mengambil PublicKeyCredentialRequestOptions. 3. **Menerima PublicKeyCredentialRequestOptions:** Server mengembalikan PublicKeyCredentialRequestOptions yang berisi challenge dan lebih banyak opsi server WebAuthn (misalnya allowCredentials, extensions, userVerification). 4. **Memulai Autentikasi Lokal:** Dengan memanggil `credentials.get()` beserta PublicKeyCredentialRequestOptions yang diterima dan properti `mediation` yang diatur menjadi conditional, proses untuk autentikasi lokal pada perangkat akan dimulai. 5. **Menampilkan Pilihan Isi Otomatis:** Menu isi otomatis untuk kunci sandi muncul. Penataan gaya (styling) tertentu bergantung pada browser dan perangkat (misalnya beberapa mengharuskan pengguna untuk menempatkan kursor di bidang input, beberapa secara otomatis menampilkan menu saat pemuatan halaman, lihat di bawah). 6. **Autentikasi Pengguna Lokal:** Pengguna memilih kunci sandi dari menu isi otomatis yang ingin mereka gunakan dan mengautentikasi melalui dialog autentikasi perangkat mereka (misalnya melalui Face ID, Touch ID, Windows Hello). 7. **Mengirim Respons Autentikator ke Server:** Jika autentikasi pengguna lokal berhasil, respons autentikator dikirim kembali ke server. 8. **Pengguna Berhasil Login dan Diarahkan Ulang:** Setelah server menerima respons autentikator, server memvalidasi tanda tangan tersebut terhadap kunci publik akun pengguna yang sesuai dalam database. Jika verifikasi berhasil, pengguna diberikan akses, berhasil login, dan diarahkan ulang ke halaman akun. Dengan mengikuti alur proses ini, Conditional UI menawarkan pengalaman autentikasi yang mulus dan ramah pengguna. ## 5. Persyaratan Teknis untuk Conditional UI ### 5.1 Umum Untuk membuat Conditional UI bekerja, beberapa aspek umum perlu dipertimbangkan: - **Spesifikasi Kredensial:** Conditional UI secara khusus dirancang untuk beroperasi hanya dengan resident keys / discoverable credentials. Alasannya adalah autentikator tidak menyimpan data spesifik pengguna (misalnya, nama, nama tampilan) untuk non-resident keys / non-discoverable credentials. Akibatnya, menggunakan jenis kunci ini untuk isi otomatis kunci sandi tidak dimungkinkan. - **Penyaringan Kredensial:** Fitur [allowCredentials](https://www.w3.org/TR/webauthn-2/#dom-publickeycredentialrequestoptions-allowcredentials) tetap didukung, memfasilitasi situs web yang telah mengetahui identitas pengguna (misalnya, jika nama pengguna dikirim dalam panggilan mediasi awal karena nama tersebut mungkin disimpan di LocalStorage browser) untuk mempersempit daftar kredensial yang ditampilkan kepada pengguna selama isi otomatis. ### 5.2 Sisi Klien Untuk membuat Conditional UI bekerja di sisi klien, persyaratan berikut harus terpenuhi: - **Browser yang Kompatibel:** Pastikan bahwa pengguna menggunakan browser modern yang mendukung Conditional UI (lihat [di sini](https://caniuse.com/mdn-api_publickeycredential_isconditionalmediationavailable_static) untuk cakupan browser terbaru). - **JavaScript Diaktifkan:** JavaScript harus diaktifkan untuk memfasilitasi operasi Conditional UI. - **Uji Ketersediaan Conditional UI:** Pihak pengandal (sisi server) harus memiliki kepastian bahwa Conditional UI tersedia di sisi klien, ketika menerima panggilan mediasi WebAuthn agar menghindari memicu adanya kesalahan yang terlihat oleh pengguna dalam skenario di mana Conditional UI tidak didukung. Untuk mengatasi ini, disarankan untuk menggunakan metode `isConditionalMediationAvailable()` dan memeriksa ketersediaan teknis dari Conditional UI (lihat [di bawah](#browser-compatibility-check) untuk detail lebih lanjut). - **Diperlukan Bidang Input HTML:** Agar Conditional UI dapat berfungsi, Anda perlu memiliki bidang input HTML di halaman web Anda. Jika Anda tidak memilikinya, Anda perlu memberikan dukungan untuk proses login kunci sandi / WebAuthn biasa yang dipicu dengan interaksi pengguna, seperti klik tombol. - **Menghapus Protokol Batas Waktu (Timeout):** Parameter batas waktu (misalnya, pengguna membutuhkan waktu yang sangat lama untuk memutuskan kunci sandi di menu isi otomatis) harus diabaikan dalam penyiapan ini. ### 5.3 Sisi Server Untuk membuat Conditional UI bekerja, beberapa persyaratan di sisi server juga harus terpenuhi: - **Menjalankan Server WebAuthn:** Karena kita masih berada dalam konteks kunci sandi / WebAuthn, diperlukan sebuah server WebAuthn yang berjalan yang mengelola prosedur autentikasi. - **Menyediakan Endpoint Awal Mediasi:** Dibandingkan dengan endpoint login WebAuthn biasa, ada baiknya menyediakan endpoint lain yang memiliki fungsionalitas serupa tetapi dapat menangani handle pengguna opsional (misalnya, alamat email, nomor telepon, nama pengguna). ## 6. Tips Praktis Coding Sejak peluncuran resmi Conditional UI pada akhir tahun 2022 dan versi beta sebelumnya, kami telah menguji dan bekerja secara ekstensif dengannya. Berikut ini, kami ingin membagikan kepada Anda tips praktis yang membantu selama implementasi Conditional UI. ### 6.1 Contoh Penuh Conditional UI Contoh kode minimalis lengkap untuk metode Conditional UI akan terlihat seperti ini: ```html Conditional UI ``` ### 6.2 Pemeriksaan Kompatibilitas Browser Implementasikan deteksi Conditional UI yang memastikan bahwa Conditional UI hanya digunakan ketika kombinasi perangkat / browser saat ini mendukungnya. Hal ini harus berjalan tanpa menyajikan kesalahan yang terlihat oleh pengguna jika tidak ada dukungan Conditional UI. Memasukkan metode `isConditionalMediationAvailable()` di dalam antarmuka pengguna mengatasi masalah ini. Jika dukungan Conditional UI ada, proses login Conditional UI dapat dimulai. ```javascript // source: https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isConditionalMediationAvailable#examples // Availability of `window.PublicKeyCredential` means WebAuthn is usable. if (window.PublicKeyCredential && PublicKeyCredential.isConditionalMediationAvailable) { // Check if conditional mediation is available. const isCMA = await PublicKeyCredential.isConditionalMediationAvailable(); if (isCMA) { // Call WebAuthn authentication start endpoint let options = await WebAuthnClient.getPublicKeyRequestOptions(); const credential = await navigator.credentials.get({ publicKey: options.publicKeyCredentialRequestOptions, mediation: "conditional", }); /* ... */ } } ``` ### 6.3 Token Autocomplete WebAuthn pada Bidang Input Bidang input harus menerima token autofill HTML webauthn. Ini memberi sinyal kepada klien untuk mengisi kunci sandi ke permintaan yang sedang berlangsung. Selain kunci sandi, nilai isi otomatis lainnya mungkin juga ditampilkan. Token isi otomatis ini dapat dipasangkan dengan token lain yang ada, misalnya: - `autocomplete="username webauthn"`: Selain menampilkan kunci sandi, token ini juga menyarankan isi otomatis nama pengguna. - `autocomplete="current-password webauthn"`: Selain menampilkan kunci sandi, token ini lebih lanjut meminta untuk isi otomatis kata sandi. ```html ``` Untuk detail lebih lanjut, kami sarankan untuk membaca posting blog kami yang memberikan lebih banyak detail tentang token autofill / autocomplete untuk kunci sandi dan kata sandi. ### 6.4 Properti Mediasi di Pemanggilan Get API WebAuthn Untuk mengambil kunci sandi yang tersedia setelah menerima objek PublicKeyCredentialRequestOptions, fungsi `navigator.credentials.get()` harus dipanggil (yang melayani kunci sandi maupun kata sandi). Objek PublicKeyCredentialRequestOptions perlu memiliki parameter mediation yang disetel ke conditional untuk mengaktifkan Conditional UI pada klien. Untuk kasus di mana Anda menginginkan prompt kunci sandi modal sebagai gantinya, lihat mediasi langsung. ```javascript const credential = await navigator.credentials.get({ publicKey: options.publicKeyCredentialRequestOptions, mediation: "conditional", }); ``` ### 6.5 Pembatalan Alur Conditional UI Jika tidak ada kunci sandi yang tersedia, atau pengguna mengabaikan kunci sandi yang disarankan dan memasukkan email mereka, alur Conditional UI akan dihentikan. Hal ini menggarisbawahi pentingnya selalu mendukung login standar kunci sandi / WebAuthn melalui sebuah modal. Satu poin penting yang harus ditekankan di sini adalah potensi kebutuhan untuk menghentikan permintaan Conditional UI yang sedang berlangsung. Berlawanan dengan pengalaman modal, menu tarik-turun isi otomatis tidak memiliki tombol pembatalan. Sesuai desain WebAuthn, hanya [satu permintaan kredensial aktif tunggal](https://github.com/w3c/webappsec-credential-management/issues/206) yang harus diproses pada satu waktu tertentu. Standar WebAuthn menyarankan untuk menggunakan sebuah [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) untuk membatalkan sebuah proses WebAuthn, yang berlaku untuk proses login reguler dan Conditional UI (lihat [di sini](https://w3c.github.io/webauthn/#sctn-sample-aborting) untuk detail). Dalam telemetri produksi, jalur pembatalan ini sering kali merupakan hasil alur kontrol yang diharapkan, bukan kegagalan sistem. Jika Anda melihat volume kesalahan yang tinggi, Anda perlu mengklasifikasikan kasus yang diharapkan vs yang tidak diharapkan berdasarkan tipe operasi dan waktu (timing) sebelum memperlakukannya sebagai regresi (lihat Kesalahan WebAuthn). Proses login Conditional UI menjadi aktif segera setelah pengguna tiba di halaman tersebut. Tugas awal haruslah membuat objek `AbortController` dengan cakupan global. Ini akan bertindak sebagai sinyal bagi klien Anda untuk mengakhiri permintaan isi otomatis, terutama jika pengguna memutuskan untuk melakukan proses login kunci sandi reguler. Pastikan bahwa `AbortController` dapat diaktifkan oleh fungsi lain dan diatur ulang jika proses Conditional UI harus dimulai ulang. Gunakan properti signal di dalam pemanggilan `navigator.credentials.get()`, menggabungkan sinyal `AbortController` Anda sebagai nilainya. Hal ini memberi sinyal kepada fungsi kunci sandi / WebAuthn bahwa permintaan tersebut harus dihentikan jika sinyal dibatalkan. Ingatlah untuk menyiapkan `AbortController` yang baru setiap kali Anda memicu Conditional UI. Menggunakan `AbortController` yang sudah dibatalkan akan menyebabkan pembatalan instan pada fungsi kunci sandi / WebAuthn. Langkah-langkah selanjutnya sejajar dengan proses login kunci sandi reguler. Berikut ini, Anda melihat contoh kode dari langkah-langkah yang disebutkan di atas: ```html Conditional UI ``` Apabila Conditional UI tidak didukung, arahkan pengguna menuju proses login kunci sandi reguler. Menawarkan jalur ini penting bagi pengguna yang bergantung pada kunci keamanan perangkat keras (misalnya YubiKey) atau mereka yang terpaksa menggunakan non-resident keys / non-discoverable credentials karena keterbatasan autentikator. ### 6.6 Conditional UI dalam Aplikasi Native Saat Anda mengembangkan aplikasi native, misalnya untuk iOS atau Android, Conditional UI juga bisa berfungsi. Tidak peduli apakah Anda mengimplementasikannya secara native di Flutter, Kotlin, atau Swift, atau jika Anda memutuskan untuk menggunakan Chrome Custom Tabs (CCT) atau SFSafariViewController atau SFAuthenticationSession / ASWebAuthenticationSession. Kedua pendekatan mendukung Conditional UI. #### 6.6.1 Conditional UI dalam Aplikasi iOS Secara umum, kami hampir tidak menemukan dokumentasi mengenai cara mengimplementasikan dukungan Conditional UI untuk aplikasi iOS. Namun, selama penelitian kami, kami menemukan dua cara untuk menambahkan dukungan Conditional UI pada aplikasi iOS, karena pengalaman pengguna juga akan berbeda. **Tipe A: Overlay / Popup yang Menutupi Hampir Seluruh Layar** Tipe pertama, tipe A, menampilkan overlay / popup yang membentang hampir ke seluruh layar. Di sini, Anda akan melihat semua kunci sandi yang tersedia untuk pihak pengandal ini. Contoh terkemuka yang mengimplementasikan Conditional UI dengan cara ini adalah KAYAK. Overlay / popup muncul secara otomatis, ketika pengguna membuka layar yang benar. ![Popup Aplikasi iOS Conditional UI](https://www.corbado.com/website-assets/65fd93a0a95c16b286ab7bc1_conditional_ui_ios_app_popup_00d4f8124a.jpg) **Tipe B: Isi Otomatis Keyboard** Tipe kedua, tipe B, menampilkan kunci sandi yang cocok di bagian isi otomatis keyboard (tempat kata sandi juga disarankan untuk diisi otomatis). Mengklik nilai yang disarankan akan melakukan autentikasi Face ID dan memungkinkan Anda masuk. Dalam versi aplikasi iOS panel developer Corbado saat ini, kami telah mengimplementasikannya dengan cara ini (lihat pesan Masuk dengan kunci sandi untuk `` bersama dengan nama pengguna WebAuthn). Untuk dapat muncul, pengguna harus mengetuk ke dalam bidang input: ![Isi Otomatis Keyboard aplikasi iOS Conditional UI](https://www.corbado.com/website-assets/65fd93ae3406831e812dcae2_conditional_ui_ios_app_keyboard_autofill_98e9550aab.jpg) Fitur isi otomatis kunci sandi di bagian keyboard ini mungkin bermasalah saat iOS baru saja diinstal ulang karena rupanya ada semacam caching di latar belakang yang mencari semua kunci sandi yang tersedia untuk pihak pengandal ini. Mengklik ikon kunci di sebelah kanan kunci sandi yang disarankan akan mengarah ke situs umum untuk memilih kata sandi / kunci sandi di iOS: ![Detail Isi Otomatis Keyboard aplikasi iOS Conditional UI](https://www.corbado.com/website-assets/65fd952b9e058d8bf2ae011c_conditional_ui_ios_app_keyboard_autofill_details_582133a5e0.jpg) Harap diperhatikan bahwa kami belum menemukan dokumentasi resmi, dan wawasan kami didasarkan pada pengalaman dan hipotesis kami, bukan pada bukti nyata dari implementasi yang tepat. #### 6.6.2 Conditional UI dalam Aplikasi Android Di Android, cerita tentang Conditional UI sedikit lebih jelas, karena hanya ada satu tipe untuk Conditional UI / isi otomatis kunci sandi yang memanfaatkan Android Credential Manager API (lihat dokumentasinya [di sini](https://developer.android.com/training/sign-in/passkeys)). Karena penyedia layanan Android dapat berbeda-beda, pantau kesalahan kunci sandi Credential Manager secara terpisah dari pola kegagalan WebAuthn khusus browser. Membuka halaman di mana Conditional UI diimplementasikan akan menampilkan layar berikut, di mana Anda akan menemukan berbagai cara untuk masuk: ![Aplikasi Android Conditional UI](https://www.corbado.com/website-assets/65fd953866efb99383ecadff_conditional_ui_android_app_d9744622dc.jpg) Mengklik **Lebih banyak rincian masuk tersimpan (More saved sign-ins)** memberikan opsi lain untuk dipilih guna login (termasuk autentikasi lintas perangkat dan pemilihan platform sinkronisasi kunci sandi yang berbeda, misalnya Samsung Pass atau 1Password): ![Detail aplikasi Android Conditional UI](https://www.corbado.com/website-assets/65fd954176d4bacee21bd397_conditional_ui_android_app_details_bb2b567121.jpg) ## 7. Contoh Conditional UI di Berbagai Perangkat / Browser Untuk mengilustrasikan bagaimana tampilan Conditional UI bagi pengguna akhir, kami menambahkan beberapa tangkapan layar dari menu isi otomatis Conditional UI yang menggunakan [https://passkeys.eu](https://passkeys.eu). ### 7.1 Conditional UI di Windows 11 (22H2) + Chrome 118 ![Windows Chrome Conditional UI](https://www.corbado.com/website-assets/653274d5f112bcb90551666f_conditional_ui_windows_chrome_f6be9c714b.png) ### 7.2 Conditional UI di macOS Ventura (13.5.1) + Chrome 118 ![macOS Chrome Conditional UI](https://www.corbado.com/website-assets/653274ef4711bafab8f9337e_conditional_ui_macos_chrome_b577291109.png) ### 7.3 Conditional UI di macOS Ventura (13.5.1) + Safari 16.6 ![macOS Safari Conditional UI](https://www.corbado.com/website-assets/6532750a0dd891b360beef99_conditional_ui_macos_safari_e27787adb9.png) ### 7.4 Conditional UI di Android 13 + Chrome 118 ![Android Chrome Conditional UI](https://www.corbado.com/website-assets/6532752344d30f53cb09b9b6_conditional_ui_android_chrome_25ff68bcb5.jpg) ### 7.5 Conditional UI di iOS 17.1 + Safari 17.1 ![iOS Safari Conditional UI](https://www.corbado.com/website-assets/65327537f112bcb90551b96b_conditional_ui_ios_safari_87cd12b54e.PNG) ## 8. Conditional UI pada Edge Case (Kasus Batas) Mari kita lihat beberapa skenario umum pada aplikasi kehidupan nyata. ### 8.1 Conditional UI jika tidak ada Kunci Sandi yang tersedia Jika tidak ada kunci sandi yang tersimpan untuk sebuah situs, Conditional UI akan berperilaku berbeda tergantung pada browser dan OS. #### 8.1.1 Conditional UI tanpa Kunci Sandi di Chrome pada macOS Pada **Chrome di macOS**, mengklik bidang input akan menampilkan menu tarik-turun isi otomatis yang kosong: ![conditional ui tanpa kunci sandi macos chrome](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_no_passkey_macos_chrome_8cb107283f.png) #### 8.1.2 Conditional UI tanpa Kunci Sandi di Safari pada macOS Pada **Safari di macOS**, tidak ada menu tarik-turun yang ditampilkan - hanya ikon halus di bidang input: ![conditional ui tanpa kunci sandi macos safari](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_no_passkey_macos_safari_1be2b7f264.png) #### 8.1.3 Conditional UI tanpa Kunci Sandi pada Android atau iOS Pada **Android atau iOS**, antarmuka isi otomatis hanya muncul jika pengguna mengetuk bidang input dan OS menemukan kredensial yang cocok. Variabilitas ini disengaja dan merupakan bagian dari model privasi WebAuthn: situs web tidak dapat mendeteksi apakah pengguna memiliki kunci sandi, kecuali pengguna tersebut memilihnya secara aktif. ### 8.2 Conditional UI dan Pengelola Kredensial Ganda / Penyedia Kunci Sandi Jika pengguna telah memasang beberapa penyedia kunci sandi (misalnya iCloud Keychain, Google Password Manager, 1Password), browser atau OS akan biasanya mengambil default ke pengelola kredensial utama pengguna. Untuk daftar berbagai penyedia kunci sandi / pengelola kredensial yang mendukung kunci sandi, kami sarankan untuk melihat [tautan GitHub](https://passkeydeveloper.github.io/passkey-authenticator-aaguids/explorer/) berikut. #### 8.2.1 Conditional UI dan Pengelola Kredensial Ganda pada Android Di Android, Credential Manager mengekspos berbagai penyedia layanan seperti Samsung Pass atau 1Password. 1. Saat mengklik pada bidang input pengidentifikasi pengguna, menu ini muncul di mana pengguna dapat memilih sebuah kunci sandi. ![conditional ui berbagai manajer kredensial android pilih kunci sandi](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_multiple_credential_managers_android_choose_passkey_1f5be7736f.png) 2. Jika pengguna mengklik "Lebih banyak kunci sandi (More passkeys)" di layar sebelumnya, prakondisi dari penyedia kunci sandi lain / pengelola kredensial dan kunci sandi akan muncul: ![conditional ui berbagai manajer kredensial android pilih login](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_multiple_credential_managers_android_choose_sign_in_d91c861fca.png) 3. Jika pengguna mengklik "Lebih banyak rincian masuk tersimpan (More saved sign-ins)" di layar sebelumnya, sebuah daftar keseluruhan akan muncul tempat pengguna dapat memilih kunci sandi. ![detail conditional ui berbagai manajer kredensial android pilih login](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_multiple_credential_managers_android_choose_sign_in_details_e9d9526da9.png) #### 8.2.2 Conditional UI dan Pengelola Kredensial Ganda di iOS Pada iOS, ikon kunci membuka daftar lengkap kunci sandi dari berbagai sumber. 1. Pada awalnya, di iOS 18+, Conditional UI reguler dengan penyedia kunci sandi default akan muncul. ![conditional ui berbagai manajer kredensial ios](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_multiple_credential_managers_ios_4c1fd3eaa7.png) 2. Saat mengklik ikon keyboard, menu pemilihan berikut muncul. ![conditional ui berbagai manajer kredensial ios pilih penyedia](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_multiple_credential_managers_ios_select_provider_737870e35b.png) 3. Setelah memilih pengelola kredensial / penyedia kunci sandi, pengguna dapat memilih kunci sandi yang akan digunakan. ![conditional ui berbagai manajer kredensial ios pilih kunci sandi](https://s3.eu-central-1.amazonaws.com/corbado-cloud-staging-website-assets/conditional_ui_multiple_credential_managers_ios_select_passkey_568b192b3f.png) > Sebagai aplikasi atau situs web, Anda tidak dapat mengontrol pengelola kredensial mana yang digunakan - OS-lah > yang mengelola pilihan itu untuk menjaga > privasi pengguna. ## 9. Kesimpulan Kunci sandi (passkeys), dengan kemampuan Conditional UI / isi otomatis kunci sandinya, merupakan cara baru untuk melakukan autentikasi online. Ketika kita beralih ke era di mana kata sandi semakin banyak digantikan oleh kunci sandi, kebutuhan akan mekanisme transisi yang kuat dan ramah pengguna tidak dapat disangkal. Artikel ini telah membantu memahami cara mengimplementasikan Conditional UI dengan benar, sebuah bantuan besar dalam proses transisi, dan aspek mana saja yang perlu diberi perhatian khusus. ## Pertanyaan yang Sering Diajukan (FAQ) ### Bagaimana cara memeriksa apakah browser mendukung Conditional UI sebelum memulai alur isi otomatis kunci sandi? Panggil `PublicKeyCredential.isConditionalMediationAvailable()` dan lanjutkan hanya jika itu mengembalikan true. Pemeriksaan ini mencegah kesalahan yang terlihat oleh pengguna pada kombinasi browser dan perangkat yang tidak didukung. Metode ini harus dievaluasi pada setiap pemuatan halaman sebelum memanggil `navigator.credentials.get()` dengan `mediation: "conditional"`. ### Mengapa Conditional UI hanya berfungsi dengan kredensial yang dapat ditemukan (discoverable credentials) dan tidak semua kunci sandi? Autentikator hanya menyimpan data spesifik pengguna seperti nama dan nama tampilan untuk resident keys (kredensial yang dapat ditemukan). Non-resident keys tidak mempertahankan informasi ini, sehingga menu isi otomatis tidak dapat mengisi detail akun untuk dipilih oleh pengguna. ### Apa yang terjadi pada Conditional UI ketika pengguna tidak memiliki kunci sandi yang terdaftar untuk suatu situs? Perilakunya bervariasi berdasarkan platform. Chrome pada macOS menunjukkan menu isi otomatis tarik-turun yang kosong, Safari pada macOS hanya menampilkan ikon halus pada bidang input, dan pada Android atau iOS antarmuka isi otomatis hanya muncul jika OS menemukan kredensial yang cocok setelah pengguna mengetuk bidang input. Variabilitas ini disengaja dan merupakan bagian dari model privasi WebAuthn: situs web tidak dapat mendeteksi apakah ada kunci sandi kecuali pengguna secara aktif memilihnya. ### Bagaimana cara membatalkan permintaan Conditional UI yang sedang berlangsung ketika pengguna beralih ke login kunci sandi modal? Buat sebuah `AbortController` dengan cakupan global dan lewati signal miliknya ke `navigator.credentials.get()`. Panggil `.abort()` pada controller saat pengguna memulai alur login modal. Selalu buat instansiasi (instantiate) `AbortController` yang baru setiap kali Conditional UI dimulai ulang, karena menggunakan ulang controller yang sudah dibatalkan menyebabkan pembatalan segera dari permintaan WebAuthn tersebut. ### Apakah Conditional UI berfungsi di aplikasi native iOS dan Android atau hanya di browser web? Conditional UI berfungsi pada aplikasi native iOS maupun Android. iOS mendukung dua varian: popup overlay layar penuh dan saran isi otomatis di keyboard. Android menggunakan Credential Manager API, yang dapat memunculkan kunci sandi dari beberapa penyedia layanan seperti Samsung Pass atau 1Password.