ข้อมูลอัปเดตจาก FedCM: API สถานะการลงชื่อเข้าใช้ IdP, คำแนะนำการเข้าสู่ระบบ และอื่นๆ

Chrome 116 จะให้บริการความสามารถของ FedCM เช่น Login Hint API, User Info API และ RP Context API รวมถึงเริ่มช่วงทดลองใช้จากต้นทางสำหรับ API สถานะการลงชื่อเข้าใช้ IdP

ใน Chrome 116 นั้น Chrome จะส่งฟีเจอร์การจัดการข้อมูลเข้าสู่ระบบแบบรวมศูนย์ (FedCM) 3 อย่างต่อไปนี้

  • API คำแนะนำการเข้าสู่ระบบ: ระบุบัญชีผู้ใช้ที่ต้องการลงชื่อเข้าใช้
  • User Info API: ดึงข้อมูลของผู้ใช้ที่กลับมาเพื่อให้ผู้ให้บริการข้อมูลประจำตัว (IdP) แสดงปุ่มลงชื่อเข้าใช้ที่ปรับเปลี่ยนในแบบของคุณภายใน iframe ได้
  • RP Context API: ใช้ชื่อที่แตกต่างจาก "ลงชื่อเข้าใช้" ในกล่องโต้ตอบ FedCM

นอกจากนี้ Chrome กําลังเริ่มช่วงทดลองใช้จากต้นทางสําหรับ API สถานะการลงชื่อเข้าใช้ IdP API สถานะการลงชื่อเข้าใช้ IdP เป็นข้อกำหนดและจะเป็นการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบเมื่อมีการจัดส่ง หากคุณมีการใช้งาน FedCM อยู่แล้ว อย่าลืมเข้าร่วมช่วงทดลองใช้จากต้นทาง

API คำแนะนำการเข้าสู่ระบบ

เมื่อมีการเรียกใช้ FedCM เบราว์เซอร์จะแสดงบัญชีที่ลงชื่อเข้าใช้จากผู้ให้บริการข้อมูลประจำตัว (IdP) ที่ระบุ เมื่อ IdP รองรับหลายบัญชี ก็จะแสดงบัญชีที่ลงชื่อเข้าใช้ทั้งหมด

กล่องโต้ตอบ FedCM ที่แสดงบัญชีผู้ใช้หลายบัญชี
กล่องโต้ตอบ FedCM ที่แสดงบัญชีผู้ใช้หลายบัญชี

หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ บางครั้งฝ่ายที่ต้องพึ่งพา (RP) จะขอให้ผู้ใช้ตรวจสอบสิทธิ์อีกครั้ง แต่ผู้ใช้อาจไม่แน่ใจว่ากำลังใช้บัญชีใดอยู่ หาก RP สามารถระบุบัญชีที่จะลงชื่อเข้าใช้ จะเป็นการง่ายสำหรับผู้ใช้ ในการเลือกบัญชี คำแนะนำในการเข้าสู่ระบบคือการจัดส่งใน Chrome 116 ทำให้ RP จำกัดรายชื่อให้แคบลงได้

ส่วนขยายนี้จะเพิ่มอาร์เรย์ของ login_hints ในการตอบกลับปลายทางรายการบัญชีจาก IdP พร้อมประเภทตัวกรองที่เป็นไปได้ทั้งหมดที่ IdP รองรับ เช่น การตอบกลับบัญชีอาจมีลักษณะดังนี้เมื่อ IdP รองรับการกรองตามอีเมลและรหัส ดังนี้

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

เมื่อส่งผ่าน login_hints ในรายการบัญชี RP จะสามารถเรียกใช้ navigator.credentials.get() ด้วยพร็อพเพอร์ตี้ loginHint ตามที่แสดงในตัวอย่างโค้ดต่อไปนี้เพื่อเลือกแสดงบัญชีที่ระบุ

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

API ข้อมูลผู้ใช้

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

