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 ที่แสดงบัญชีผู้ใช้หลายบัญชี](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-showing-mu-e3714b87b4d94.png?authuser=6&hl=th)
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ บางครั้งฝ่ายที่ต้องพึ่งพา (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](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/sign-with-google-button-d34d0cc6c6301.png?authuser=6&hl=th)
![ปุ่มลงชื่อเข้าใช้ด้วย Google ที่ปรับเปลี่ยนในแบบของคุณ](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/personalized-sign-with-g-45331497ab21b.png?authuser=6&hl=th)
ปัญหาคือ เนื่องจากปุ่มที่ปรับเปลี่ยนในแบบของคุณขึ้นอยู่กับคุกกี้ของบุคคลที่สามในโดเมน 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 แสดงผลกับ](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-fe1a06336087f.png?authuser=6&hl=th)
![กล่องโต้ตอบ FedCM แสดงผลกับ](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-06a2fc27f97ad.png?authuser=6&hl=th)
![กล่องโต้ตอบ FedCM แสดงผลกับ](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-c-5d3bb7d44dd6a.png?authuser=6&hl=th)
![กล่องโต้ตอบ FedCM แสดงผลกับ](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-u-efb6bbffb812.png?authuser=6&hl=th)
การใช้งานเป็นเรื่องง่าย ระบุพร็อพเพอร์ตี้ 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](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-suggesting-b9179c79f722d.png?authuser=6&hl=th)
เมื่อคลิกปุ่ม Continue เบราว์เซอร์จะเปิดหน้าต่างป๊อปอัปที่นำผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของ IdP
![หน้าต่างป๊อปอัปที่แสดงหลังจากคลิกปุ่มลงชื่อเข้าใช้ IdP](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-popup-window-shown-cli-0520929770807.png?authuser=6&hl=th)
สามารถระบุ 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();
}
คุณลองใช้ลักษณะการทำงานของ API สถานะการลงชื่อเข้าใช้ IdP ได้ในการสาธิต เซสชันจะหมดอายุใน 3 นาที หลังจากที่คุณลงชื่อเข้าใช้ IdP ของเดโม จากนั้นสังเกตการลงชื่อเข้าใช้ IdP ผ่านลักษณะการทำงานของหน้าต่างป๊อปอัป
เข้าร่วมช่วงทดลองใช้จากต้นทาง
คุณลองใช้ IdP Sign-In Status API ในเครื่องได้โดยเปิดการแจ้ง
Chrome
chrome://flags#fedcm-idp-signin-status-api
ใน
Chrome 116 ขึ้นไป
นอกจากนี้ คุณยังเปิดใช้ API สถานะการลงชื่อเข้าใช้ IdP ได้ด้วยการลงทะเบียนช่วงทดลองใช้จากต้นทาง 2 ครั้งดังนี้
- ลงทะเบียนช่วงทดลองใช้จากต้นทางสำหรับ IdP
- ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สามสำหรับ RP
ช่วงทดลองใช้จากต้นทางช่วยให้คุณได้ลองใช้ฟีเจอร์ใหม่ๆ และแสดงความคิดเห็นเกี่ยวกับความสามารถในการใช้งาน การใช้งานจริง และประสิทธิภาพต่อชุมชนมาตรฐานเว็บ ดูข้อมูลเพิ่มเติมได้ที่คู่มือช่วงทดลองใช้จากต้นทางสำหรับนักพัฒนาเว็บ
ช่วงทดลองใช้ IdP Sign-In API จากต้นทางพร้อมให้ใช้งานจาก Chrome 116 ถึง Chrome 119
ลงทะเบียนช่วงทดลองใช้จากต้นทางสำหรับ IdP
- ไปที่หน้าการลงทะเบียนทดลองใช้ต้นทาง
- คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
- ป้อนต้นทางของ IdP เป็น Web Origin
- คลิกส่ง
- เพิ่มแท็ก
origin-trial
<meta>
ในส่วนหัวของหน้าเว็บที่ใช้IdentityProvider.close()
อาจมีลักษณะดังนี้
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สามสำหรับ RP
- ไปที่หน้าการลงทะเบียนทดลองใช้ต้นทาง
- คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
- ป้อนต้นทางของ IdP เป็น Web Origin
- เลือกการจับคู่ของบุคคลที่สามเพื่อแทรกโทเค็นด้วย JavaScript ในต้นทางอื่นๆ
- คลิกส่ง
- ฝังโทเค็นที่ออกไว้ในเว็บไซต์ของบุคคลที่สาม
หากต้องการฝังโทเค็นในเว็บไซต์ของบุคคลที่สาม ให้เพิ่มโค้ดต่อไปนี้ลงในไลบรารี 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