หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Eiji Kitamura

ตั้งแต่ 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 กำลังจะเพิ่มวิธีดำเนินการนี้

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

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

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

ผู้ใช้ลงชื่อเข้าใช้ 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

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

การตรวจหาองค์ประกอบ

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

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 อย่างชัดเจนเท่านั้น