Pemeriksaan deteksi fitur Credential Management API

Eiji Kitamura

Ringkasan

WebAuthn membantu meningkatkan keamanan dengan menghadirkan autentikasi berbasis kredensial kunci publik ke Web, dan akan segera didukung di Chrome, Firefox, dan Edge (dengan spesifikasi yang diperbarui). Fitur ini menambahkan jenis objek Credential baru, yang dapat merusak situs yang menggunakan Credential Management API tanpa mendeteksi fitur jenis kredensial tertentu yang digunakan.

Jika saat ini Anda melakukannya untuk deteksi fitur

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

Lakukan hal ini

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Lihat perubahan yang dilakukan pada kode contoh sebagai contoh.

Baca terus untuk mempelajari lebih lanjut.

Catatan: Jika Anda menggunakan Google Identity sebagai cara utama bagi pengguna untuk login, pertimbangkan untuk menggunakan library JavaScript pendaftaran sekali ketuk dan login otomatis yang dibuat di Credential Management API. API ini menggabungkan login dengan Google dan login berbasis sandi ke dalam satu panggilan API, serta menambahkan dukungan untuk pembuatan akun sekali ketuk.

Apa yang dimaksud dengan Credential Management API

Credential Management API (CM API) memberi situs akses terprogram ke penyimpanan kredensial agen pengguna untuk menyimpan/mengambil kredensial pengguna untuk origin panggilan.

API dasar adalah:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

Spesifikasi CM API asli menentukan 2 jenis kredensial:

• PasswordCredential
• FederatedCredential

PasswordCredential adalah kredensial yang berisi ID dan sandi pengguna. FederatedCredential adalah kredensial yang berisi ID pengguna dan string yang mewakili penyedia identitas.

Dengan 2 kredensial ini, situs dapat:

• Izinkan pengguna login dengan kredensial berbasis sandi atau gabungan yang disimpan sebelumnya segera setelah mereka membuka halaman (login otomatis),
• Simpan kredensial berbasis sandi atau gabungan yang digunakan pengguna untuk login,
• Memastikan kredensial login pengguna selalu terbaru (misalnya, setelah perubahan sandi)

Apa itu WebAuthn

WebAuthn (Autentikasi Web) menambahkan kredensial kunci publik ke CM API. Misalnya, API ini memberi situs cara standar untuk menerapkan autentikasi faktor kedua menggunakan perangkat pengautentikasi yang mematuhi FIDO 2.0.

Pada tingkat teknis, WebAuthn memperluas CM API dengan antarmuka PublicKeyCredential.

Apa permasalahannya?

Sebelumnya, kami telah memandu developer untuk mendeteksi fitur CM API dengan kode berikut:

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >soon.
/td/tr/tbody/table


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if&& (navigator.credentials  navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Lihat perubahan sebenarnya yang dilakukan pada kode contoh sebagai contoh.

Sebagai referensi, berikut cara mendeteksi PublicKeyCredential yang ditambahkan di WebAuthn:

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

Linimasa

Implementasi WebAuthn paling awal yang tersedia adalah Firefox dan direncanakan akan stabil sekitar awal Mei 2018.

Terakhir

Jika ada pertanyaan, kirimkan ke @agektmr atau [e-mail].