ข้อมูลอัปเดตจาก FedCM: ช่วงทดลองใช้ Button Mode API จากต้นทาง, CORS และ SameSite

Eiji Kitamura

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

API โหมดปุ่ม

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

วันที่

เมื่อใช้โหมดวิดเจ็ต กล่องโต้ตอบจะปรากฏขึ้นที่มุมขวาบนใน Chrome บนเดสก์ท็อปโดยไม่ต้องเปิดใช้งานผู้ใช้

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 บนเดสก์ท็อป พร้อมไอคอนขนาดใหญ่

ลองใช้งานด้วยตนเองโดยใช้ Chrome 125 ที่ https://fedcm-rp-demo.glitch.me/button_flow.

ผู้ใช้กำลังลงชื่อเข้าใช้ RP โดยใช้ API โหมดปุ่ม

วิธีใช้ 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"
    }
  });

หมายเหตุ: ขณะนี้ Chrome รองรับเฉพาะ "button" ในพร็อพเพอร์ตี้ mode ใหม่ อื่นๆ เช่น "widget" จะถูกเพิ่มเมื่อ Chrome จัดส่งฟีเจอร์นี้

เบราว์เซอร์จะส่งพารามิเตอร์ใหม่ไปยังการยืนยันรหัส ปลายทาง แสดงประเภทคำขอโดยใส่ 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

หมายเหตุ: เมื่อเกิดข้อผิดพลาด การเรียก FedCM API โดยใช้โหมดปุ่ม ตอบสนองทันทีเมื่อใช้โหมดวิดเจ็ต จะทำให้การตอบสนองล่าช้า อย่างตั้งใจ เนื่องจากสถานะการลงชื่อเข้าใช้ของผู้ใช้กับ IdP คือ ถือเป็นข้อมูลส่วนตัวและการส่งสัญญาณข้อผิดพลาดในอีกไม่นานจะทำให้ RP คำแนะนำเกี่ยวกับสถานะการลงชื่อเข้าใช้ IdP ของผู้ใช้ เมื่อใช้โหมดปุ่ม ระบบจะถามผู้ใช้ หากต้องการลงชื่อเข้าใช้ IdP ก็ไม่มีข้อกังวลที่จะต้องเปิดเผยการลงชื่อเข้าใช้ IdP ของผู้ใช้ ระบุ RP

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

การตรวจหาฟีเจอร์

หากต้องการตรวจสอบว่าเบราว์เซอร์มีสิทธิ์ใช้โหมดปุ่มหรือไม่ คุณสามารถ ตรวจสอบด้วยโค้ดต่อไปนี้

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

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

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

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

แทนที่ TOKEN_GOES_HERE ด้วยโทเค็นของคุณเอง

หมายเหตุ: หาก RP เรียกใช้ FedCM API ไม่ใช่สคริปต์ที่โหลดจาก IdP RP ต้องลงทะเบียนต้นทางด้วยตนเองและดำเนินการต้นทางของบุคคลที่หนึ่ง ช่วงทดลองใช้

ต้องระบุ 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

หมายเหตุ: เนื่องจาก Access-Control-Allow-Credentials ตั้งค่าเป็นจริง Access-Control-Allow-Origin ต้องแสดงผลโดเมนอย่างชัดเจนและไม่สามารถใช้ ไวลด์การ์ดบ่งชี้ด้วย *

SameSite=None

SameSite ของคุกกี้ จะ ประกาศว่า คุกกี้ถูกจำกัดอยู่เฉพาะในบริบทของบุคคลที่หนึ่งหรือเว็บไซต์เดียวกันเท่านั้น ด้วยการระบุ เป็น None คุกกี้จะสามารถส่งไปยังโดเมนของบุคคลที่สามได้

ใน FedCM แล้ว Chrome จะส่งคุกกี้ไปยังบัญชีเหล่านั้น ปลายทาง การยืนยันรหัส อุปกรณ์ปลายทางและ การยกเลิกการเชื่อมต่อ ปลายทาง เริ่มจาก Chrome 125, Chrome จะส่งคำขอข้อมูลเข้าสู่ระบบเหล่านั้นที่มีเฉพาะคุกกี้เท่านั้น ทำเครื่องหมายอย่างชัดเจนว่าเป็น SameSite=None