ขอแนะนำคำแนะนำ คำขอต้นทางที่เกี่ยวข้อง และการเรียงลำดับ JSON สำหรับ WebAuthn ใน Chrome

Chrome เวอร์ชัน 128 และ 129 เปิดตัวฟีเจอร์ใหม่ที่น่าตื่นเต้นสำหรับ WebAuthn ซึ่งเป็น API พื้นฐานในการสร้างระบบการตรวจสอบสิทธิ์ที่ใช้พาสคีย์

  • คำแนะนำ: คำแนะนำช่วยให้ฝ่ายที่เชื่อถือ (RP) ควบคุม WebAuthn UI ในเบราว์เซอร์ได้ดียิ่งขึ้น ซึ่งเป็นประโยชน์อย่างยิ่งสำหรับผู้ใช้ Enterprise ที่ต้องการใช้คีย์ความปลอดภัย
  • คำขอแหล่งที่มาที่เกี่ยวข้อง: เมื่อใช้คำขอแหล่งที่มาที่เกี่ยวข้อง RP จะทำให้พาสคีย์ใช้งานได้ในหลายโดเมน หากเป็นเจ้าของเว็บไซต์หลายแห่ง ตอนนี้คุณสามารถอนุญาตให้ผู้ใช้ใช้พาสคีย์ซ้ำในเว็บไซต์ต่างๆ ของคุณได้ ซึ่งจะช่วยลดความยุ่งยากในการเข้าสู่ระบบ
  • การจัดรูปแบบ JSON: API การจัดรูปแบบ JSON ช่วยให้คุณลดความซับซ้อนของโค้ดฝั่งเฟรมเวิร์กของ RP ได้โดยการเข้ารหัสและถอดรหัสตัวเลือกและข้อมูลเข้าสู่ระบบที่ส่งไปยังและจาก WebAuthn API

คำแนะนำ

เมื่อใช้ hints ตอนนี้ฝ่ายที่เชื่อถือ (RP) จะระบุค่ากำหนด UI สำหรับการสร้างพาสคีย์หรือตรวจสอบสิทธิ์ด้วยพาสคีย์ได้แล้ว

ก่อนหน้านี้ เมื่อ RP ต้องการจำกัดตัวตรวจสอบสิทธิ์ที่ผู้ใช้สามารถใช้เพื่อสร้างพาสคีย์หรือใช้ตรวจสอบสิทธิ์ได้ สามารถใช้ authenticatorSelection.authenticatorAttachment เพื่อระบุ "platform" หรือ "cross-platform" โดยจะจำกัด Authenticator ไว้เป็นAuthenticator ของแพลตฟอร์มหรือAuthenticator ของการโรมมิงตามลำดับ hints ช่วยให้ข้อกำหนดนี้มีความยืดหยุ่นมากขึ้น

RP สามารถใช้ hints (ไม่บังคับ) ใน PublicKeyCredentialCreationOptions หรือ PublicKeyCredentialRequestOptions เพื่อระบุ "security-key", "client-device" และ "hybrid" ตามลําดับความชอบในอาร์เรย์

ต่อไปนี้เป็นตัวอย่างคำขอสร้างข้อมูลเข้าสู่ระบบที่แนะนำ"cross-platform"โปรแกรมตรวจสอบสิทธิ์ที่มี "security-key" เป็นคำแนะนำ ซึ่งจะบอกให้ Chrome แสดง UI ที่เน้นคีย์ความปลอดภัยสำหรับผู้ใช้องค์กร

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
การระบุ "security-key" เป็นคำแนะนำจะทำให้เบราว์เซอร์แสดงกล่องโต้ตอบที่โฟกัสที่คีย์ความปลอดภัย
การระบุ "security-key" เป็นคำแนะนำจะทำให้เบราว์เซอร์แสดงกล่องโต้ตอบที่โฟกัสที่คีย์ความปลอดภัย

เมื่อ RP ต้องการจัดลําดับความสําคัญของสถานการณ์การยืนยันข้ามอุปกรณ์ ให้ส่งคําขอการตรวจสอบสิทธิ์ที่กําหนดให้ใช้เครื่องตรวจสอบสิทธิ์ "cross-platform" โดยระบุ "hybrid" เป็นคำแนะนำ

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
การระบุ "ไฮบริด" เป็นคำแนะนำจะทำให้เบราว์เซอร์แสดงกล่องโต้ตอบที่โฟกัสการเข้าสู่ระบบข้ามอุปกรณ์
การระบุ "ไฮบริด" เป็นคำแนะนำจะทำให้เบราว์เซอร์แสดงกล่องโต้ตอบที่มุ่งเน้นการเข้าสู่ระบบข้ามอุปกรณ์

คำขอแหล่งที่มาที่เกี่ยวข้องช่วยให้ RP กำหนดให้พาสคีย์ใช้งานได้จากหลายโดเมน การสร้างประสบการณ์การเข้าสู่ระบบแบบรวมศูนย์และการใช้โปรโตคอลการรวมข้อมูลยังคงเป็นโซลูชันที่แนะนำสําหรับเว็บไซต์ส่วนใหญ่ แต่หากคุณเป็นเจ้าของโดเมนหลายรายการและไม่สามารถรวมโดเมนได้ ต้นทางที่เกี่ยวข้องอาจเป็นวิธีแก้ปัญหา

