แม้ว่าข้อมูลเข้าสู่ระบบ FIDO เช่น พาสคีย์ มีไว้เพื่อแทนที่รหัสผ่าน แต่ข้อมูลส่วนใหญ่ยังช่วยให้ผู้ใช้ไม่ต้องพิมพ์ชื่อผู้ใช้ด้วย ซึ่งช่วยให้ผู้ใช้ตรวจสอบสิทธิ์ได้โดยเลือกบัญชีจากรายการพาสคีย์ที่มีสำหรับเว็บไซต์ปัจจุบัน
คีย์ความปลอดภัยเวอร์ชันเก่าออกแบบมาเพื่อใช้ตรวจสอบสิทธิ์แบบ 2 ขั้นตอน และต้องใช้รหัสของข้อมูลเข้าสู่ระบบที่เป็นไปได้ จึงจำเป็นต้องป้อนชื่อผู้ใช้ ข้อมูลเข้าสู่ระบบที่คีย์ความปลอดภัยค้นหาได้โดยไม่ต้องทราบรหัสเรียกว่าข้อมูลเข้าสู่ระบบที่ค้นพบได้ ข้อมูลเข้าสู่ระบบ FIDO ส่วนใหญ่ที่สร้างในปัจจุบันคือข้อมูลเข้าสู่ระบบที่ค้นพบได้ โดยเฉพาะพาสคีย์ที่เก็บไว้ในเครื่องมือจัดการรหัสผ่านหรือในคีย์ความปลอดภัยสมัยใหม่
โปรดระบุ residentKey
และ requireResidentKey
เมื่อสร้างข้อมูลเข้าสู่ระบบเพื่อให้ระบบสร้างข้อมูลเข้าสู่ระบบเป็นพาสคีย์ (ข้อมูลเข้าสู่ระบบที่ค้นพบได้)
ฝ่ายที่เชื่อถือ (RP) สามารถใช้ข้อมูลเข้าสู่ระบบที่ค้นพบได้โดยละเว้น allowCredentials
ในระหว่างการตรวจสอบสิทธิ์ด้วยพาสคีย์ ในกรณีเหล่านี้ เบราว์เซอร์หรือระบบจะแสดงรายการพาสคีย์ที่ใช้ได้ให้ผู้ใช้เห็น โดยระบุด้วยพร็อพเพอร์ตี้ user.name
ที่ตั้งค่าไว้ ณ เวลาที่สร้างขึ้น หากผู้ใช้เลือกค่าใดค่าหนึ่ง ค่า user.id
จะรวมอยู่ในลายเซ็นที่ได้ จากนั้นเซิร์ฟเวอร์จะใช้รหัสดังกล่าวหรือรหัสข้อมูลเข้าสู่ระบบที่แสดงผลเพื่อค้นหาบัญชีแทนชื่อผู้ใช้ที่พิมพ์
UI ตัวเลือกบัญชี เช่น ตัวเลือกที่กล่าวถึงก่อนหน้านี้ จะไม่แสดงข้อมูลเข้าสู่ระบบที่ตรวจไม่พบ
requireResidentKey
และ residentKey
หากต้องการสร้างพาสคีย์ ให้ระบุ authenticatorSelection.residentKey
และ authenticatorSelection.requireResidentKey
ใน navigator.credentials.create()
ด้วยค่าที่ระบุไว้ดังต่อไปนี้
async function register () {
// ...
const publicKeyCredentialCreationOptions = {
// ...
authenticatorSelection: {
authenticatorAttachment: 'platform',
residentKey: 'required',
requireResidentKey: true,
}
};
const credential = await navigator.credentials.create({
publicKey: publicKeyCredentialCreationOptions
});
// This does not run until the user selects a passkey.
const credential = {};
credential.id = cred.id;
credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
credential.type = cred.type;
// ...
}
residentKey
:
'required'
: ต้องสร้างข้อมูลเข้าสู่ระบบที่ค้นพบได้ หากสร้างไม่ได้ ระบบจะแสดงผลNotSupportedError
'preferred'
: RP ต้องการสร้างข้อมูลเข้าสู่ระบบที่ค้นพบได้ แต่ยอมรับข้อมูลเข้าสู่ระบบที่ค้นพบไม่ได้'discouraged'
: RP ต้องการสร้างข้อมูลเข้าสู่ระบบที่ค้นพบไม่ได้ แต่ยอมรับข้อมูลเข้าสู่ระบบที่ค้นพบได้
requireResidentKey
:
- ระบบจะเก็บพร็อพเพอร์ตี้นี้ไว้เพื่อใช้งานร่วมกับ WebAuthn ระดับ 1 ซึ่งเป็นข้อกำหนดเวอร์ชันเก่า ตั้งค่านี้เป็น
true
หากresidentKey
เป็น'required'
มิเช่นนั้นให้ตั้งค่าเป็นfalse
allowCredentials
RP สามารถใช้ allowCredentials
ใน navigator.credentials.get()
เพื่อควบคุมประสบการณ์การตรวจสอบสิทธิ์ด้วยพาสคีย์ โดยปกติแล้ว การตรวจสอบสิทธิ์ด้วยพาสคีย์จะมี 3 ประเภทดังนี้
แสดงตัวเลือกบัญชีแบบโมดอล
เมื่อใช้ข้อมูลเข้าสู่ระบบที่ค้นพบได้ RP จะแสดงตัวเลือกบัญชีแบบโมดัลเพื่อให้ผู้ใช้เลือกบัญชีที่จะลงชื่อเข้าใช้ แล้วตามด้วยการยืนยันผู้ใช้ ซึ่งเหมาะสำหรับขั้นตอนการตรวจสอบสิทธิ์ด้วยพาสคีย์ที่เริ่มต้นด้วยการกดปุ่มสำหรับการตรวจสอบสิทธิ์ด้วยพาสคีย์โดยเฉพาะ
หากต้องการมอบประสบการณ์การใช้งานนี้ ให้ละเว้นหรือส่งอาร์เรย์ว่างไปยังพารามิเตอร์ allowCredentials
ใน navigator.credentials.get()
async function authenticate() {
// ...
const publicKeyCredentialRequestOptions = {
// Server generated challenge:
challenge: ****,
// The same RP ID as used during registration:
rpId: 'example.com',
// You can omit `allowCredentials` as well:
allowCredentials: []
};
const credential = await navigator.credentials.get({
publicKey: publicKeyCredentialRequestOptions,
signal: abortController.signal
});
// This does not run until the user selects a passkey.
const credential = {};
credential.id = cred.id;
credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
credential.type = cred.type;
// ...
}
แสดงการป้อนข้อความอัตโนมัติของแบบฟอร์มพาสคีย์
เครื่องมือเลือกบัญชีแบบโมดัลที่อธิบายไว้ข้างต้นจะทำงานได้ดีหากผู้ใช้ส่วนใหญ่ใช้พาสคีย์และมีพาสคีย์อยู่ในอุปกรณ์เครื่องนั้น สำหรับผู้ใช้ที่ไม่มีพาสคีย์ในเครื่อง กล่องโต้ตอบแบบโมดัลจะยังคงปรากฏขึ้นและจะเสนอให้ผู้ใช้แสดงพาสคีย์จากอุปกรณ์เครื่องอื่น ขณะเปลี่ยนผู้ใช้ไปใช้พาสคีย์ คุณอาจต้องการหลีกเลี่ยง UI ดังกล่าวสำหรับผู้ใช้ที่ไม่ได้ตั้งค่าพาสคีย์ไว้
แต่ระบบอาจรวมการเลือกพาสคีย์ไว้ในข้อความแจ้งการป้อนข้อความอัตโนมัติสำหรับช่องในแบบฟอร์มการลงชื่อเข้าใช้แบบดั้งเดิม ควบคู่ไปกับชื่อผู้ใช้และรหัสผ่านที่บันทึกไว้ วิธีนี้จะช่วยให้ผู้ใช้ที่มีพาสคีย์ "กรอก" แบบฟอร์มการลงชื่อเข้าใช้ได้โดยเลือกพาสคีย์ ผู้ใช้ที่มีคู่ชื่อผู้ใช้/รหัสผ่านที่บันทึกไว้จะเลือกคู่ดังกล่าวได้ และผู้ใช้ที่ไม่มีทั้งพาสคีย์และคู่ชื่อผู้ใช้/รหัสผ่านจะยังคงพิมพ์ชื่อผู้ใช้และรหัสผ่านได้
ประสบการณ์ของผู้ใช้นี้เหมาะสําหรับกรณีที่ RP อยู่ระหว่างการย้ายข้อมูลโดยใช้รหัสผ่านและพาสคีย์ร่วมกัน
หากต้องการให้ผู้ใช้ได้รับประสบการณ์การใช้งานนี้ นอกเหนือจากการส่งอาร์เรย์ว่างไปยังพร็อพเพอร์ตี้ allowCredentials
หรือการละเว้นพารามิเตอร์แล้ว ให้ระบุ mediation: 'conditional'
ใน navigator.credentials.get()
และกำกับเนื้อหาในช่องป้อนข้อมูล username
ของ HTML ด้วย autocomplete="username webauthn"
หรือกำกับเนื้อหาในช่องป้อนข้อมูล password
ด้วย autocomplete="password webauthn"
การเรียก navigator.credentials.get()
จะไม่ทําให้ UI แสดงขึ้น แต่หากผู้ใช้โฟกัสที่ช่องป้อนข้อมูลที่มีคำอธิบายประกอบ พาสคีย์ที่ใช้ได้จะรวมอยู่ในตัวเลือกการป้อนข้อความอัตโนมัติ หากเลือกตัวเลือกใดตัวเลือกหนึ่ง ผู้ใช้จะต้องทำการยืนยันการปลดล็อกอุปกรณ์ตามปกติ จากนั้น .get()
จะนำคำมั่นสัญญาที่ส่งคืนมาแก้ไขให้เสร็จสมบูรณ์ หากผู้ใช้ไม่เลือกพาสคีย์ คำมั่นสัญญาจะไม่ได้รับการแก้ไข
async function authenticate() {
// ...
const publicKeyCredentialRequestOptions = {
// Server generated challenge:
challenge: ****,
// The same RP ID as used during registration:
rpId: 'example.com',
// You can omit `allowCredentials` as well:
allowCredentials: []
};
const cred = await navigator.credentials.get({
publicKey: publicKeyCredentialRequestOptions,
signal: abortController.signal,
// Specify 'conditional' to activate conditional UI
mediation: 'conditional'
});
// This does not run until the user selects a passkey.
const credential = {};
credential.id = cred.id;
credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
credential.type = cred.type;
// ...
}
<input type="text" name="username" autocomplete="username webauthn" ...>
ดูวิธีสร้างประสบการณ์ของผู้ใช้นี้ได้ที่ลงชื่อเข้าใช้ด้วยพาสคีย์ผ่านการป้อนข้อความอัตโนมัติของแบบฟอร์ม รวมถึงดูใน Codelab ใช้พาสคีย์กับการป้อนข้อความอัตโนมัติของแบบฟอร์มในเว็บแอป
การตรวจสอบสิทธิ์ซ้ำ
ในบางกรณี เช่น เมื่อใช้พาสคีย์เพื่อตรวจสอบสิทธิ์อีกครั้ง ระบบจะทราบตัวระบุของผู้ใช้อยู่แล้ว ในกรณีนี้ เราต้องการใช้พาสคีย์โดยที่ไม่ต้องให้เบราว์เซอร์หรือระบบปฏิบัติการแสดงตัวเลือกบัญชี ซึ่งทำได้โดยการส่งรายการรหัสข้อมูลเข้าสู่ระบบในพารามิเตอร์ allowCredentials
ในกรณีนี้ หากมีข้อมูลเข้าสู่ระบบที่มีชื่ออยู่ในเครื่อง ระบบจะแจ้งให้ผู้ใช้ปลดล็อกอุปกรณ์ทันที หากไม่ ระบบจะแจ้งให้ผู้ใช้แสดงอุปกรณ์อื่น (โทรศัพท์หรือคีย์ความปลอดภัย) ที่มีข้อมูลเข้าสู่ระบบที่ถูกต้อง
หากต้องการให้ผู้ใช้ได้รับประสบการณ์การใช้งานนี้ ให้ระบุรายการรหัสข้อมูลเข้าสู่ระบบสำหรับผู้ใช้ที่ลงชื่อเข้าใช้ RP ควรค้นหาผู้ใช้ได้เนื่องจากระบบรู้จักผู้ใช้อยู่แล้ว ระบุรหัสข้อมูลเข้าสู่ระบบเป็นออบเจ็กต์ PublicKeyCredentialDescriptor
ในพร็อพเพอร์ตี้ allowCredentials
ใน navigator.credentials.get()
async function authenticate() {
// ...
const publicKeyCredentialRequestOptions = {
// Server generated challenge:
challenge: ****,
// The same RP ID as used during registration:
rpId: 'example.com',
// Provide a list of PublicKeyCredentialDescriptors:
allowCredentials: [{
id: ****,
type: 'public-key',
transports: [
'internal',
'hybrid'
]
}, {
id: ****,
type: 'public-key',
transports: [
'internal',
'hybrid'
]
}, ...]
};
const credential = await navigator.credentials.get({
publicKey: publicKeyCredentialRequestOptions,
signal: abortController.signal
});
// This does not run until the user selects a passkey.
const credential = {};
credential.id = cred.id;
credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
credential.type = cred.type;
// ...
}
ออบเจ็กต์ PublicKeyCredentialDescriptor
ประกอบด้วย
id
: รหัสของข้อมูลเข้าสู่ระบบคีย์สาธารณะที่ RP ได้รับในการลงทะเบียนพาสคีย์type
: ปกติแล้วช่องนี้จะมีค่าเป็น'public-key'
transports
: คำแนะนำเกี่ยวกับวิธีการขนส่งที่อุปกรณ์ที่มีข้อมูลเข้าสู่ระบบนี้รองรับ ซึ่งเบราว์เซอร์ใช้เพื่อเพิ่มประสิทธิภาพ UI ที่ขอให้ผู้ใช้แสดงอุปกรณ์ภายนอก รายการนี้ (หากมี) ควรมีผลการเรียกgetTransports()
ระหว่างการลงทะเบียนข้อมูลเข้าสู่ระบบแต่ละรายการ
สรุป
ข้อมูลเข้าสู่ระบบที่ค้นพบได้ทำให้ประสบการณ์การลงชื่อเข้าใช้ด้วยพาสคีย์ใช้งานง่ายขึ้นมาก เนื่องจากผู้ใช้จะข้ามการป้อนชื่อผู้ใช้ได้ การใช้ residentKey
, requireResidentKey
และ allowCredentials
ร่วมกันช่วยให้ RP มีประสบการณ์การลงชื่อเข้าใช้ที่มีลักษณะดังนี้
- แสดงตัวเลือกบัญชีแบบโมดอล
- แสดงการป้อนข้อความอัตโนมัติของแบบฟอร์มพาสคีย์
- การตรวจสอบสิทธิ์ซ้ำ
ใช้ข้อมูลเข้าสู่ระบบที่ค้นพบได้อย่างชาญฉลาด ซึ่งจะช่วยให้คุณออกแบบประสบการณ์การลงชื่อเข้าใช้ด้วยพาสคีย์ที่ซับซ้อนซึ่งผู้ใช้จะพบว่าราบรื่นและมีโอกาสมีส่วนร่วมมากขึ้น