โหมด UI ทันทีสำหรับการเข้าสู่ระบบ

Eiji Kitamura

José Luis Zapata

เผยแพร่: 12 พฤษภาคม 2026

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

บทคัดย่อ

โหมด UI ทันทีจะให้โหมดที่ล้มเหลวทันทีหากไม่มีข้อมูลเข้าสู่ระบบ ในเครื่อง ลักษณะการทำงานนี้จะเหมือนกับ preferImmediatelyAvailableCredentials API ที่พบในแพลตฟอร์มอุปกรณ์เคลื่อนที่ เช่น Android และ iOS เมื่อมีข้อมูลเข้าสู่ระบบ เบราว์เซอร์จะแสดงกล่องโต้ตอบการเข้าสู่ระบบทันทีต่อผู้ใช้ ไม่เช่นนั้น ระบบจะปฏิเสธ สัญญาอย่างเงียบๆ เพื่อให้คุณมีวิธีการลงชื่อเข้าใช้ทางเลือก เช่น แบบฟอร์มลงชื่อเข้าใช้ โดยไม่รบกวนประสบการณ์ของผู้ใช้

ตั้งแต่เดือนพฤษภาคม 2026 เป็นต้นไป Chrome จะเป็นเบราว์เซอร์เดียวที่รองรับโหมด UI ทันที

ตรวจสอบข้อกำหนดเบื้องต้น

หากต้องการใช้โหมด UI ทันที ผู้ใช้ต้องมีข้อมูลเข้าสู่ระบบที่มีสิทธิ์ ในอุปกรณ์ของตนอยู่แล้ว ใน Chrome ข้อมูลเข้าสู่ระบบเหล่านี้ประกอบด้วย

• พาสคีย์ที่บันทึกไว้ในผู้ให้บริการพาสคีย์ เช่น เครื่องมือจัดการรหัสผ่านบน Google Windows Hello หรือพวงกุญแจ iCloud
• รหัสผ่านที่บันทึกไว้ในเครื่องมือจัดการรหัสผ่านบน Google

หากไม่มีข้อมูลเข้าสู่ระบบในเครื่อง API จะปฏิเสธคำขอโดยไม่แสดง กล่องโต้ตอบการเข้าสู่ระบบทันที

ตรวจหาการรองรับฟีเจอร์

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

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

หากต้องการรองรับเบราว์เซอร์ในวงกว้างขึ้น ให้ใช้ Polyfill ที่มีอยู่ในที่เก็บ WebAuthn Polyfills ใน GitHub

ขอข้อมูลเข้าสู่ระบบ

หากต้องการทริกเกอร์ขั้นตอนการเข้าสู่ระบบทันที ให้เรียกใช้ navigator.credentials.get() โดยตั้งค่าฟิลด์ uiMode เป็น 'immediate'

การใส่ password: true ในคำขอจะช่วยให้ผู้ใช้ได้รับประโยชน์จากประสบการณ์นี้ หากเบราว์เซอร์รองรับข้อมูลเข้าสู่ระบบของรหัสผ่าน

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

คุณต้องจัดการ NotAllowedError ในบล็อก catch เพื่อมอบประสบการณ์การลงชื่อเข้าใช้สำรอง

จัดการขั้นตอนการลงชื่อเข้าใช้

คุณสามารถใช้โหมด UI ทันทีสำหรับ 2 สถานการณ์หลัก

ลงชื่อเข้าใช้ด้วยปุ่ม

ระบุปุ่มลงชื่อเข้าใช้เฉพาะที่มอบประสบการณ์การใช้งานที่สะอาดโดยไม่มีข้อความแจ้งที่ไม่คาดคิด