คำขอ WebAuthn ทั้งหมดต้องระบุรหัสฝ่ายที่ใช้ข้อมูล (รหัส RP) และพาสคีย์ทั้งหมดจะเชื่อมโยงกับรหัส RP รหัสเดียว เดิมทีต้นทางจะระบุได้แค่ RP ID ตามโดเมนของตน ดังนั้นในกรณีนี้ www.example.co.uk จะระบุ RP ID ของ example.co.uk ได้ แต่ไม่ระบุ example.com ได้ เมื่อใช้คำขอแหล่งที่มาที่เกี่ยวข้อง คุณจะตรวจสอบรหัส RP ที่อ้างสิทธิ์ได้โดยดึงข้อมูลไฟล์ JSON ที่รู้จักกันดีซึ่งอยู่ที่ /.well-known/webauthn จากโดเมนเป้าหมาย ดังนั้น example.co.uk (และ example.in, example.de และอื่นๆ) ทั้งหมดจะใช้รหัส RP ของ example.com ได้หาก example.com ระบุรหัสดังกล่าวในรูปแบบต่อไปนี้

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

ดูวิธีตั้งค่าคำขอต้นทางที่เกี่ยวข้องที่หัวข้ออนุญาตให้ใช้พาสคีย์ซ้ำในเว็บไซต์ต่างๆ ด้วยคำขอต้นทางที่เกี่ยวข้อง

การจัดรูปแบบ JSON

ออบเจ็กต์คำขอและการตอบกลับ WebAuthn มีช่องหลายช่องที่มีข้อมูลไบนารีดิบใน ArrayBuffer เช่น รหัสข้อมูลเข้าสู่ระบบ รหัสผู้ใช้ หรือคำขอ หากเว็บไซต์ต้องการใช้ JSON เพื่อแลกเปลี่ยนข้อมูลนี้กับเซิร์ฟเวอร์ จะต้องเข้ารหัสข้อมูลไบนารีก่อน เช่น ด้วย Base64URL ซึ่งเพิ่มความซับซ้อนที่ไม่จำเป็นสำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเริ่มใช้พาสคีย์ในเว็บไซต์

ตอนนี้ WebAuthn มี API ในการแยกวิเคราะห์ออบเจ็กต์คำขอ WebAuthn จาก JSON โดยตรง และจัดรูปแบบการตอบกลับ PublicKeyCredential เป็น JSON โดยตรงPublicKeyCredentialCreationOptionsPublicKeyCredentialRequestOptions ระบบจะแปลงช่องที่มีค่า ArrayBuffer ทั้งหมดซึ่งมีข้อมูลไบนารีดิบจากหรือเป็นค่าที่เข้ารหัส Base64URL โดยอัตโนมัติ API เหล่านี้พร้อมใช้งานใน Chrome 129

ก่อนสร้างพาสคีย์ ให้ดึงออบเจ็กต์ PublicKeyCredentialCreationOptions ที่เข้ารหัส JSON จากเซิร์ฟเวอร์และถอดรหัสโดยใช้ PublicKeyCredential.parseCreationOptionsFromJSON()

การรองรับเบราว์เซอร์

  • Chrome: 129
  • Edge: 129
  • Firefox: 119.
  • Safari: ไม่รองรับ

แหล่งที่มา

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

หลังจากสร้างพาสคีย์แล้ว ให้เข้ารหัสข้อมูลเข้าสู่ระบบที่ได้โดยใช้ toJSON() เพื่อให้ส่งไปยังเซิร์ฟเวอร์ได้

การรองรับเบราว์เซอร์

  • Chrome: 129
  • Edge: 129
  • Firefox: 119.
  • Safari: ไม่รองรับ

แหล่งที่มา

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

ก่อนตรวจสอบสิทธิ์ด้วยพาสคีย์ ให้ดึงข้อมูล PublicKeyRequestCreationOptions ที่เข้ารหัส JSON จากเซิร์ฟเวอร์และถอดรหัสโดยใช้ PublicKeyCredential.parseRequestOptionsFromJSON()

การรองรับเบราว์เซอร์

  • Chrome: 129
  • Edge: 129
  • Firefox: 119.
  • Safari: ไม่รองรับ

แหล่งที่มา

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

หลังจากตรวจสอบสิทธิ์ด้วยพาสคีย์แล้ว ให้เข้ารหัสข้อมูลเข้าสู่ระบบที่ได้โดยใช้วิธี toJSON() เพื่อให้ส่งไปยังเซิร์ฟเวอร์ได้

การรองรับเบราว์เซอร์

  • Chrome: 129
  • Edge: 129
  • Firefox: 119.
  • Safari: ไม่รองรับ

แหล่งที่มา

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebAuthn และพาสคีย์ได้ที่แหล่งข้อมูลต่อไปนี้