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

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

Eiji Kitamura

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

API โหมดปุ่ม

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

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

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

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

เมื่อใช้โหมดปุ่ม กล่องโต้ตอบโมดัลจะปรากฏขึ้นตรงกลางด้านบนใน Chrome บนเดสก์ท็อป

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

ผู้ใช้กำลังลงชื่อเข้าใช้ RP โดยใช้ Button Mode 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"
    }
  });

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

ใช้ตัวเลือกบัญชีอื่น

RP อนุญาตให้ผู้ใช้ "ใช้บัญชีอื่นๆ" ในตัวเลือกบัญชีได้ เช่น เมื่อ IdP รองรับหลายบัญชีหรือแทนที่บัญชีที่มีอยู่

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

เปิดใช้ฟีเจอร์ทดลอง FedCmUseOtherAccount ใน chrome://flags หรือลงทะเบียนช่วงทดลองใช้ Button Mode API จากต้นทาง
IdP จะระบุข้อมูลต่อไปนี้ในไฟล์การกำหนดค่า IdP

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

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

คุณลองใช้ Button Mode API ในเครื่องได้โดยเปิดการแจ้งว่าไม่เหมาะสมของ Chrome chrome://flags#fedcm-button-mode ใน Chrome 125 ขึ้นไป

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

ลงทะเบียนช่วงทดลองใช้จากต้นทางของบุคคลที่สามสำหรับ RP

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

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

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

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

ต้องใช้ 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=ไม่มี

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

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