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

Eiji Kitamura

Dipublikasikan: 15 Juli 2026

Meskipun kunci sandi mudah diterapkan, kemampuan dan praktik terbaiknya terus berkembang. Mempelajari alasan mengapa fitur tersebut diperlukan dan cara menggunakannya memerlukan waktu. Untuk menyederhanakan proses ini, tim Chrome memperkenalkan keterampilan kunci sandi Panduan Web Modern untuk membantu Anda dan agen Anda membangun pengalaman login modern yang aman menggunakan kunci sandi.

Mengapa menggunakan skill kunci sandi?

Panduan Web Modern adalah serangkaian keterampilan yang dirancang untuk memandu agen coding AI, seperti Anti Gravity atau Claude Code. Dengan keterampilan kunci sandi, Anda dapat menerapkan pendaftaran, autentikasi, pengelolaan, dan reautentikasi menggunakan API terbaru dan praktik terbaik. Agen coding secara mandiri membuat penerapan untuk UI frontend dan logika backend.

Evaluasi menunjukkan bahwa implementasi yang menggunakan keterampilan kunci sandi mengungguli implementasi tanpa keterampilan tersebut 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, dengan mengikuti praktik terbaik pengelolaan kunci sandi.

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

• getClientCapabilities: Lakukan deteksi fitur modern.
• Serialisasi JSON: Serialisasi payload yang dienkode dengan satu panggilan JavaScript.
• Penanganan error: Menampilkan pesan atau menutupnya, bergantung pada jenis error.
• Mediasi bersyarat: Izinkan pengguna login langsung dari saran pengisian otomatis browser.
• Signal API: Menjaga sinkronisasi daftar kredensial antara penyedia dan server Anda.
• Pembuatan bersyarat: Buat kunci sandi secara otomatis untuk pengguna yang baru-baru ini login dengan sandi.

Langkah 1: Buat 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: Instal Panduan Web Modern

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

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: Gunakan perintah

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

Pendaftaran

Mengizinkan pengguna mendaftarkan kunci sandi untuk akun mereka. Untuk menerapkan, coba perintah berikut:

Implement passkey registration at /settings page under start directory

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

Autentikasi

Memungkinkan pengguna yang kembali login dengan cepat menggunakan kredensial yang dapat ditemukan, melalui pemicu tombol eksplisit atau saran isi otomatis browser. Untuk menerapkannya, 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 halaman 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 mengimplementasikannya, coba perintah berikut:

Implement passkey management at /settings page under start directory

Eksekusi agen contoh: 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 menerapkan, coba perintah berikut:

Implement passkey reauthentication at /reauth under start directory

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

/modern-web-guidance

Atau perintah berikut untuk Codex:

$modern-web-guidance

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

Mengintegrasikan sisi server

Meskipun agen pengodean dapat membuat kode kunci sandi sisi server, agen tersebut 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. Keahlian ini melengkapi perilaku agen coding.

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

Pernyataan penyangkalan dan masukan

Panduan Web Modern dan keterampilan kunci sandi 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, kemampuan ini mungkin memerlukan penyesuaian di luar perintah contoh yang diberikan. Tinjau kode yang dihasilkan untuk memastikan kode tersebut sesuai dengan harapan Anda, dan berikan perintah tambahan sesuai kebutuhan.

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

Coba sekarang untuk menyederhanakan adopsi kunci sandi.