Published: July 15, 2026
แม้ว่าพาสคีย์จะนำไปใช้ได้ง่าย แต่ความสามารถและแนวทางปฏิบัติแนะนำก็มีการพัฒนาอย่างต่อเนื่อง การเรียนรู้เหตุผลที่ต้องใช้และวิธีใช้ต้องใช้เวลา ทีม Chrome จึงขอแนะนำทักษะพาสคีย์ของ Modern Web Guidance เพื่อช่วยคุณและ Agent สร้างประสบการณ์การลงชื่อเข้าใช้ที่ปลอดภัยและทันสมัยโดยใช้พาสคีย์
เหตุใดจึงควรใช้ทักษะพาสคีย์
คำแนะนำในการพัฒนาเว็บที่ทันสมัย คือชุดทักษะที่ออกแบบมาเพื่อแนะนำ Agent การเขียนโค้ด AI เช่น Anti Gravity หรือ Claude Code ทักษะพาสคีย์ช่วยให้คุณนำการลงทะเบียน การตรวจสอบสิทธิ์ การจัดการ และการตรวจสอบสิทธิ์ซ้ำไปใช้ได้โดยใช้ API และแนวทางปฏิบัติแนะนำล่าสุด Agent การเขียนโค้ดจะสร้างการใช้งานสำหรับ UI ส่วนหน้าและตรรกะส่วนหลังโดยอัตโนมัติ
การประเมินแสดงให้เห็นว่าการใช้งานโดยใช้ทักษะพาสคีย์มีประสิทธิภาพเหนือกว่าการใช้งานที่ไม่มีทักษะพาสคีย์ใน Claude Code Opus 4.8 การประเมินนี้ใช้แอปพลิเคชันสาธิตและพรอมต์ที่อธิบายไว้ในเอกสารนี้
| ไม่มีทักษะพาสคีย์ | มีทักษะพาสคีย์ | |
|---|---|---|
| ผ่าน | 47 | 80 |
| ล้มเหลว | 32 | 0 |
| ไม่มี | 12 | 11 |
| รวม | 91 | 91 |
ความแตกต่างที่เห็นได้ชัดที่สุดคือหน้าจอการจัดการพาสคีย์ ซึ่งจะแสดง รายการพาสคีย์ที่สร้างขึ้นตามรายการผู้ให้บริการพาสคีย์ที่ชุมชนดูแลจัดการ โดยทำตามแนวทางปฏิบัติแนะนำ สำหรับการจัดการพาสคีย์
ทักษะพาสคีย์ยังช่วยให้ Agent การเขียนโค้ดมีความสามารถที่มีประสิทธิภาพและมองเห็นได้ยากขึ้น ดังนี้
getClientCapabilities: ตรวจหาฟีเจอร์ที่ทันสมัย- การซีเรียลไลซ์ JSON: ซีเรียลไลซ์เพย์โหลดที่เข้ารหัสด้วยการเรียก JavaScript ครั้งเดียว
- การจัดการข้อผิดพลาด: แสดงข้อความหรือปิดข้อความตามประเภทข้อผิดพลาด
- การแสดงโฆษณาคั่นระหว่างหน้าแบบมีเงื่อนไข: อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้โดยตรงจากคำแนะนำการป้อนข้อความอัตโนมัติของเบราว์เซอร์
- Signal API: ซิงค์รายการข้อมูลเข้าสู่ระบบระหว่างผู้ให้บริการกับเซิร์ฟเวอร์ของคุณ
- การสร้างแบบมีเงื่อนไข: สร้างพาสคีย์โดยอัตโนมัติสำหรับผู้ใช้ที่ลงชื่อเข้าใช้ด้วยรหัสผ่านเมื่อเร็วๆ นี้
ขั้นตอนที่ 1: โคลนที่เก็บสาธิต
ลองใช้ทักษะพาสคีย์กับโปรเจ็กต์สาธิต ทักษะพาสคีย์ โคลนที่เก็บดังนี้
git clone git@github.com:GoogleChromeLabs/passkey-skills-demo.git
ขั้นตอนที่ 2: ติดตั้ง Modern Web Guidance
เรียกใช้วิซาร์ดการตั้งค่าแบบโต้ตอบในไดเรกทอรีโปรเจ็กต์เพื่อติดตั้ง Modern Web Guidance
npx modern-web-guidance@latest install
วิซาร์ดนี้จะเพิ่มไฟล์ที่จำเป็นลงในเลย์เอาต์โปรเจ็กต์ ซึ่งช่วยให้ Agent AI เข้าใจข้อกำหนดของพาสคีย์
ขั้นตอนที่ 3: ใช้พรอมต์
เมื่อติดตั้งแล้ว ให้ใช้พรอมต์ต่อไปนี้เพื่อสร้างฟีเจอร์ ตัวอย่างเหล่านี้ครอบคลุม Use Case 4 รายการที่ทักษะพาสคีย์ครอบคลุม และออกแบบมาโดยเฉพาะสำหรับโปรเจ็กต์แซนด์บ็อกซ์
การลงทะเบียน
อนุญาตให้ผู้ใช้ลงทะเบียนพาสคีย์สำหรับบัญชีของตน หากต้องการนำไปใช้ ให้ลองใช้พรอมต์ต่อไปนี้
Implement passkey registration at /settings page under start directory
ตัวอย่างการดำเนินการของ Agent: Agent จะสร้างหรือแก้ไข UI ส่วนหน้าและตรรกะส่วนหลังโดยอัตโนมัติเพื่อลงทะเบียนพาสคีย์ใหม่
การตรวจสอบสิทธิ์
เปิดใช้ให้ผู้ใช้ที่กลับมาลงชื่อเข้าใช้ได้อย่างรวดเร็วโดยใช้ข้อมูลเข้าสู่ระบบที่ค้นพบได้ ผ่านทริกเกอร์ปุ่มที่ชัดเจนหรือคำแนะนำการป้อนข้อความอัตโนมัติของเบราว์เซอร์ หากต้องการนำไปใช้ ให้ลองใช้พรอมต์ต่อไปนี้
Implement passkey authentication at the top page under start directory
ตัวอย่างการดำเนินการของ Agent: Agent จะจัดการลูปการเข้าสู่ระบบและการยืนยัน โดยอัตโนมัติในเส้นทาง Landing Page หลักหรือเส้นทางการลงชื่อเข้าใช้
การจัดการ
อนุญาตให้ผู้ใช้ดู เปลี่ยนชื่อ และลบพาสคีย์ที่ลงทะเบียนไว้ ขณะเดียวกันก็ซิงค์ข้อมูลเข้าสู่ระบบระหว่างเซิร์ฟเวอร์กับเครื่องมือจัดการรหัสผ่านของเบราว์เซอร์ หากต้องการนำไปใช้ ให้ลองใช้พรอมต์ต่อไปนี้
Implement passkey management at /settings page under start directory
ตัวอย่างการดำเนินการของ Agent: Agent จะสร้างตัวเลือกโครงสร้างให้ผู้ใช้ ดู เพิ่ม หรือเพิกถอนพาสคีย์ที่มีอยู่
การตรวจสอบสิทธิ์ซ้ำ
ยืนยันข้อมูลประจำตัวของผู้ใช้ที่ลงชื่อเข้าใช้โดยใช้พาสคีย์ที่มีอยู่ก่อนที่จะอนุญาตการดำเนินการที่มีความละเอียดอ่อน เช่น การเปลี่ยนแปลงด้านความปลอดภัยหรือการโอนเงิน หากต้องการนำไปใช้ ให้ลองใช้พรอมต์ต่อไปนี้
Implement passkey reauthentication at /reauth under start directory
ตัวอย่างการดำเนินการของ Agent: Agent จะตั้งค่าการรักษาความปลอดภัยแบบเพิ่มระดับสำหรับการดำเนินการของผู้ใช้ที่มีความละเอียดอ่อน
/modern-web-guidance
หรือคำสั่งต่อไปนี้สำหรับ Codex
$modern-web-guidance
โปรดดูเอกสารประกอบของ Agent หรือถาม Agent เกี่ยวกับวิธีเรียกใช้ทักษะ modern-web-guidance โดยตรงหากไม่แน่ใจ
ผสานรวมฝั่งเซิร์ฟเวอร์
แม้ว่า Agent การเขียนโค้ดจะสร้างโค้ดพาสคีย์ฝั่งเซิร์ฟเวอร์ได้ แต่ Agent อาจไม่ได้ใช้ไลบรารีเวอร์ชันล่าสุด ที่เก็บสาธิตทักษะพาสคีย์มีทักษะ
simplewebauthn ซึ่งเป็นทักษะสำหรับไลบรารีฝั่งเซิร์ฟเวอร์ที่แนะนำ
สำหรับ JavaScript และ TypeScript นั่นคือSimpleWebAuthn
ทักษะนี้จะเสริมการทำงานของ Agent การเขียนโค้ด
สำหรับภาษาโปรแกรมฝั่งเซิร์ฟเวอร์อื่นๆ Google ขอแนะนำให้ผสานรวมพาสคีย์กับไลบรารีพาสคีย์ FIDO2 หรือ WebAuthn ที่เฉพาะเจาะจงกับภาษา พร้อมด้วยทักษะในการใช้ API ล่าสุดของไลบรารี ผู้เขียนไลบรารีจะเขียนทักษะของตนเองเพื่อให้ Agent การเขียนโค้ดใช้ API ล่าสุดได้เสมอ
ข้อจำกัดความรับผิดและการแสดงความคิดเห็น
คำแนะนำในการพัฒนาเว็บที่ทันสมัยและทักษะพาสคีย์อยู่ในเวอร์ชันตัวอย่าง ทักษะเหล่านี้ได้รับการ พัฒนาและทดสอบโดยใช้โปรเจ็กต์สาธิต ทักษะพาสคีย์กับ Agent เช่น Antigravity และ Claude Code แม้ว่าจะมีการทดสอบกับฐานโค้ดอื่นๆ แล้ว แต่ทักษะอาจต้องมีการปรับเปลี่ยนนอกเหนือจากพรอมต์ตัวอย่างที่ให้ไว้ โปรดตรวจสอบโค้ดที่สร้างขึ้นเพื่อให้เป็นไปตามที่คุณต้องการ และระบุพรอมต์เพิ่มเติมตามที่จำเป็น
ทีม Chrome จะอัปเดตทักษะเหล่านี้และเพิ่มฟีเจอร์ข้อมูลระบุตัวตนและการตรวจสอบสิทธิ์อื่นๆ ลงใน Modern Web Guidance เมื่อเวลาผ่านไป หากมีความคิดเห็นหรือคำขอฟีเจอร์ โปรดส่งความคิดเห็นหรือคำขอไปยังที่เก็บ modern-web-guidance-src
ลองใช้วันนี้เลยเพื่อลดความซับซ้อนในการนำพาสคีย์ไปใช้