ปุ่มลงชื่อเข้าใช้ด้วย Google
ปุ่มลงชื่อเข้าใช้ด้วย Google
ปุ่มลงชื่อเข้าใช้ด้วย Google ที่ปรับเปลี่ยนในแบบของคุณ
ปุ่มลงชื่อเข้าใช้ด้วย Google ที่ปรับเปลี่ยนในแบบของคุณ

ปัญหาคือ เนื่องจากปุ่มที่ปรับเปลี่ยนในแบบของคุณขึ้นอยู่กับคุกกี้ของบุคคลที่สามในโดเมน IdP ภายใน iframe เพื่อระบุผู้ใช้ที่ลงชื่อเข้าใช้เพื่อให้แสดงปุ่ม ปุ่มจึงจะไม่แสดงเมื่อเลิกใช้งานคุกกี้ของบุคคลที่สามแล้ว

User Info API ที่จัดส่งใน Chrome 116 เป็นวิธีให้ IdP รับข้อมูลผู้ใช้ที่กลับมาจากเซิร์ฟเวอร์โดยไม่ต้องอาศัยคุกกี้ของบุคคลที่สาม

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

  • ผู้ใช้เคยลงชื่อเข้าใช้ RP ด้วย IdP ผ่าน FedCM ในอินสแตนซ์ของเบราว์เซอร์เดียวกัน และยังไม่มีการล้างข้อมูล
  • ผู้ใช้ลงชื่อเข้าใช้ IdP ในอินสแตนซ์ของเบราว์เซอร์เดียวกัน
// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

โปรดทราบว่าหากต้องการอนุญาตให้เรียกใช้ IdentityProvider.getUserInfo() จากใน iframe ที่มีต้นทางเดียวกับ IdP HTML ที่ฝังต้องอนุญาตอย่างชัดแจ้งโดยใช้นโยบายสิทธิ์ของ identity-credentials-get

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

ดูการใช้งานจริงได้ที่ https://fedcm-rp-demo.glitch.me/button

API บริบทของ RP

RP Context API ที่จัดส่งใน Chrome 116 ช่วยให้ RP แก้ไขสตริงใน UI ของกล่องโต้ตอบ FedCM เพื่อรองรับบริบทการตรวจสอบสิทธิ์ที่กำหนดไว้ล่วงหน้าได้ โปรดดูภาพหน้าจอต่อไปนี้สำหรับตัวเลือกต่างๆ

กล่องโต้ตอบ FedCM แสดงผลกับ
กล่องโต้ตอบ FedCM แสดงผลด้วย "ลงชื่อเข้าใช้ ****" นี่เป็นตัวเลือกเริ่มต้นหากไม่ได้ระบุบริบท RP
กล่องโต้ตอบ FedCM แสดงผลกับ
กล่องโต้ตอบของ FedCM แสดงผลด้วย "ลงชื่อสมัครใช้ ****"
กล่องโต้ตอบ FedCM แสดงผลกับ
กล่องโต้ตอบ FedCM แสดงผลโดยมีข้อความ "ดำเนินการต่อที่ ****"
กล่องโต้ตอบ FedCM แสดงผลกับ
กล่องโต้ตอบ FedCM แสดงผลด้วย "ใช้ ****"

การใช้งานเป็นเรื่องง่าย ระบุพร็อพเพอร์ตี้ identity.context อย่างใดอย่างหนึ่งจาก "signin" (ค่าเริ่มต้น), "signup", "use" หรือ "continue"

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

ช่วงทดลองใช้ API สถานะการลงชื่อเข้าใช้ IdP

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

API สถานะการลงชื่อเข้าใช้ IdP เป็นกลไกที่ IdP จะแจ้งสถานะการลงชื่อเข้าใช้ของผู้ใช้บน IdP ให้เบราว์เซอร์ทราบ เมื่อใช้ API นี้ เบราว์เซอร์จะลดคำขอที่ส่งไปยัง IdP ที่ไม่จำเป็นและลดการโจมตีช่วงเวลาที่อาจเกิดขึ้น

