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

bookmark_border จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

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

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

Login Hint API

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

หลังจากผู้ใช้ลงชื่อเข้าใช้แล้ว บางครั้งฝ่ายที่เชื่อถือ (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"
    }]
  }
});

User Info API

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

ปัญหาคือ เนื่องจากปุ่มที่ปรับเปลี่ยนในแบบของคุณนั้นใช้คุกกี้ของบุคคลที่สามในโดเมน 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

RP Context API

RP Context API ซึ่งพร้อมใช้งานใน Chrome 116 จะช่วยให้ RP แก้ไขสตริงใน UI กล่องโต้ตอบ 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",
    }],
  }
});

ช่วงทดลองใช้ IdP Sign-In Status API จากต้นทาง

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

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

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

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

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

IdP-SignIn-Status: action=signin

หรือเรียกใช้ JavaScript API IdentityProvider.login() จากต้นทางของผู้ให้บริการระบุตัวตน ดังนี้

IdentityProvider.login()

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

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

IdP-SignIn-Status: action=signout-all

หรือเรียกใช้ JavaScript API IdentityProvider.logout() จากต้นทางของผู้ให้บริการระบุตัวตน ดังนี้

IdentityProvider.logout()

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

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

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

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

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

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

เมื่อคลิกปุ่มต่อไป เบราว์เซอร์จะเปิดหน้าต่างป๊อปอัปเพื่อส่งผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของ 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();
}

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

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

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

นอกจากนี้ คุณยังเปิดใช้ IdP Sign-In Status API ได้โดยลงทะเบียนช่วงทดลองใช้ต้นทาง 2 ครั้ง ดังนี้

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

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

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

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

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

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

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

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

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