ข้อมูลอัปเดตจาก FedCM: Domain Hint API

จาก Chrome 123 คุณจะใช้ Domain Hints ร่วมกับ Federated Credential Management API (FedCM) ได้ ด้วย Domain Hint API นักพัฒนาซอฟต์แวร์จะสามารถมอบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นโดยแสดงเฉพาะบัญชีการเข้าสู่ระบบแบบรวมศูนย์จากโดเมนที่ยอมรับเท่านั้น

API คำแนะนำโดเมน

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

การใช้ Domain Hint API จะทำให้ RP ระบุพร็อพเพอร์ตี้ domainHint ในการเรียก FedCM API เพื่อแสดงเฉพาะบัญชีที่ตรงกันสำหรับผู้ใช้ได้ IdP สามารถระบุพร็อพเพอร์ตี้ domain_hints เป็นส่วนหนึ่งของการตอบกลับจากปลายทางรายการบัญชีเพื่อระบุว่าบัญชีเชื่อมโยงกับโดเมนใด วิธีนี้จะทำให้เบราว์เซอร์แสดงบัญชีที่ตรงกันได้โดยไม่เปิดเผยคำแนะนำโดเมนที่ขอต่อ IdP

ตัวอย่างการตอบกลับ JSON จากปลายทางของรายการบัญชีจะมีลักษณะดังต่อไปนี้

{
 "accounts": [{
   "id": "1234",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "approved_clients": ["123", "456", "789"],
  }, {
   "id": "5678",
   "given_name": "Johnny",
   "name": "Johnny",
   "email": "johnny@idp.example",
   "picture": "https://idp.example/profile/456"
   "approved_clients": ["abc", "def", "ghi"],
   "domain_hints": ["corp.example"]
  }]
}

RP สามารถเรียกใช้ navigator.credentials.get() ที่มีพร็อพเพอร์ตี้ domainHint เพื่อกรองบัญชี ตัวอย่างเช่น สมมติว่าผู้ใช้ไปที่ corp-partner.example และลงชื่อเข้าใช้ด้วยบัญชีจาก corp.example ไซต์จะเรียกใช้ API ดังต่อไปนี้

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "abc",
      nonce: nonce,
      domainHint : "corp.example"
    }]
  }
});

ระบบจะไม่ส่งค่า domainHint ไปยังปลายทางรายการบัญชีสำหรับการกรองฝั่งเซิร์ฟเวอร์ เนื่องจากอาจเป็นเวกเตอร์ฟิงเกอร์ปรินต์ไปยัง IdP แต่ Chrome จะส่งคำขอของ FedCM ตามปกติแทน และกรองบัญชีที่ไม่ตรงกับค่า domainHint ที่ระบุโดยการเรียก navigator.credentials.get() ออก จากนั้น Chrome จะแสดงกล่องโต้ตอบของ FedCM ที่มีรายชื่อบัญชีใหม่ วิธีการนี้คล้ายกับ API คำแนะนำการเข้าสู่ระบบ แต่ API ทั้งสองนี้จะตอบคำถามที่แตกต่างกัน API คำแนะนำการเข้าสู่ระบบมีจุดประสงค์เพื่อตอบคำถามว่า "ซึ่งเป็นตัวระบุผู้ใช้ที่ฉันต้องการคืออะไร" ขณะที่คำแนะนำโดเมนมีจุดประสงค์เพื่อตอบว่า "บัญชีนี้ต้องเป็นขององค์กรหรือเซิร์ฟเวอร์ใด"

เมื่อใช้ domainHint: "any" Chrome จะกรองบัญชีที่ไม่มีโดเมนออก (กล่าวคือ ระบบจะไม่ส่ง domain_hints หรือโดเมนว่างเปล่า) เช่น กรณีการใช้งานที่ RP อนุญาตให้ใช้เฉพาะบัญชีที่จัดการในขั้นตอนลงชื่อสมัครใช้

เมื่อไม่มีบัญชีที่ตรงกับ domainHint กล่องโต้ตอบ FedCM จะแสดงข้อความแจ้งให้เข้าสู่ระบบ ซึ่งช่วยให้ผู้ใช้เข้าสู่ระบบบัญชี IdP ที่ตรงกับคำแนะนำที่ RP ขอได้ เมื่อผู้ใช้แตะข้อความแจ้ง หน้าต่างป๊อปอัปจะเปิดขึ้นพร้อม URL การเข้าสู่ระบบที่ระบุไว้ใน config จากนั้นลิงก์จะต่อท้ายด้วยคำแนะนำในการเข้าสู่ระบบและพารามิเตอร์การค้นหาของคำแนะนำโดเมน

ตัวอย่างข้อความแจ้งให้เข้าสู่ระบบเมื่อไม่มีบัญชีที่ตรงกับ domainHint
ตัวอย่างข้อความแจ้งให้เข้าสู่ระบบเมื่อไม่มีบัญชีที่ตรงกับ domainHint