แจ้งสถานะการลงชื่อเข้าใช้ของผู้ใช้ให้เบราว์เซอร์ทราบ

โดย IdP จะส่งสัญญาณแจ้งสถานะการลงชื่อเข้าใช้ของผู้ใช้ไปยังเบราว์เซอร์ได้โดยการส่งส่วนหัว HTTP หรือเรียกใช้ JavaScript API เมื่อผู้ใช้ลงชื่อเข้าใช้ใน IdP หรือเมื่อผู้ใช้ออกจากระบบบัญชี IdP ทั้งหมด โดยเบราว์เซอร์จะบันทึกสถานะอย่างใดอย่างหนึ่งต่อไปนี้ "ลงชื่อเข้าใช้" "ออกจากระบบ" หรือ "ไม่ทราบ" (ค่าเริ่มต้น)

หากต้องการส่งสัญญาณว่าผู้ใช้ลงชื่อเข้าใช้แล้ว ให้ส่งส่วนหัว HTTP ของ IdP-SignIn-Status: action=signin ในการนำทางระดับบนสุดหรือคำขอทรัพยากรย่อยที่มีต้นทางเดียวกัน

IdP-SignIn-Status: action=signin

หรือเรียกใช้ JavaScript API IdentityProvider.login() จากต้นทาง IdP โดยใช้คำสั่งต่อไปนี้

IdentityProvider.login()

ระบบจะบันทึกสถานะการลงชื่อเข้าใช้ของผู้ใช้เป็น "ลงชื่อเข้าใช้" เมื่อตั้งค่าสถานะการลงชื่อเข้าใช้ของผู้ใช้เป็น "ลงชื่อเข้าใช้" ทาง PR ติดต่อ FedCM จะส่งคำขอไปยังปลายทางรายการบัญชีของ IdP และแสดงบัญชีที่ใช้ได้แก่ผู้ใช้ในกล่องโต้ตอบของ FedCM

หากต้องการส่งสัญญาณว่าผู้ใช้ออกจากระบบทุกบัญชีแล้ว ให้ส่งส่วนหัว HTTP ของ IdP-SignIn-Status: action=signout-all ในการนำทางระดับบนสุดหรือคำขอทรัพยากรย่อยที่มีต้นทางเดียวกัน ดังนี้

IdP-SignIn-Status: action=signout-all

หรือเรียกใช้ JavaScript API IdentityProvider.logout() จากต้นทาง IdP โดยใช้คำสั่งต่อไปนี้

IdentityProvider.logout()

ระบบจะบันทึกสถานะการลงชื่อเข้าใช้ของผู้ใช้เป็น "ออกจากระบบ" เมื่อสถานะการลงชื่อเข้าใช้ของผู้ใช้เป็น "ออกจากระบบ" จะโทรหา FedCM โดยไม่มีการแจ้งเตือนโดยไม่ส่งคำขอไปยังปลายทางรายการบัญชีของ IdP

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

  • หากปลายทางแสดงรายการบัญชีที่ใช้งานอยู่ ให้อัปเดตสถานะเป็น "ลงชื่อเข้าใช้" แล้วเปิดกล่องโต้ตอบ FedCM เพื่อแสดงบัญชีเหล่านั้น
  • หากปลายทางไม่พบบัญชีใดๆ ให้อัปเดตสถานะเป็น "ออกจากระบบ" และไม่สามารถโทรผ่าน FedCM ได้

จะเกิดอะไรขึ้นหากเซสชันของผู้ใช้หมดอายุ อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ผ่านขั้นตอนการลงชื่อเข้าใช้แบบไดนามิก

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

กล่องโต้ตอบ FedCM จะแสดงข้อความตามที่แสดงในรูปภาพต่อไปนี้

กล่องโต้ตอบของ FedCM ที่แนะนำให้ลงชื่อเข้าใช้ IdP
กล่องโต้ตอบของ FedCM ที่แนะนำให้ลงชื่อเข้าใช้ IdP

