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

Eiji Kitamura

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

API โหมดปุ่ม

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

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

Button Mode API ใหม่จะเพิ่มโหมด UI ใหม่ที่เรียกว่าโหมดปุ่ม โหมดปุ่มไม่ได้มีไว้เพื่อเรียกใช้ทันทีที่ผู้ใช้เข้าสู่ 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 บนเดสก์ท็อป
ในโหมดปุ่ม กล่องโต้ตอบแบบโมดัลจะแสดงที่ด้านบนตรงกลางใน Chrome บนเดสก์ท็อปพร้อมไอคอนที่ใหญ่ขึ้น

ลองใช้ด้วยตัวเองโดยใช้ Chrome 125 ที่ https://fedcm-demo-rp.dev/active-mode

ผู้ใช้ลงชื่อเข้าใช้ RP โดยใช้ Button Mode API

วิธีใช้ 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 สามารถอนุญาตให้ผู้ใช้ "ใช้บัญชีอื่น" ในตัวเลือกบัญชีได้ เช่น เมื่อ IdP รองรับหลายบัญชีหรือแทนที่บัญชีที่มีอยู่

วิธีเปิดใช้ตัวเลือกในการใช้บัญชีอื่น

  • เปิดใช้ฟีเจอร์เวอร์ชันทดลอง FedCmUseOtherAccount ใน chrome://flags หรือลงทะเบียนช่วงทดลองใช้ API โหมดปุ่มจากต้นทาง
  • IdP ระบุสิ่งต่อไปนี้ในไฟล์การกำหนดค่า IdP
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

เข้าร่วมการทดลองใช้จากต้นทาง

คุณลองใช้ Button Mode API ในเครื่องได้โดยเปิดฟีเจอร์ทดลองของ Chrome chrome://flags#fedcm-button-mode ใน Chrome 125 ขึ้นไป

นอกจากนี้ IdP ยังเปิดใช้โหมดปุ่มได้โดยลงทะเบียนการทดสอบต้นทาง

ช่วงทดลองใช้จากต้นทางช่วยให้คุณได้ลองใช้ฟีเจอร์ใหม่ๆ และแสดงความคิดเห็นเกี่ยวกับ ความสามารถในการใช้งาน ความสะดวก และประสิทธิภาพของฟีเจอร์เหล่านั้นต่อชุมชนมาตรฐานเว็บ ดูข้อมูลเพิ่มเติมได้ในคู่มือช่วงทดลองใช้จากต้นทางสำหรับนักพัฒนาเว็บ

ช่วงทดลองใช้จากต้นทางของ Button Mode API พร้อมใช้งานตั้งแต่ Chrome 125 ถึง Chrome 130

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

หากต้องการฝังโทเค็นในเว็บไซต์ของบุคคลที่สาม ให้เพิ่มโค้ดต่อไปนี้ลงในไลบรารี 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 ด้วยโทเค็นของคุณเอง

Chrome 125 จะต้องใช้ CORS และ SameSite=None

CORS

Chrome จะบังคับใช้ CORS กับปลายทาง การยืนยัน ID ตั้งแต่ 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 เท่านั้น