Web Authentication API, juga dikenal sebagai WebAuthn, memungkinkan server menggunakan kriptografi kunci publik, bukan sandi, untuk mendaftarkan dan mengautentikasi pengguna. Hal ini dilakukan dengan memungkinkan integrasi antara server tersebut dan pengautentikasi yang kuat. Otentikator ini dapat berupa perangkat fisik khusus (misalnya kunci keamanan) atau terintegrasi dengan platform (misalnya pembaca sidik jari). Anda dapat membaca informasi selengkapnya tentang WebAuthn di sini di webauthn.guide.
Poin masalah developer
Sebelum project ini, WebAuthn tidak memiliki dukungan proses debug native di Chrome. Developer yang membuat aplikasi yang menggunakan WebAuth memerlukan akses ke pengautentikasi fisik. Ini sangat sulit karena dua alasan:
Ada berbagai ragam pengautentikasi. Men-debug beragam konfigurasi dan kemampuan mengharuskan developer memiliki akses ke banyak pengautentikasi yang berbeda, yang terkadang mahal.
Otentikator fisik, sengaja didesain agar aman. Oleh karena itu, memeriksa statusnya biasanya tidak mungkin.
Kami ingin mempermudah hal ini dengan menambahkan dukungan proses debug langsung di Chrome DevTools.
Solusi: tab WebAuthn baru
Tab WebAuthn DevTools memudahkan proses debug WebAuthn dengan mengizinkan developer mengemulasikan pengautentikasi ini, menyesuaikan kemampuannya, dan memeriksa statusnya.
Penerapan
Menambahkan dukungan proses debug ke WebAuthn dilakukan dalam dua bagian.
Bagian 1: Menambahkan Domain WebAuthn ke Protokol Chrome DevTools
Pertama, kami menerapkan domain baru di Chrome DevTools Protocol (CDP) yang terkait ke pengendali yang berkomunikasi dengan backend WebAuthn.
CDP menghubungkan front-end DevTools dengan Chromium. Dalam kasus ini, kami menggunakan tindakan domain WebAuthn untuk menjembatani tab WebAuthn DevTools dan implementasi WebAuthn Chromium.
Domain WebAuthn memungkinkan pengaktifan dan penonaktifan Lingkungan Authenticator Virtual, yang memutuskan sambungan browser dari Penemuan Authenticator yang sebenarnya dan dicolokkan di Penemuan Virtual.
Kami juga mengekspos metode di domain yang berfungsi sebagai lapisan tipis untuk antarmuka Authenticator Virtual dan Penemuan Virtual yang ada, yang merupakan bagian dari implementasi WebAuthn Chromium. Metode ini termasuk menambahkan dan menghapus pengautentikasi serta membuat, mendapatkan, dan menghapus kredensial terdaftarnya.
(Baca kode)
Bagian 2: Membangun tab yang ditampilkan kepada pengguna
Kedua, kami mem-build tab yang ditampilkan kepada pengguna di frontend DevTools. Tab terdiri dari tampilan dan model. Agen yang dibuat secara otomatis menghubungkan domain dengan tab.
Meskipun ada 3 komponen yang diperlukan, kita hanya perlu mengkhawatirkan dua komponen: model dan tampilan. Komponen ke-3 - agen, dibuat secara otomatis setelah menambahkan domain. Secara singkat, agen adalah lapisan yang membawa panggilan antara front end dan CDP.
Model
Model adalah lapisan JavaScript yang menghubungkan agen dan tampilan. Untuk kasus kita, modelnya cukup sederhana. Fungsi ini mengambil perintah dari tampilan, mem-build permintaan sedemikian rupa sehingga dapat digunakan oleh CDP, lalu mengirimkannya melalui agen. Permintaan ini biasanya satu arah tanpa informasi yang dikirim kembali ke tampilan.
Namun, terkadang kita meneruskan kembali respons dari model untuk menyediakan ID bagi pengautentikasi yang baru dibuat atau untuk menampilkan kredensial yang disimpan dalam pengautentikasi yang ada.
(Baca kode)
Tampilan
Kita menggunakan tampilan untuk menyediakan antarmuka pengguna yang dapat ditemukan developer saat mengakses DevTools. File tersebut berisi:
- Toolbar untuk mengaktifkan lingkungan pengautentikasi virtual.
- Bagian untuk menambahkan pengautentikasi.
- Bagian untuk pengautentikasi yang dibuat.
(Baca kode)
Toolbar untuk mengaktifkan lingkungan pengautentikasi virtual
Karena sebagian besar interaksi pengguna dilakukan dengan satu pengautentikasi dalam satu waktu, bukan seluruh tab, satu-satunya fungsi yang kami sediakan di toolbar adalah mengaktifkan dan menonaktifkan lingkungan virtual.
Mengapa hal ini diperlukan? Pengguna harus mengaktifkan/menonaktifkan lingkungan secara eksplisit, karena tindakan tersebut akan memutuskan koneksi browser dari Penemuan Authenticator yang sebenarnya. Oleh karena itu, saat diaktifkan, pengautentikasi fisik yang terhubung seperti pembaca sidik jari tidak akan dikenali.
Kami memutuskan bahwa tombol eksplisit berarti pengalaman pengguna yang lebih baik, terutama bagi mereka yang membuka tab WebAuthn tanpa mengharapkan penonaktifan penemuan yang sebenarnya.
Menambahkan bagian Authenticator
Setelah mengaktifkan lingkungan pengautentikasi virtual, kami akan memberikan formulir inline kepada developer agar mereka dapat menambahkan pengautentikasi virtual. Dalam formulir ini, kami menyediakan opsi penyesuaian yang memungkinkan pengguna menentukan protokol dan metode transportasi pengautentikasi, serta apakah pengautentikasi mendukung kunci penduduk dan verifikasi pengguna.
Setelah pengguna mengklik Tambahkan, opsi ini digabungkan dan dikirim ke model yang melakukan panggilan untuk membuat pengautentikasi. Setelah selesai, frontend akan menerima respons, lalu memodifikasi UI untuk menyertakan pengautentikasi yang baru dibuat.
Tampilan Authenticator
Setiap kali pengautentikasi diemulasikan, kami menambahkan bagian ke tampilan pengautentikasi untuk mewakilinya. Setiap bagian pengautentikasi menyertakan nama, ID, opsi konfigurasi, tombol untuk menghapus pengautentikasi atau menyetelnya ke aktif, dan tabel kredensial.
Nama Authenticator
Nama pengautentikasi dapat disesuaikan dan ditetapkan secara default ke "Authenticator" beserta 5 karakter terakhir ID-nya. Awalnya, nama pengautentikasi berupa ID lengkap dan tidak dapat diubah. Kami menerapkan nama yang dapat disesuaikan sehingga pengguna dapat memberi label pada pengautentikasi berdasarkan kemampuannya, pengautentikasi fisik yang ingin diemulasikan, atau nama panggilan apa pun yang sedikit lebih mudah dicerna daripada ID 36 karakter.
Tabel kredensial
Kami menambahkan tabel ke setiap bagian pengautentikasi yang menampilkan semua kredensial yang didaftarkan oleh pengautentikasi. Di dalam setiap baris, kami memberikan informasi tentang kredensial, serta tombol untuk menghapus atau mengekspor kredensial.
Saat ini, kami mengumpulkan informasi untuk mengisi tabel ini dengan melakukan polling pada CDP guna mendapatkan kredensial terdaftar untuk setiap pengautentikasi. Di masa mendatang, kami berencana menambahkan peristiwa untuk pembuatan kredensial.
Tombol Aktif
Kami juga menambahkan tombol pilihan Aktif ke setiap bagian pengautentikasi. Otentikator yang saat ini disetel aktif akan menjadi satu-satunya yang memproses dan mendaftarkan kredensial. Tanpanya, pendaftaran kredensial yang diberikan oleh beberapa pengautentikasi bersifat non-deterministik, yang akan menjadi cacat fatal saat mencoba menguji WebAuthn dengan menggunakannya.
Kami menerapkan status aktif menggunakan metode SetUserPresence pada pengautentikasi virtual. Metode SetUserPresence menetapkan apakah pengujian kehadiran pengguna berhasil untuk pengautentikasi tertentu. Jika kami menonaktifkannya, pengautentikasi tidak akan dapat memproses kredensial. Oleh karena itu, dengan memastikan bahwa ia aktif untuk maksimal satu pengautentikasi (yang disetel sebagai aktif), dan menonaktifkan kehadiran pengguna untuk semua pengautentikasi yang lain, kita dapat memaksakan perilaku deterministik.
Tantangan menarik yang kami hadapi saat menambahkan tombol aktif adalah menghindari kondisi race. Pertimbangkan skenario berikut:
Pengguna mengklik tombol pilihan Aktif untuk Authenticator X, yang mengirimkan permintaan ke CDP untuk menyetel X sebagai aktif. Tombol pilihan Aktif untuk X dipilih, sedangkan tombol lainnya tidak dipilih.
Segera setelah itu, pengguna mengklik tombol pilihan Aktif untuk Authenticator Y, yang mengirimkan permintaan ke CDP untuk menetapkan Y sebagai aktif. Tombol pilihan Aktif untuk Y dipilih, dan tombol lainnya, termasuk untuk X, tidak dipilih.
Di backend, panggilan untuk menetapkan Y sebagai aktif diselesaikan dan diselesaikan. Y sekarang aktif dan semua pengautentikasi lainnya tidak aktif.
Di backend, panggilan untuk menetapkan X sebagai aktif telah diselesaikan dan diselesaikan. X kini aktif dan semua pengautentikasi lainnya, termasuk Y, tidak aktif.
Sekarang, situasi yang dihasilkan adalah sebagai berikut: X adalah pengautentikasi aktif. Namun, tombol pilihan Aktif untuk X tidak dipilih. Y bukan pengautentikasi aktif. Namun, tombol pilihan Active untuk Y dipilih. Terdapat perbedaan antara bagian depan dan status pengautentikasi yang sebenarnya. Tentu saja, itu masalahnya.
Solusi kami: Buat komunikasi dua arah semu antara tombol pilihan dan pengautentikasi aktif. Pertama, kita mempertahankan variabel activeId dalam tampilan untuk melacak ID pengautentikasi yang sedang aktif. Kemudian, kita menunggu panggilan untuk menyetel pengautentikasi aktif agar ditampilkan, lalu menetapkan activeId ke ID pengautentikasi tersebut. Terakhir, kita melakukan loop pada setiap bagian pengautentikasi. Jika ID bagian tersebut sama dengan activeId, kita menyetel tombol ke dipilih. Jika tidak, kita menyetel tombol ke tidak dipilih.
Tampilannya akan terlihat seperti berikut:
async _setActiveAuthenticator(authenticatorId) {
await this._clearActiveAuthenticator();
await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
this._activeId = authenticatorId;
this._updateActiveButtons();
}
_updateActiveButtons() {
const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
Array.from(authenticators).forEach(authenticator => {
authenticator.querySelector('input.dt-radio-button').checked =
authenticator.getAttribute('data-authenticator-id') === this._activeId;
});
}
async _clearActiveAuthenticator() {
if (this._activeId) {
await this._model.setAutomaticPresenceSimulation(this._activeId, false);
}
this._activeId = null;
}
Metrik penggunaan
Kami ingin melacak penggunaan fitur ini. Awalnya, kami memberikan dua opsi.
Hitung setiap kali tab WebAuthn di DevTools dibuka. Opsi ini berpotensi menyebabkan penghitungan berlebihan, karena seseorang dapat membuka tab tanpa benar-benar menggunakannya.
Pantau frekuensi pengaktifan kotak centang "Aktifkan lingkungan pengautentikasi virtual" di toolbar. Opsi ini juga memiliki potensi masalah penghitungan berlebih karena beberapa pengguna dapat mengaktifkan dan menonaktifkan lingkungan beberapa kali dalam sesi yang sama.
Pada akhirnya, kami memutuskan untuk menggunakan mekanisme kedua, tetapi membatasi penghitungannya dengan melakukan pemeriksaan untuk mengetahui apakah lingkungan tersebut sudah diaktifkan dalam sesi. Oleh karena itu, kita hanya akan meningkatkan jumlahnya sebesar 1, terlepas dari berapa kali developer mengaktifkan/menonaktifkan lingkungan. Opsi ini berfungsi karena sesi baru dibuat setiap kali tab dibuka kembali, sehingga mereset pemeriksaan dan memungkinkan metrik bertambah lagi.
Ringkasan
Terima kasih telah membaca. Jika Anda memiliki saran untuk meningkatkan tab WebAuthn, beri tahu kami dengan melaporkan bug.
Berikut beberapa referensi jika Anda ingin mempelajari WebAuthn lebih lanjut:
- Dokumen desain front-end WebAuthn DevTools
- Dokumen desain Web Authentication Testing API
- Spesifikasi Web Authentication API (WebAuthn)
- Penjelasan dan panduan WebAuthn
Mendownload saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan ini, atau hal lain yang terkait dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Tuliskan komentar di video YouTube Yang baru di DevTools atau video YouTube di DevTools.