1. ผู้ใช้คลิกปุ่มลงชื่อเข้าใช้
2. เว็บไซต์ของคุณเรียกใช้ navigator.credentials.get() ด้วย uiMode: "immediate"
3. เบราว์เซอร์จะตรวจสอบข้อมูลเข้าสู่ระบบในเครื่อง
4. หากเบราว์เซอร์พบข้อมูลเข้าสู่ระบบ ก็จะแสดงกล่องโต้ตอบการเข้าสู่ระบบทันทีเพื่อให้ผู้ใช้เลือกบัญชี
5. หากเบราว์เซอร์ไม่พบข้อมูลเข้าสู่ระบบหรือผู้ใช้ปิดกล่องโต้ตอบการเข้าสู่ระบบทันที เบราว์เซอร์จะแสดง NotAllowedError
6. หากเกิด NotAllowedError ขึ้น เว็บไซต์จะไปยังหน้าลงชื่อเข้าใช้มาตรฐาน

ลงชื่อเข้าใช้ก่อนชำระเงิน

เสนอข้อมูลเข้าสู่ระบบอย่างรวดเร็วก่อนที่ผู้ใช้จะดำเนินการที่ ได้รับประโยชน์จากการตรวจสอบสิทธิ์ เช่น การเริ่มขั้นตอนการชำระเงินที่หน้าร้านออนไลน์

ในอีคอมเมิร์ซ ผู้ใช้ที่เป็นผู้มาเยือนมักจะเลือกระหว่างการลงชื่อเข้าใช้บัญชีที่มีอยู่ หรือชำระเงินในฐานะผู้มาเยือน การแสดงกล่องโต้ตอบการเข้าสู่ระบบทันทีจะช่วย เพิ่มประสิทธิภาพกระบวนการชำระเงินสำหรับลูกค้าที่กลับมา

1. ผู้ใช้เริ่มการดำเนินการ เช่น คลิกปุ่มชำระเงินระหว่าง ขั้นตอนการช็อปปิ้ง
2. เว็บไซต์ของคุณเรียกใช้ navigator.credentials.get() ด้วย uiMode: "immediate"
3. หากมีข้อมูลเข้าสู่ระบบ ผู้ใช้จะเลือกข้อมูลเข้าสู่ระบบรายการใดรายการหนึ่งเพื่อลงชื่อเข้าใช้ให้เสร็จสมบูรณ์
4. หากไม่มีข้อมูลเข้าสู่ระบบ เบราว์เซอร์จะแสดงข้อผิดพลาดและไม่แสดงกล่องโต้ตอบการเข้าสู่ระบบทันที ประสบการณ์ของผู้ใช้จะยังคงเหมือนเดิม และคุณสามารถ นำผู้ใช้ไปยังหน้าจอการชำระเงินที่มีอยู่ ซึ่งอาจมีตัวเลือกการ ลงชื่อเข้าใช้อื่นๆ หรือแบบฟอร์มการชำระเงินโดยไม่ลงชื่อเข้าใช้

ตรวจสอบมาตรการด้านความเป็นส่วนตัวและความปลอดภัย

เบราว์เซอร์ใช้มาตรการสำคัญเพื่อปกป้องความเป็นส่วนตัวของผู้ใช้ ดังนี้

• ข้อกำหนดด้านท่าทางสัมผัสของผู้ใช้: คุณต้องเริ่มการเรียก API ด้วยท่าทางสัมผัสของผู้ใช้ เช่น การคลิก เพื่อป้องกันการตรวจสอบโดยไม่แจ้งให้ทราบ การโทรจะไม่ ใช้การเปิดใช้งาน
• ข้อจำกัดของโหมดไม่ระบุตัวตน: คำขอในเซสชันที่ไม่ระบุตัวตนหรือเซสชันส่วนตัวจะ แสดง NotAllowedError เสมอ
• ไม่มีรายการที่อนุญาต: คำขอที่มีรายการ allowCredentials ที่ไม่ว่างจะทำให้เกิดข้อผิดพลาด NotAllowedError เพื่อป้องกันการติดตามข้ามเซสชัน
• ไม่มีการยกเลิกแบบเป็นโปรแกรม: คุณไม่สามารถใช้พารามิเตอร์ signal เพื่อ ปิดกล่องโต้ตอบการเข้าสู่ระบบทันทีแบบเป็นโปรแกรม