Web Authentication API, yang juga dikenal sebagai WebAuthn, memungkinkan server menggunakan kriptografi kunci publik - bukan sandi - untuk mendaftarkan dan mengautentikasi pengguna. Hal ini dilakukan dengan mengaktifkan integrasi antara server tersebut dan pengautentikasi yang kuat. Pengautentikasi ini dapat berupa perangkat fisik khusus (misalnya, kunci keamanan) atau terintegrasi dengan platform (misalnya, pembaca sidik jari). Anda dapat membaca selengkapnya tentang WebAuthn di sini di webauthn.guide.
Poin masalah developer
Sebelum project ini, WebAuthn tidak memiliki dukungan proses debug native di Chrome. Pengembang yang membangun aplikasi yang menggunakan WebAuth memerlukan akses ke otentikator fisik. Hal ini sangat sulit dilakukan karena dua alasan:
Ada berbagai ragam dari pengautentikasi. Proses debug berbagai konfigurasi dan kemampuan mengharuskan developer memiliki akses ke berbagai pengautentikasi yang berbeda dan terkadang mahal.
Pengautentikasi fisik memang didesain agar aman. Oleh karena itu, memeriksa statusnya biasanya tidak mungkin dilakukan.
Kami ingin mempermudah hal ini dengan menambahkan dukungan proses debug langsung di Chrome DevTools.
Solusi: tab WebAuthn baru
Tab WebAuthn DevTools mempermudah proses debug WebAuthn dengan memungkinkan developer mengemulasi pengautentikasi ini, menyesuaikan kemampuannya, dan memeriksa statusnya.
Penerapan
Menambahkan dukungan proses debug ke WebAuthn adalah proses dua bagian.
Bagian 1: Menambahkan Domain WebAuthn ke Protokol Chrome DevTools
Pertama, kami mengimplementasikan domain baru di Protokol Chrome DevTools (CDP) yang mengaitkan ke pengendali yang berkomunikasi dengan backend WebAuthn.
CDP menghubungkan front end DevTools dengan Chromium. Dalam kasus ini, kita memanfaatkan tindakan domain WebAuthn untuk menjembatani tab DevTools WebAuthn dan implementasi WebAuthn Chromium.
Domain WebAuthn memungkinkan pengaktifan dan penonaktifan Virtual Authenticator Environment, yang memutuskan koneksi browser dari Penemuan Authenticator yang sebenarnya dan menyambungkan Penemuan Virtual sebagai gantinya.
Kami juga mengekspos metode di domain yang bertindak sebagai lapisan tipis pada antarmuka Virtual Authenticator dan Penemuan Virtual yang ada, yang merupakan bagian dari penerapan WebAuthn Chromium. Metode ini termasuk menambahkan dan menghapus pengautentikasi serta membuat, mendapatkan, dan menghapus kredensial yang terdaftar.
(Baca kode)
Bagian 2: Membuat tab yang ditampilkan kepada pengguna
Kedua, kami membuat tab yang ditampilkan kepada pengguna di frontend DevTools. Tab terdiri dari tampilan dan model. Agen yang dibuat secara otomatis akan menghubungkan domain dengan tab tersebut.
Meskipun ada 3 komponen yang diperlukan, kita hanya perlu memperhatikan dua di antaranya: model dan tampilan. Komponen ketiga - agen, dibuat secara otomatis setelah menambahkan domain. Secara singkat, agen adalah lapisan yang melakukan panggilan antara frontend dan CDP.
Model
Model adalah lapisan JavaScript yang menghubungkan agen dan tampilan. Untuk kasus ini, modelnya cukup sederhana. CDP mengambil perintah dari tampilan, membangun permintaan sedemikian rupa sehingga bisa dipakai oleh CDP, lalu mengirimkannya melalui agen. Permintaan ini biasanya satu arah tanpa informasi yang dikirim kembali ke tampilan.
Akan tetapi, terkadang kita melakukan penerusan respons dari model untuk memberikan ID bagi otentikator yang baru dibuat maupun untuk mengembalikan kredensial yang disimpan dalam otentikator yang sudah 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 ini diperlukan? Pengguna harus secara eksplisit beralih lingkungan karena tindakan ini akan memutuskan koneksi browser dari Penemuan Authenticator yang sebenarnya. Oleh karena itu, saat aktif, pengautentikasi fisik yang terhubung seperti pembaca sidik jari tidak akan dikenali.
Kami memutuskan bahwa tombol eksplisit berarti pengalaman pengguna yang lebih baik, terutama bagi pengguna yang membuka tab WebAuthn tanpa mengharapkan penemuan nyata dinonaktifkan.
Menambahkan bagian Authenticator
Setelah mengaktifkan lingkungan pengautentikasi virtual, kami memberikan formulir inline kepada developer yang memungkinkan mereka menambahkan pengautentikasi virtual. Dalam formulir ini, kami menyediakan opsi penyesuaian yang memungkinkan pengguna menentukan protokol dan metode transpor pengautentikasi, serta apakah pengautentikasi mendukung kunci yang sifatnya lokal dan verifikasi pengguna.
Setelah pengguna mengklik Tambahkan, opsi ini akan dipaketkan 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, serta tabel kredensial.
Nama Authenticator
Nama pengautentikasi dapat disesuaikan dan setelan defaultnya adalah "Authenticator" digabungkan dengan 5 karakter terakhir dari ID-nya. Awalnya, nama pengautentikasi adalah ID lengkap dan tidak dapat diubah. Kami menerapkan nama yang dapat disesuaikan sehingga pengguna dapat memberi label pada otentikator berdasarkan kemampuannya, otentikator fisik yang ingin ditiru, atau nama panggilan apa pun yang sedikit lebih mudah dipahami 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 menyediakan 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 yang terdaftar untuk setiap pengautentikasi. Di masa mendatang, kami berencana menambahkan peristiwa untuk pembuatan kredensial.
Tombol Active
Kami juga menambahkan tombol pilihan Active di setiap bagian pengautentikasi. Otentikator yang saat ini disetel aktif akan menjadi satu-satunya yang memproses dan mendaftarkan kredensial. Tanpa ini, pendaftaran kredensial yang diberikan beberapa pengautentikasi bersifat tidak menentukan yang akan menjadi cacat fatal saat mencoba menguji WebAuthn menggunakannya.
Kami menerapkan status aktif menggunakan metode SetUserPresence pada pengautentikasi virtual. Metode SetUserPresence menetapkan apakah pengujian kehadiran pengguna berhasil untuk pengautentikasi tertentu. Jika kita menonaktifkannya, pengautentikasi tidak akan dapat memproses kredensial. Oleh karena itu, dengan memastikan bahwa autentikasi aktif untuk maksimal satu pengautentikasi (yang disetel sebagai aktif), dan menonaktifkan kehadiran pengguna untuk semua pengautentikasi lainnya, kita dapat memaksa perilaku determenistik.
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 Active untuk X dipilih, dan yang lainnya tidak dipilih.
Segera setelah itu, pengguna mengklik tombol pilihan Aktif untuk Authenticator Y, yang mengirimkan permintaan ke CDP untuk menyetel Y sebagai aktif. Tombol pilihan Active untuk Y dipilih, dan semua tombol lainnya, termasuk untuk X, batal dipilih.
Di backend, panggilan untuk menyetel Y sebagai aktif telah diselesaikan dan diselesaikan. Y sekarang aktif dan semua pengautentikasi lainnya tidak.
Di backend, panggilan untuk menetapkan X sebagai aktif telah diselesaikan dan diselesaikan. X sekarang aktif dan semua pengautentikasi lainnya, termasuk Y, tidak aktif.
Sekarang, situasi yang dihasilkan adalah sebagai berikut: X adalah pengautentikasi aktif. Namun, tombol pilihan Active untuk X tidak dipilih. Y bukan pengautentikasi aktif. Namun, tombol pilihan Active untuk Y dipilih. Ada ketidaksepakatan antara frontend dan status sebenarnya dari pengautentikasi. Jelas, itu adalah masalah.
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 aktif saat ini. Kemudian, tunggu panggilan untuk menyetel pengautentikasi aktif agar ditampilkan, lalu setel activeId ke ID pengautentikasi tersebut. Terakhir, kami melakukan loop pada setiap bagian pengautentikasi. Jika ID bagian tersebut sama dengan activeId, kita akan menetapkan tombol ke dipilih. Jika tidak, kita akan mengatur
tombol ke tidak dipilih.
Tampilannya 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
Kita ingin melacak penggunaan fitur ini. Awalnya, kami memberikan dua opsi.
Hitung setiap kali tab WebAuthn di DevTools dibuka. Opsi ini berpotensi menyebabkan penghitungan berlebih, karena seseorang dapat membuka tab tanpa benar-benar menggunakannya.
Melacak frekuensi "Aktifkan lingkungan pengautentikasi virtual" kotak centang di toolbar dialihkan. Opsi ini juga memiliki potensi masalah penghitungan berlebih karena sebagian opsi dapat mengaktifkan dan menonaktifkan lingkungan beberapa kali dalam sesi yang sama.
Pada akhirnya, kami memutuskan untuk menggunakan yang terakhir, tetapi membatasi penghitungan dengan memeriksa apakah lingkungan sudah diaktifkan dalam sesi. Oleh karena itu, kami hanya akan menambah jumlahnya sebesar 1, terlepas dari berapa kali developer mengalihkan lingkungan. Hal ini berfungsi karena sesi baru dibuat setiap kali tab dibuka kembali, sehingga mereset pemeriksaan dan memungkinkan metrik ditambahkan lagi.
Ringkasan
Terima kasih sudah 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 DevTools WebAuthn
- Dokumen desain API pengujian Autentikasi Web
- 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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, 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.
- Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.