ตั้งแต่ Chrome 125 เป็นต้นไป API โหมดปุ่มจะเริ่มช่วงทดลองใช้จากต้นทางบนเดสก์ท็อป เมื่อใช้ Button Mode API ผู้ให้บริการข้อมูลประจำตัวจะใช้ FedCM API ได้ แม้ว่าผู้ใช้จะไม่มีเซสชัน IdP ที่ใช้งานอยู่ในการเรียก API จากนั้นผู้ใช้จะลงชื่อเข้าใช้เว็บไซต์ด้วยบัญชีแบบรวมศูนย์ได้โดยไม่ต้องไปที่เว็บไซต์ IdP UI ของ FedCM ในโหมดปุ่มจะโดดเด่นกว่าเมื่อเทียบกับ UI จากลักษณะการไหลของวิดเจ็ตที่มีอยู่เนื่องจากมีการปิดกั้นด้วยท่าทางสัมผัสของผู้ใช้และแสดงถึงความตั้งใจของผู้ใช้ในการลงชื่อเข้าใช้ได้ดีกว่า
API โหมดปุ่ม
อินเทอร์เฟซผู้ใช้ของ FedCM พร้อมให้ใช้งานเป็นวิดเจ็ตที่แสดงที่มุมขวาบนบนเดสก์ท็อป หรือเป็นชีตด้านล่างบนอุปกรณ์เคลื่อนที่ เมื่อมีการเรียกใช้ API ซึ่งอาจเป็นเมื่อผู้ใช้เข้าสู่ฝ่ายที่พึ่งพา (RP) วิธีนี้เรียกว่าโหมดวิดเจ็ต ผู้ใช้จะต้องลงชื่อเข้าใช้ IdP ก่อนที่จะเข้าสู่ RP เพื่อแสดงวิดเจ็ต ตัว FedCM เองไม่มีวิธีที่เชื่อถือได้ในการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ IdP ก่อนที่จะอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ RP โดยใช้บัญชีที่มีให้บริการใน IdP FedCM กำลังจะเพิ่มวิธีดำเนินการ
API โหมดปุ่มใหม่จะเพิ่มโหมด UI ใหม่ที่เรียกว่าโหมดปุ่ม โหมดปุ่มไม่ใช่โหมดจะต้องเรียกใช้ทันทีที่ผู้ใช้เข้าสู่ RP ซึ่งต่างจากโหมดวิดเจ็ต แต่มีไว้เพื่อเรียกใช้เมื่อผู้ใช้เริ่มขั้นตอนการลงชื่อเข้าใช้ เช่น การกดปุ่ม "ลงชื่อเข้าใช้ด้วย IdP"
ทันทีที่กดปุ่ม FedCM จะตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ IdP ด้วยการดึงข้อมูลไปยังปลายทางบัญชีหรือสถานะการเข้าสู่ระบบที่เก็บไว้ในเบราว์เซอร์ หากผู้ใช้ยังไม่ได้ลงชื่อเข้าใช้ FedCM จะขอให้ผู้ใช้ลงชื่อเข้าใช้ IdP โดยใช้ login_url
ที่ IdP มีให้ผ่านหน้าต่างป๊อปอัป หากเบราว์เซอร์รู้ว่าผู้ใช้ลงชื่อเข้าใช้ IdP แล้ว หรือทันทีที่ผู้ใช้ลงชื่อเข้าใช้ IdP ด้วยหน้าต่างป๊อปอัป FedCM จะเปิดกล่องโต้ตอบโมดัลให้ผู้ใช้เพื่อเลือกบัญชี IdP ที่จะลงชื่อเข้าใช้ หากเลือกบัญชี ผู้ใช้จะลงชื่อเข้าใช้ RP โดยใช้บัญชี IdP ได้
ลองใช้งานด้วยตัวเองโดยใช้ Chrome 125 ได้ที่ https://fedcm-rp-demo.glitch.me/button_flow
วิธีใช้ API โหมดปุ่ม
- เปิดใช้ฟีเจอร์ทดลอง
FedCmButtonMode
ในchrome://flags
- อย่าลืมเรียกใช้ API ที่อยู่เบื้องหลังการเปิดใช้งานผู้ใช้ชั่วคราว เช่น การคลิกปุ่ม
- เรียกใช้ API ด้วยพารามิเตอร์
mode
ดังนี้
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
เบราว์เซอร์จะส่งพารามิเตอร์ใหม่ไปยังปลายทางการยืนยันรหัสที่แสดงประเภทคำขอโดยใส่ mode=button
ดังนี้
POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button
ใช้ตัวเลือกบัญชีอื่น
RP อนุญาตให้ผู้ใช้ "ใช้บัญชีอื่นๆ" ในตัวเลือกบัญชีได้ เช่น เมื่อ IdP รองรับหลายบัญชีหรือแทนที่บัญชีที่มีอยู่
วิธีเปิดใช้ตัวเลือกเพื่อใช้บัญชีอื่น
- เปิดใช้ฟีเจอร์ทดลอง
FedCmUseOtherAccount
ในchrome://flags
หรือลงทะเบียนช่วงทดลองใช้ Button Mode API จากต้นทาง - IdP จะระบุข้อมูลต่อไปนี้ในไฟล์การกำหนดค่า IdP
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
เข้าร่วมช่วงทดลองใช้จากต้นทาง
คุณลองใช้ Button Mode API ในเครื่องได้โดยเปิดการแจ้งว่าไม่เหมาะสมของ Chrome
chrome://flags#fedcm-button-mode
ใน Chrome 125 ขึ้นไป
IdP ยังเปิดใช้โหมดปุ่มได้ด้วยการลงทะเบียนช่วงทดลองใช้จากต้นทาง ดังนี้
- ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สามสำหรับ RP
ช่วงทดลองใช้จากต้นทางช่วยให้คุณได้ลองใช้ฟีเจอร์ใหม่ๆ และแสดงความคิดเห็นเกี่ยวกับความสามารถในการใช้งาน การใช้งานจริง และประสิทธิภาพต่อชุมชนมาตรฐานเว็บ ดูข้อมูลเพิ่มเติมได้ที่คู่มือช่วงทดลองใช้จากต้นทางสำหรับนักพัฒนาเว็บ
ช่วงทดลองใช้ Button Mode API จากต้นทางพร้อมใช้งานจาก Chrome 125 ถึง Chrome 127
- ไปที่หน้าการลงทะเบียนทดลองใช้ต้นทาง
- คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
- ป้อนต้นทางของ IdP เป็น Web Origin
- ตรวจสอบการจับคู่ของบุคคลที่สามเพื่อแทรกโทเค็นกับ JavaScript ในต้นทางอื่นๆ
- คลิกส่ง
- ฝังโทเค็นที่ออกไว้ในเว็บไซต์ของบุคคลที่สาม
หากต้องการฝังโทเค็นในเว็บไซต์ของบุคคลที่สาม ให้เพิ่มโค้ดต่อไปนี้ลงในไลบรารี JavaScript หรือ SDK ของ IdP ที่ให้บริการจากต้นทางของ IdP
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
โปรดแทนที่ TOKEN_GOES_HERE
ด้วยโทเค็นของคุณเอง
ต้องใช้ CORS และ SameSite=None
ใน Chrome 125
CORS
Chrome จะบังคับใช้ CORS ในปลายทางการยืนยันรหัสโดยเริ่มตั้งแต่ Chrome 125
CORS (cross-Origin-Resource-Sharing) เป็นระบบที่ประกอบด้วยการส่งส่วนหัว HTTP ซึ่งกำหนดว่าเบราว์เซอร์จะบล็อกโค้ด JavaScript ฟรอนท์เอนด์ไม่ให้เข้าถึงการตอบกลับสำหรับคำขอข้ามต้นทางหรือไม่ ปลายทางการยืนยันรหัสในเซิร์ฟเวอร์ IdP ต้องตอบกลับคำขอด้วยส่วนหัวเพิ่มเติม ต่อไปนี้เป็นตัวอย่างส่วนหัวการตอบกลับคำขอจาก https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=ไม่มี
พารามิเตอร์ SameSite ของคุกกี้จะประกาศว่าคุกกี้ถูกจำกัดไว้เฉพาะบริบทของบุคคลที่หนึ่งหรือเว็บไซต์เดียวกัน การระบุให้เป็น None
จะทำให้ระบบส่งคุกกี้ไปยังโดเมนของบุคคลที่สามได้
ใน FedCM นั้น Chrome จะส่งคุกกี้ไปยังปลายทางบัญชี ปลายทางการยืนยันรหัส และปลายทางการยกเลิกการเชื่อมต่อ ตั้งแต่ Chrome 125 เป็นต้นไป Chrome จะส่งคำขอที่มีข้อมูลเข้าสู่ระบบเหล่านั้นซึ่งมีเฉพาะคุกกี้ที่ระบุอย่างชัดแจ้งเป็น SameSite=None