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

Button Mode API ใหม่จะเพิ่มโหมด UI ใหม่ที่เรียกว่าโหมด button โหมดปุ่มไม่ได้มีไว้เพื่อเรียกใช้ทันทีที่ผู้ใช้ไปที่ RP ต่างจากโหมดวิดเจ็ต แต่มีไว้เพื่อเรียกใช้เมื่อผู้ใช้เริ่มขั้นตอนการลงชื่อเข้าใช้ เช่น การกดปุ่ม "ลงชื่อเข้าใช้ด้วย IdP"
ทันทีที่กดปุ่ม FedCM จะตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ IdP ผ่านการดึงข้อมูลไปยังปลายทางของบัญชีหรือสถานะการเข้าสู่ระบบที่เก็บไว้ในเบราว์เซอร์หรือไม่ หากผู้ใช้ยังไม่ได้ลงชื่อเข้าใช้ FedCM จะขอให้ผู้ใช้ลงชื่อเข้าใช้ IdP โดยใช้ login_url
ที่ IdP ระบุผ่านหน้าต่างป๊อปอัป หากเบราว์เซอร์ทราบว่าผู้ใช้ลงชื่อเข้าใช้ IdP อยู่แล้ว หรือทันทีที่ผู้ใช้ลงชื่อเข้าใช้ IdP ด้วยหน้าต่างป๊อปอัป FedCM จะเปิดกล่องโต้ตอบแบบโมดัลเพื่อให้ผู้ใช้เลือกบัญชี IdP เพื่อลงชื่อเข้าใช้ เมื่อเลือกบัญชีแล้ว ผู้ใช้จะลงชื่อเข้าใช้ RP โดยใช้บัญชี IdP ต่อได้
ใน UI โหมดปุ่ม กล่องโต้ตอบการลงชื่อเข้าใช้ที่แสดงจะใหญ่กว่าเมื่อเทียบกับโหมดวิดเจ็ต และไอคอนการสร้างแบรนด์ก็ควรเป็นแบบเดียวกันเพื่อให้ภาพมีความสอดคล้องกัน ขนาดไอคอนขั้นต่ำสำหรับโหมดวิดเจ็ตคือ 25x25 พิกเซล ส่วนขนาดขั้นต่ำสำหรับไอคอนในโหมดปุ่มคือ 40x40 พิกเซล ไฟล์ที่รู้จักของ IdP อนุญาตให้ระบุ URL ของไอคอนได้หลายรายการ ดังนี้
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}

ลองใช้ด้วยตนเองโดยใช้ Chrome 125 ที่ https://fedcm-rp-demo.glitch.me/button_flow
วิธีใช้ Button Mode 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
การตรวจหาองค์ประกอบ
หากต้องการตรวจสอบว่าเบราว์เซอร์มีสิทธิ์ใช้โหมดปุ่มหรือไม่ ให้ตรวจสอบด้วยโค้ดต่อไปนี้
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
ใช้ตัวเลือกบัญชีอื่น
RP สามารถอนุญาตให้ผู้ใช้ "ใช้บัญชีอื่น" ในเครื่องมือเลือกบัญชีได้ เช่น เมื่อผู้ให้บริการระบุตัวตนรองรับหลายบัญชีหรือแทนที่บัญชีที่มีอยู่
วิธีเปิดใช้ตัวเลือกให้ใช้บัญชีอื่น
- เปิดใช้ฟีเจอร์ทดลอง
FedCmUseOtherAccount
ในchrome://flags
หรือลงทะเบียนช่วงทดลองใช้ Button Mode API จากต้นทาง - IdP จะระบุข้อมูลต่อไปนี้ในไฟล์การกําหนดค่า IdP
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
เข้าร่วมช่วงทดลองใช้จากต้นทาง
คุณสามารถลองใช้ Button Mode API ในเครื่องได้โดยเปิดFlag ของ Chrome
chrome://flags#fedcm-button-mode
ใน Chrome เวอร์ชัน 125 ขึ้นไป
นอกจากนี้ IdP ยังเปิดใช้โหมดปุ่มได้โดยลงทะเบียนช่วงทดลองใช้ต้นทาง ดังนี้
- ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สามให้กับ RP
ช่วงทดลองใช้จากต้นทางช่วยให้คุณลองใช้ฟีเจอร์ใหม่ๆ และแสดงความคิดเห็นเกี่ยวกับความสามารถในการใช้งาน ความใช้งานได้จริง และประสิทธิภาพของฟีเจอร์เหล่านั้นต่อชุมชนมาตรฐานเว็บ ดูข้อมูลเพิ่มเติมได้ที่คู่มือช่วงทดลองใช้จากต้นทางสําหรับนักพัฒนาเว็บ
ช่วงทดลองใช้ Button Mode API จากต้นทางพร้อมใช้งานใน Chrome เวอร์ชัน 125 ถึง Chrome เวอร์ชัน 130
- ไปที่หน้าการลงทะเบียนช่วงทดลองใช้จากต้นทาง
- คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
- ป้อนต้นทางของ IdP เป็นต้นทางของเว็บ
- เลือกการจับคู่กับบุคคลที่สามเพื่อแทรกโทเค็นด้วย JavaScript ในต้นทางอื่นๆ
- คลิกส่ง
- ฝังโทเค็นที่ออกในเว็บไซต์ของบุคคลที่สาม
หากต้องการฝังโทเค็นในเว็บไซต์ของบุคคลที่สาม ให้เพิ่มโค้ดต่อไปนี้ลงในไลบรารี JavaScript หรือ SDK ของผู้ให้บริการระบุตัวตนที่แสดงจากต้นทางของผู้ให้บริการระบุตัวตน
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=None
พารามิเตอร์ SameSite ของคุกกี้จะประกาศว่าคุกกี้ถูกจํากัดให้อยู่ในบริบทของบุคคลที่หนึ่งหรือเว็บไซต์เดียวกัน การระบุค่าเป็น None
จะทำให้ระบบส่งคุกกี้ไปยังโดเมนของบุคคลที่สามได้
ใน FedCM นั้น Chrome จะส่งคุกกี้ไปยังปลายทางบัญชี ปลายทางการยืนยันผ่านบัตรประจำตัว และปลายทางการยกเลิกการเชื่อมต่อ ตั้งแต่ Chrome 125 เป็นต้นไป Chrome จะส่งคำขอที่มีข้อมูลเข้าสู่ระบบเหล่านั้นโดยมีเพียงคุกกี้ที่ทําเครื่องหมายเป็น SameSite=None
อย่างชัดเจนเท่านั้น