ใน Chrome 125 นั้น API โหมดของปุ่มกำลังเริ่มต้น ช่วงทดลองใช้จากต้นทางบนเดสก์ท็อป ด้วย API โหมดปุ่ม ผู้ให้บริการข้อมูลประจำตัวสามารถใช้ FedCM API แม้ว่าผู้ใช้จะไม่มีเซสชัน IdP ที่ใช้งานอยู่ขณะเรียก API ก็ตาม จากนั้นผู้ใช้สามารถลงชื่อเข้าใช้เว็บไซต์ด้วยบัญชีแบบรวมศูนย์ได้โดยไม่ต้อง ไปยังเว็บไซต์ IdP UI ของ FedCM ในโหมดปุ่มโดดเด่นกว่า เมื่อเทียบกับวิดเจ็ต จากโฟลว์วิดเจ็ตที่มีอยู่เพราะถูกกั้นไว้โดยผู้ใช้ และแสดงถึงความตั้งใจในการลงชื่อเข้าใช้ของผู้ใช้ได้ดีขึ้น
API โหมดปุ่ม
อินเทอร์เฟซผู้ใช้ของ FedCM มีให้ใช้งานในรูปแบบวิดเจ็ตที่แสดงทางด้านขวาบน มุมบนเดสก์ท็อป หรือเป็น Bottom Sheet บนอุปกรณ์เคลื่อนที่ทันทีที่เรียกใช้ API ซึ่งอาจเกิดขึ้นเมื่อผู้ใช้ไปถึงบุคคลดังกล่าว (RP) ซึ่งเรียกว่า วิดเจ็ต ผู้ใช้ต้องลงชื่อเข้าใช้ IdP จึงจะแสดงวิดเจ็ตได้ ก่อนที่จะไปถึง RP แม้แต่ FedCM เองก็ไม่มีวิธีที่เชื่อถือได้ในการช่วยให้ ให้ผู้ใช้ลงชื่อเข้าใช้ IdP ก่อนที่จะอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ RP โดยใช้บัญชีที่มีอยู่ใน IdP โดย FedCM กำลังจะเพิ่มวิธีการดำเนินการนี้
API โหมดปุ่มใหม่เพิ่มโหมด UI ใหม่ชื่อโหมด button แตกต่างจาก โหมดวิดเจ็ต โหมดปุ่มไม่ได้มีไว้เพื่อให้ทำงานทันทีที่ผู้ใช้มาถึง RP. แต่ควรเรียกใช้เมื่อผู้ใช้เริ่มขั้นตอนการลงชื่อเข้าใช้แทน เช่น การกด "ลงชื่อเข้าใช้ด้วย IdP"
ทันทีที่กดปุ่ม FedCM จะตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้
IdP ผ่านการดึงข้อมูลไปยังบัญชี
ปลายทาง หรือ
สถานะการเข้าสู่ระบบที่จัดเก็บใน
เบราว์เซอร์ หาก
ผู้ใช้ยังไม่ได้ลงชื่อเข้าใช้ FedCM จะขอให้ผู้ใช้ลงชื่อเข้าใช้ IdP โดยใช้
login_url
ซึ่ง IdP ให้ไว้ผ่านทางหน้าต่างป๊อปอัป หากเบราว์เซอร์รู้ว่าผู้ใช้
ลงชื่อเข้าใช้ IdP แล้ว หรือทันทีที่ผู้ใช้ลงชื่อเข้าใช้ IdP ด้วย
หน้าต่างป๊อปอัป FedCM จะเปิดกล่องโต้ตอบโมดัลให้ผู้ใช้เลือก IdP
บัญชีที่ลงชื่อเข้าใช้ เมื่อเลือกบัญชี ผู้ใช้จะลงนามต่อได้
ให้ RP โดยใช้บัญชี IdP
ใน UI ของโหมดปุ่ม กล่องโต้ตอบการลงชื่อเข้าใช้ที่แสดงจะมีขนาดใหญ่ขึ้นเมื่อเปรียบเทียบกับ โหมดวิดเจ็ต และควรเป็นไอคอนการแสดงแบรนด์เพื่อให้ภาพสอดคล้องกัน แม้ว่าขนาดไอคอนขั้นต่ำสำหรับโหมดวิดเจ็ตคือ 25x25px แต่ขนาดขั้นต่ำของ ไอคอนในโหมดปุ่มมีขนาด 40x40 พิกเซล ผู้ให้บริการข้อมูลประจำตัว ช่วยให้ การระบุ 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.
วิธีใช้ 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.
}
ใช้ตัวเลือกบัญชีอื่น
ผู้ที่ถูกจำกัดสามารถอนุญาตให้ผู้ใช้ "ใช้บัญชีอื่น" ได้ ในตัวเลือกบัญชีผู้ใช้สำหรับ เช่น เมื่อ IdP รองรับหลายบัญชีหรือใช้บัญชีที่มีอยู่แทน
หากต้องการเปิดใช้ตัวเลือกเพื่อใช้บัญชีอื่น ให้ทำดังนี้
- เปิดใช้ฟีเจอร์ทดลอง
FedCmUseOtherAccount
ในchrome://flags
หรือลงทะเบียนช่วงทดลองใช้ API โหมดปุ่มจากต้นทาง - IdP จะระบุข้อมูลต่อไปนี้ในการกำหนดค่า IdP ให้ทำดังนี้
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
เข้าร่วมช่วงทดลองใช้จากต้นทาง
คุณสามารถลอง API โหมดปุ่มในเครื่องได้โดยเปิด Chrome
แจ้ง
chrome://flags#fedcm-button-mode
ใน Chrome 125 ขึ้นไป
IdP ยังเปิดใช้โหมดปุ่มได้โดยการลงทะเบียนช่วงทดลองใช้จากต้นทาง
- ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สาม สำหรับ RP
ช่วงทดลองใช้จากต้นทางช่วยให้คุณได้ลองใช้ฟีเจอร์ใหม่ๆ และแสดงความคิดเห็นเกี่ยวกับ ความสามารถในการใช้งาน การนำไปปฏิบัติได้จริง และประสิทธิภาพของชุมชนมาตรฐานเว็บ สำหรับ ดูข้อมูลเพิ่มเติมได้ในคู่มือช่วงทดลองใช้จากต้นทางสำหรับเว็บ นักพัฒนาซอฟต์แวร์
ช่วงทดลองใช้ API โหมดปุ่มจากต้นทางมีให้บริการใน Chrome 125 ผ่าน Chrome 130
- ไปที่การลงทะเบียนช่วงทดลองใช้จากต้นทาง
- คลิกปุ่มลงทะเบียนและกรอกแบบฟอร์มเพื่อขอโทเค็น
- ป้อนต้นทางของ IdP เป็นต้นทางเว็บ
- ตรวจสอบการจับคู่บุคคลที่สามเพื่อแทรกโทเค็นด้วย 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
ด้วยโทเค็นของคุณเอง
ต้องระบุ 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