เมื่อคลิกปุ่ม Continue เบราว์เซอร์จะเปิดหน้าต่างป๊อปอัปที่นำผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของ IdP

หน้าต่างป๊อปอัปที่แสดงหลังจากคลิกปุ่มลงชื่อเข้าใช้ IdP
หน้าต่างป๊อปอัปที่แสดงหลังจากคลิกปุ่มลงชื่อเข้าใช้ที่ปุ่ม IdP

สามารถระบุ URL ของหน้าลงชื่อเข้าใช้ (ซึ่งต้องเป็นต้นทางของ IdP) ด้วย signin_url เป็นส่วนหนึ่งของไฟล์การกำหนดค่า IdP

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

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

  • ส่งส่วนหัว IdP-SignIn-Status: action=signin หรือเรียกใช้ IdentityProvider.login() API เพื่อแจ้งให้เบราว์เซอร์ทราบว่าผู้ใช้ลงชื่อเข้าใช้แล้ว
  • เรียก IdentityProvider.close() เพื่อปิดตัวเอง (หน้าต่างป๊อปอัป)
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
ผู้ใช้ลงชื่อเข้าใช้ RP หลังจากลงชื่อเข้าใช้ IdP โดยใช้ FedCM

คุณลองใช้ลักษณะการทำงานของ API สถานะการลงชื่อเข้าใช้ IdP ได้ในการสาธิต เซสชันจะหมดอายุใน 3 นาที หลังจากที่คุณลงชื่อเข้าใช้ IdP ของเดโม จากนั้นสังเกตการลงชื่อเข้าใช้ IdP ผ่านลักษณะการทำงานของหน้าต่างป๊อปอัป

เข้าร่วมช่วงทดลองใช้จากต้นทาง

คุณลองใช้ IdP Sign-In Status API ในเครื่องได้โดยเปิดการแจ้ง
Chrome chrome://flags#fedcm-idp-signin-status-api ใน
Chrome 116 ขึ้นไป

นอกจากนี้ คุณยังเปิดใช้ API สถานะการลงชื่อเข้าใช้ IdP ได้ด้วยการลงทะเบียนช่วงทดลองใช้จากต้นทาง 2 ครั้งดังนี้

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

ช่วงทดลองใช้ IdP Sign-In API จากต้นทางพร้อมให้ใช้งานจาก Chrome 116 ถึง Chrome 119

ลงทะเบียนช่วงทดลองใช้จากต้นทางสำหรับ IdP

  1. ไปที่หน้าการลงทะเบียนทดลองใช้ต้นทาง
  2. คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
  3. ป้อนต้นทางของ IdP เป็น Web Origin
  4. คลิกส่ง
  5. เพิ่มแท็ก origin-trial <meta> ในส่วนหัวของหน้าเว็บที่ใช้ IdentityProvider.close() อาจมีลักษณะดังนี้
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">

ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สามสำหรับ RP

  1. ไปที่หน้าการลงทะเบียนทดลองใช้ต้นทาง
  2. คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
  3. ป้อนต้นทางของ IdP เป็น Web Origin
  4. เลือกการจับคู่ของบุคคลที่สามเพื่อแทรกโทเค็นด้วย JavaScript ในต้นทางอื่นๆ
  5. คลิกส่ง
  6. ฝังโทเค็นที่ออกไว้ในเว็บไซต์ของบุคคลที่สาม

หากต้องการฝังโทเค็นในเว็บไซต์ของบุคคลที่สาม ให้เพิ่มโค้ดต่อไปนี้ลงในไลบรารี JavaScript หรือ SDK ที่แสดงจากต้นทางของ IdP

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

โปรดแทนที่ TOKEN_GOES_HERE ด้วยโทเค็นของคุณเอง

มีส่วนร่วมและแชร์ความคิดเห็น

หากมีความคิดเห็นหรือพบปัญหาระหว่างการทดสอบ ก็แชร์ความคิดเห็นได้ที่ crbug.com

รูปภาพโดย Dan Cristian Pădureเอล ใน Unsplash