Menerapkan kunci sandi kini lebih mudah: Memperkenalkan keterampilan kunci sandi Panduan Web Modern

Eiji Kitamura

Dipublikasikan: 15 Juli 2026

Meskipun kunci sandi mudah diimplementasikan, kemampuan dan praktik terbaik terus berkembang. Membutuhkan waktu untuk mempelajari alasan kunci sandi diperlukan dan cara menggunakannya. Untuk menyederhanakan proses ini, tim Chrome memperkenalkan keterampilan kunci sandi Modern Web Guidance untuk membantu Anda dan agen Anda membangun pengalaman login modern yang aman menggunakan kunci sandi.

Mengapa harus menggunakan keterampilan kunci sandi?

Modern Web Guidance adalah sekumpulan keterampilan yang dirancang untuk memandu agen coding AI, seperti Anti Gravity atau Claude Code. Dengan keterampilan kunci sandi, Anda dapat mengimplementasikan pendaftaran, autentikasi, pengelolaan, dan autentikasi ulang menggunakan API dan praktik terbaik terbaru. Agen coding secara otomatis membuat implementasi untuk UI frontend dan logika backend.

Evaluasi menunjukkan bahwa implementasi menggunakan keterampilan kunci sandi lebih unggul daripada implementasi tanpa keterampilan kunci sandi di Claude Code Opus 4.8. Evaluasi ini menggunakan aplikasi demo dan perintah yang dijelaskan dalam dokumen ini.

Perbedaan yang paling terlihat adalah layar pengelolaan kunci sandi, yang menampilkan daftar kunci sandi yang dibuat berdasarkan daftar penyedia kunci sandi yang dikurasi komunitas, mengikuti praktik terbaik pengelolaan kunci sandi.

Keterampilan kunci sandi juga memberdayakan agen coding Anda dengan kemampuan yang canggih dan kurang terlihat:

• getClientCapabilities: Melakukan deteksi fitur modern.
• Serialisasi JSON: Melakukan serialisasi payload yang dienkode dengan satu panggilan JavaScript.
• Penanganan error: Menampilkan pesan atau menutup pesan, bergantung pada jenis error.
• Mediasi bersyarat: Mengizinkan pengguna login langsung dari saran pelengkapan otomatis browser.
• Signal API: Menjaga daftar kredensial tetap sinkron antara penyedia dan server Anda.
• Pembuatan bersyarat: Membuat kunci sandi secara otomatis untuk pengguna yang baru-baru ini login dengan sandi.

Langkah 1: Membuat clone repositori demo

Coba keterampilan kunci sandi dengan project demo keterampilan kunci sandi. Buat clone repositori:

git clone git@github.com:GoogleChromeLabs/passkey-skills-demo.git

Langkah 2: Menginstal Modern Web Guidance

Jalankan wizard penyiapan interaktif di direktori project Anda untuk menginstal Modern Web Guidance:

npx modern-web-guidance@latest install

Wizard ini menambahkan file yang diperlukan ke tata letak project Anda, sehingga agen AI Anda dapat memahami persyaratan kunci sandi.

Langkah 3: Menggunakan perintah

Setelah diinstal, gunakan perintah ini untuk membuat fitur Anda. Contoh ini mencakup empat kasus penggunaan yang dicakup oleh keterampilan kunci sandi dan dirancang khusus untuk project sandbox.

Pendaftaran

Izinkan pengguna mendaftarkan kunci sandi untuk akun mereka. Untuk mengimplementasikan, coba perintah berikut:

Implement passkey registration at /settings page under start directory

Contoh eksekusi agen: Agen secara otomatis membuat atau mengubah UI frontend dan logika backend untuk mendaftarkan kunci sandi baru.

Autentikasi

Izinkan pengguna yang kembali untuk login dengan cepat menggunakan kredensial yang dapat ditemukan, melalui pemicu tombol eksplisit atau saran pelengkapan otomatis browser. Untuk mengimplementasikan, coba perintah berikut:

Implement passkey authentication at the top page under start directory

Contoh eksekusi agen: Agen menangani loop login dan verifikasi secara otomatis di landing utama atau rute login.

Pengelolaan

Izinkan pengguna melihat, mengganti nama, dan menghapus kunci sandi terdaftar mereka sambil menjaga kredensial tetap disinkronkan antara server dan pengelola sandi browser. Untuk mengimplementasikan, coba perintah berikut:

Implement passkey management at /settings page under start directory

Contoh eksekusi agen: Agen membuat pilihan struktural bagi pengguna untuk melihat, menambahkan, atau mencabut kunci sandi yang ada.

Autentikasi ulang

Verifikasi identitas pengguna yang login menggunakan kunci sandi yang ada sebelum mengizinkan tindakan sensitif seperti perubahan keamanan atau transfer keuangan. Untuk mengimplementasikan, coba perintah berikut:

Implement passkey reauthentication at /reauth under start directory

Contoh eksekusi agen: Agen menyiapkan keamanan langkah demi langkah untuk tindakan pengguna yang sensitif pengguna.

/modern-web-guidance

Atau perintah berikut untuk Codex:

$modern-web-guidance

Lihat dokumentasi agen Anda, atau tanyakan kepada agen Anda cara memanggil keterampilan modern-web-guidance secara langsung jika Anda tidak yakin.

Mengintegrasikan sisi server

Meskipun agen coding dapat membuat kode kunci sandi sisi server, mereka mungkin tidak menggunakan versi library terbaru. Repositori demo keterampilan kunci sandi mencakup keterampilan simplewebauthn yang merupakan keterampilan untuk library sisi server yang direkomendasikan untuk JavaScript dan TypeScript—SimpleWebAuthn. Keterampilan ini melengkapi perilaku agen coding.

Untuk bahasa pemrograman sisi server lainnya, Google merekomendasikan untuk mengintegrasikan kunci sandi dengan kunci sandi khusus bahasa, FIDO2, atau library WebAuthn, beserta keterampilan untuk menggunakan API terbarunya. Penulis library menulis keterampilan mereka sendiri sehingga agen coding dapat selalu menggunakan API terbaru.

Sanggahan dan masukan

Modern Web Guidance dan keterampilan kunci sandi masih dalam versi pratinjau. Keterampilan ini dikembangkan dan diuji menggunakan project demo keterampilan kunci sandi dengan agen seperti Antigravity dan Claude Code. Meskipun diuji terhadap codebase lain, keterampilan ini mungkin memerlukan penyesuaian di luar perintah contoh yang diberikan. Tinjau kode yang dibuat untuk memastikan kode tersebut memenuhi harapan Anda, dan berikan perintah tambahan sesuai kebutuhan.

Tim Chrome memperbarui keterampilan ini dan menambahkan fitur identitas dan autentikasi lainnya ke Modern Web Guidance dari waktu ke waktu. Jika Anda memiliki masukan atau permintaan fitur, kirimkan ke repositori modern-web-guidance-src.

Coba sekarang juga untuk menyederhanakan adopsi kunci sandi.