FedCM (การจัดการข้อมูลเข้าสู่ระบบแบบรวมศูนย์) เป็นแนวทางที่รักษาความเป็นส่วนตัวสำหรับบริการระบุตัวตนแบบรวมศูนย์ (เช่น "ลงชื่อเข้าใช้ด้วย...") ซึ่งช่วยให้ผู้ใช้เข้าสู่ระบบเว็บไซต์ได้โดยไม่ต้องแชร์ข้อมูลส่วนบุคคลกับบริการระบุตัวตนหรือเว็บไซต์
การใช้งาน FedCM ประกอบด้วยขั้นตอนหลักหลายขั้นตอนสําหรับทั้ง IdP (ผู้ให้บริการข้อมูลประจําตัว) และ RP (บุคคลที่เชื่อถือ)
IdPsต้องทำตามขั้นตอนต่อไปนี้เพื่อติดตั้งใช้งาน FedCM
- สร้างไฟล์ Well-known
- สร้างไฟล์การกําหนดค่า
- สร้างปลายทางต่อไปนี้
- แจ้งเบราว์เซอร์เกี่ยวกับสถานะการเข้าสู่ระบบของผู้ใช้
RP ต้องทําตามขั้นตอนต่อไปนี้เพื่อเปิดใช้ FedCM ในเว็บไซต์
- ตรวจสอบว่าปลายทาง FedCM ได้รับอนุญาตในเว็บไซต์ของ RP
- ใช้ FedCM JavaScript API เพื่อเริ่มการตรวจสอบสิทธิ์ผู้ใช้
- ระบุข้อมูลเมตา (เช่น URL ของนโยบายความเป็นส่วนตัวและข้อกำหนดในการให้บริการ) ให้กับ IdP
- [ไม่บังคับ] ปรับแต่งประสบการณ์ของผู้ใช้โดยเลือกโหมด UX, ระบุการเข้าสู่ระบบหรือคำแนะนำโดเมน, ส่งพารามิเตอร์ที่กำหนดเอง, ขอข้อมูลผู้ใช้ที่เฉพาะเจาะจง, ระบุข้อความแสดงข้อผิดพลาดที่กำหนดเอง หรือเลือกวิธีตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง
ใช้ FedCM เป็น IdP
ดูข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนการนำ FedCM ไปใช้ฝั่งผู้ให้บริการระบุตัวตน
สร้างไฟล์ Well-Known
ไฟล์ Well-known ต้องแสดงจาก /.well-known/web-identity ของ eTLD+1 ของ IdP เพื่อไม่ให้เครื่องมือติดตามละเมิด API
ไฟล์ที่รู้จักดีอาจมีพร็อพเพอร์ตี้ต่อไปนี้
| พร็อพเพอร์ตี้ | ต้องระบุ | คำอธิบาย |
|---|---|---|
provider_urls
|
ต้องระบุ | อาร์เรย์ของเส้นทางไฟล์การกําหนดค่า IdP ระบบจะไม่สนใจ (แต่ยังคงต้องระบุ) หากมีการระบุ accounts_endpoint และ login_url |
accounts_endpoint
|
แนะนำ ต้องมี login_url |
URL สำหรับปลายทางบัญชี วิธีนี้ช่วยให้รองรับการกำหนดค่าได้หลายรายการ ตราบใดที่ไฟล์การกําหนดค่าแต่ละไฟล์ใช้ URL login_url และ accounts_endpoint เดียวกันหมายเหตุ: ระบบรองรับพารามิเตอร์นี้ตั้งแต่ Chrome 132 |
login_url
|
แนะนำ ต้องมี accounts_endpoint |
URL หน้าเข้าสู่ระบบสำหรับให้ผู้ใช้ลงชื่อเข้าใช้ IdP ซึ่งช่วยให้รองรับการกำหนดค่าได้หลายรายการ ตราบใดที่ไฟล์ config แต่ละไฟล์ใช้ login_url และ accounts_endpoint เดียวกันหมายเหตุ: ระบบรองรับพารามิเตอร์นี้ตั้งแต่ Chrome เวอร์ชัน 132 ขึ้นไป |
เช่น หากมีการแสดงปลายทาง IdP ภายใต้ https://accounts.idp.example/ ปลายทางดังกล่าวต้องแสดงไฟล์ .well-known ที่ https://idp.example/.well-known/web-identity รวมถึงไฟล์การกําหนดค่า IdP ตัวอย่างเนื้อหาไฟล์ที่รู้จักมีดังนี้
{
"provider_urls": ["https://accounts.idp.example/config.json"]
}
IdP สามารถรองรับไฟล์การกําหนดค่าหลายไฟล์สําหรับ IdP ได้โดยระบุ accounts_endpoint และ login_url ในไฟล์ Well-known
ฟีเจอร์นี้มีประโยชน์ในกรณีต่อไปนี้
- IdP ต้องรองรับการกําหนดค่าการทดสอบและเวอร์ชันที่ใช้งานจริงหลายรายการ
- IdP ต้องรองรับการกำหนดค่าที่แตกต่างกันในแต่ละภูมิภาค (เช่น
eu-idp.exampleและus-idp.example)
หากต้องการรองรับการกำหนดค่าหลายรายการ (เช่น เพื่อแยกความแตกต่างระหว่างสภาพแวดล้อมการทดสอบและสภาพแวดล้อมจริง) IdP ต้องระบุ accounts_endpoint และ login_url ดังนี้
{
// This property is required, but will be ignored when IdP supports
// multiple configs (when `accounts_endpoint` and `login_url` are
// specified), as long as `accounts_endpoint` and `login_url` in
// that config file match those in the well-known file.
"provider_urls": [ "https://idp.example/fedcm.json" ],
// Specify accounts_endpoint and login_url properties to support
// multiple config files.
// Note: The accounts_endpoint and login_url must be identical
// across all config files. Otherwise,
// the configurations won't be supported.
"accounts_endpoint": "https://idp.example/accounts",
"login_url": "https://idp.example/login"
}
สร้างไฟล์การกําหนดค่าและปลายทาง IdP
ไฟล์การกําหนดค่า IdP มีรายการอุปกรณ์ปลายทางที่จําเป็นสําหรับเบราว์เซอร์ IDP ต้องโฮสต์ไฟล์การกําหนดค่าอย่างน้อย 1 ไฟล์ รวมถึงปลายทางและ URL ที่จําเป็น การตอบกลับ JSON ทั้งหมดต้องแสดงด้วยประเภทเนื้อหา application/json
URL ของไฟล์การกําหนดค่าจะกําหนดโดยค่าที่ระบุในการเรียกใช้ navigator.credentials.get() ที่ดำเนินการใน RP
const credential = await navigator.credentials.get({
identity: {
context: 'signup',
providers: [{
configURL: 'https://accounts.idp.example/config.json',
clientId: '********',
nonce: '******'
}]
}
});
const { token } = credential;
RP จะส่ง URL ของไฟล์การกําหนดค่าไปยังการเรียกใช้ FedCM API เพื่อให้ผู้ใช้ลงชื่อเข้าใช้ได้
// Executed on RP's side:
const credential = await navigator.credentials.get({
identity: {
context: 'signup',
providers: [{
// To allow users to sign in with an IdP using FedCM, RP specifies the IdP's config file URL:
configURL: 'https://accounts.idp.example/fedcm.json',
clientId: '********',
});
const { token } = credential;
เบราว์เซอร์จะดึงข้อมูลไฟล์การกําหนดค่าด้วยคําขอ GET ที่ไม่มีส่วนหัว Origin หรือส่วนหัว Referer คำขอไม่มีคุกกี้และไม่ติดตามการเปลี่ยนเส้นทาง
วิธีนี้ช่วยป้องกันไม่ให้ผู้ให้บริการระบุตัวตนทราบว่าใครเป็นผู้ส่งคำขอและ RP ใดพยายามเชื่อมต่อ เช่น
GET /config.json HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Sec-Fetch-Dest: webidentity
IdP ต้องใช้ปลายทางการกําหนดค่าที่ตอบกลับด้วย JSON JSON ประกอบด้วยพร็อพเพอร์ตี้ต่อไปนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
accounts_endpoint (ต้องระบุ) |
URL สำหรับปลายทางบัญชี |
accounts.include (ไม่บังคับ)
|
สตริงป้ายกำกับบัญชีที่กำหนดเอง ซึ่งจะกำหนดว่าควรแสดงบัญชีใดเมื่อใช้ไฟล์การกําหนดค่านี้ เช่น "accounts": {"include": "developer"}
IdP สามารถใช้การติดป้ายกำกับบัญชีที่กำหนดเองได้ดังนี้
ตัวอย่างเช่น IdP ใช้ "https://idp.example/developer-config.json" ไฟล์การกําหนดค่าที่ระบุ "accounts": {"include": "developer"} นอกจากนี้ IdP ยังทำเครื่องหมายบัญชีบางบัญชีด้วยป้ายกํากับ "developer" โดยใช้พารามิเตอร์ labels ในปลายทางบัญชี เมื่อ RP เรียกใช้ navigator.credentials.get() โดยระบุไฟล์การกําหนดค่า "https://idp.example/developer-config.json" ระบบจะแสดงเฉพาะบัญชีที่มีป้ายกํากับ "developer"
|
client_metadata_endpoint (ไม่บังคับ) |
URL สำหรับปลายทางข้อมูลเมตาไคลเอ็นต์ |
id_assertion_endpoint (ต้องระบุ) |
URL สำหรับปลายทางการยืนยันผ่านบัตรประจำตัว |
disconnect (ไม่บังคับ) |
URL สำหรับยกเลิกการเชื่อมต่อปลายทาง |
login_url (ต้องระบุ) |
URL หน้าเข้าสู่ระบบสำหรับให้ผู้ใช้ลงชื่อเข้าใช้ IdP |
branding (ไม่บังคับ) |
ออบเจ็กต์ที่มีตัวเลือกการสร้างแบรนด์ต่างๆ |
branding.background_color (ไม่บังคับ) |
ตัวเลือกการสร้างแบรนด์ซึ่งกำหนดสีพื้นหลังของปุ่ม "ดำเนินการต่อในฐานะ..." ใช้ไวยากรณ์ CSS ที่เกี่ยวข้อง ซึ่งได้แก่
hex-color,
hsl(),
rgb() หรือ
named-color |
branding.color (ไม่บังคับ) |
ตัวเลือกการสร้างแบรนด์ซึ่งกำหนดสีข้อความของปุ่ม "ดำเนินการต่อในฐานะ..." ใช้ไวยากรณ์ CSS ที่เกี่ยวข้อง ซึ่งได้แก่
hex-color,
hsl(),
rgb() หรือ
named-color |
branding.icons (ไม่บังคับ) |
อาร์เรย์ของออบเจ็กต์ไอคอน ไอคอนเหล่านี้จะแสดงในกล่องโต้ตอบการลงชื่อเข้าใช้ ออบเจ็กต์ไอคอนมีพารามิเตอร์ 2 รายการ ได้แก่
|
modes |
ออบเจ็กต์ที่มีข้อกำหนดเกี่ยวกับวิธีแสดง UI ของ FedCM ในโหมดต่างๆ
|
modes.active
|
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่อนุญาตให้ปรับแต่งลักษณะการทํางานของ FedCM ในโหมดที่เฉพาะเจาะจง ทั้ง modes.active และ modes.passive มีพารามิเตอร์ต่อไปนี้ได้
หมายเหตุ: ใช้ฟีเจอร์บัญชีอื่นและโหมดที่ใช้งานอยู่ได้ตั้งแต่ Chrome 132 |
modes.passive
|
ต่อไปนี้คือตัวอย่างเนื้อหาการตอบกลับจากผู้ให้บริการระบุตัวตน
{
"accounts_endpoint": "/accounts.example",
"client_metadata_endpoint": "/client_metadata.example",
"id_assertion_endpoint": "/assertion.example",
"disconnect_endpoint": "/disconnect.example",
"login_url": "/login",
// When RPs use this config file, only those accounts will be
//returned that include `developer` label in the accounts endpoint.
"accounts": {"include": "developer"},
"modes": {
"active": {
"supports_use_other_account": true,
}
},
"branding": {
"background_color": "green",
"color": "#FFEEAA",
"icons": [{
"url": "https://idp.example/icon.ico",
"size": 25
}]
}
}
เมื่อเบราว์เซอร์ดึงข้อมูลไฟล์การกําหนดค่าแล้ว ก็จะส่งคําขอต่อไปยังปลายทางของ IdP ดังนี้
ใช้บัญชีอื่น
ผู้ใช้สามารถเปลี่ยนไปใช้บัญชีอื่นที่ไม่ใช่บัญชีที่เข้าสู่ระบบอยู่ได้ หากผู้ให้บริการระบุตัวตนรองรับหลายบัญชีหรือแทนที่บัญชีที่มีอยู่
หากต้องการให้ผู้ใช้เลือกบัญชีอื่นได้ IdP ต้องระบุฟีเจอร์นี้ในไฟล์กำหนดค่า
{
"accounts_endpoint" : "/accounts.example",
"modes": {
"active": {
// Allow the user to choose other account (false by default)
"supports_use_other_account": true
}
// "passive" mode can be configured separately
}
}
ปลายทางของบัญชี
ปลายทางบัญชีของ IdP จะแสดงรายการบัญชีที่ผู้ใช้ลงชื่อเข้าใช้ใน IdP หากผู้ให้บริการระบุตัวตนรองรับหลายบัญชี ปลายทางนี้จะแสดงบัญชีที่ลงชื่อเข้าใช้ทั้งหมด
เบราว์เซอร์ส่งคำขอ GET ที่มีคุกกี้ SameSite=None แต่ไม่มีพารามิเตอร์ client_id, ส่วนหัว Origin หรือส่วนหัว Referer ซึ่งจะป้องกันไม่ให้ IdP ทราบว่าผู้ใช้พยายามลงชื่อเข้าใช้ RP ใด เช่น
GET /accounts.example HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
เมื่อได้รับคําขอ เซิร์ฟเวอร์ควรทําดังนี้
- ยืนยันว่าคำขอมีส่วนหัว
Sec-Fetch-Dest: webidentityHTTP - จับคู่คุกกี้เซสชันกับรหัสของบัญชีที่ลงชื่อเข้าใช้แล้ว
- ตอบกลับพร้อมรายการบัญชี
เบราว์เซอร์คาดหวังว่าจะได้รับคำตอบ JSON ที่มีพร็อพเพอร์ตี้ accounts ที่มีอาร์เรย์ข้อมูลบัญชีที่มีพร็อพเพอร์ตี้ต่อไปนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
id (ต้องระบุ) |
รหัสที่ไม่ซ้ำกันของผู้ใช้ |
name (ต้องระบุ) |
ชื่อและนามสกุลของผู้ใช้ |
email (ต้องระบุ) |
อีเมลของผู้ใช้ |
given_name (ไม่บังคับ) |
ชื่อจริงของผู้ใช้ |
picture (ไม่บังคับ) |
URL ของรูปโปรไฟล์ผู้ใช้ |
approved_clients (ไม่บังคับ) |
อาร์เรย์รหัสไคลเอ็นต์ RP ที่ผู้ใช้ลงทะเบียนไว้ |
login_hints (ไม่บังคับ) |
อาร์เรย์ของประเภทตัวกรองที่เป็นไปได้ทั้งหมดที่ IdP รองรับเพื่อระบุบัญชี RP สามารถเรียกใช้ navigator.credentials.get() ด้วยพร็อพเพอร์ตี้ loginHint เพื่อแสดงบัญชีที่ระบุ |
domain_hints (ไม่บังคับ) |
อาร์เรย์ของโดเมนทั้งหมดที่เชื่อมโยงกับบัญชี RP สามารถเรียกใช้ navigator.credentials.get() ด้วยพร็อพเพอร์ตี้ domainHint เพื่อกรองบัญชี |
labels (ไม่บังคับ)
|
อาร์เรย์ของสตริงป้ายกำกับบัญชีที่กำหนดเองซึ่งเชื่อมโยงกับบัญชี IdP สามารถใช้การติดป้ายกำกับบัญชีที่กำหนดเองได้ดังนี้
ตัวอย่างเช่น IdP ใช้ https://idp.example/developer-config.json ไฟล์การกําหนดค่าที่ระบุ "accounts": {"include": "developer"} นอกจากนี้ IdP ยังทำเครื่องหมายบัญชีบางบัญชีด้วยป้ายกํากับ "developer" โดยใช้พารามิเตอร์ labels ใน ปลายทางของบัญชี เมื่อ RP เรียกใช้ navigator.credentials.get() โดยระบุไฟล์การกําหนดค่า https://idp.example/developer-config.json ระบบจะแสดงเฉพาะบัญชีที่มีป้ายกํากับ "developer"ป้ายกํากับบัญชีที่กําหนดเองแตกต่างจากคำแนะนำในการเข้าสู่ระบบและคำแนะนำโดเมนตรงที่เซิร์ฟเวอร์ IdP จะเป็นผู้ดูแลรักษาป้ายกำกับเหล่านี้โดยสมบูรณ์ และ RP จะระบุเฉพาะไฟล์การกําหนดค่าที่จะใช้เท่านั้น |
ตัวอย่างเนื้อหาการตอบกลับ
{
"accounts": [{
"id": "1234",
"given_name": "John",
"name": "John Doe",
"email": "john_doe@idp.example",
"picture": "https://idp.example/profile/123",
// Ids of those RPs where this account can be used
"approved_clients": ["123", "456", "789"],
// This account has 'login_hints`. When an RP calls `navigator.credentials.get()`
// with a `loginHint` value specified, for example, `exampleHint`, only those
// accounts will be shown to the user whose 'login_hints' array contains the `exampleHint`.
"login_hints": ["demo1", "exampleHint"],
// This account is labelled. IdP can implement a specific config file for a
// label, for example, `https://idp.example/developer-config.json`. Like that
// RPs can filter out accounts by calling `navigator.credentials.get()` with
// `https://idp.example/developer-config.json` config file.
"labels": ["hr", "developer"]
}, {
"id": "5678",
"given_name": "Johnny",
"name": "Johnny",
"email": "johnny@idp.example",
"picture": "https://idp.example/profile/456",
"approved_clients": ["abc", "def", "ghi"],
"login_hints": ["demo2"],
"domain_hints": ["@domain.example"]
}]
}
หากผู้ใช้ไม่ได้ลงชื่อเข้าใช้ ให้ตอบกลับด้วย HTTP 401 (ไม่ได้รับอนุญาต)
เบราว์เซอร์จะใช้รายการบัญชีที่แสดงผลและ RP จะใช้ไม่ได้
ปลายทางการระบุตัวตน
ปลายทางการยืนยันผ่านบัตรประจำตัวของ IdP จะแสดงการยืนยันสําหรับผู้ใช้ที่ลงชื่อเข้าใช้
เมื่อผู้ใช้ลงชื่อเข้าใช้เว็บไซต์ RP โดยใช้การเรียก navigator.credentials.get() เบราว์เซอร์จะส่งคําขอ POST พร้อมคุกกี้ที่มี SameSite=None และประเภทเนื้อหา application/x-www-form-urlencoded ไปยังปลายทางนี้พร้อมข้อมูลต่อไปนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
client_id (ต้องระบุ) |
ตัวระบุไคลเอ็นต์ของ RP |
account_id (ต้องระบุ) |
รหัสที่ไม่ซ้ำกันของผู้ใช้ที่ลงชื่อเข้าใช้ |
disclosure_text_shown |
แสดงผลเป็นสตริง "true" หรือ "false" (ไม่ใช่บูลีน) ผลลัพธ์คือ "false" ในกรณีต่อไปนี้
|
is_auto_selected |
หากมีการตรวจสอบสิทธิ์อีกครั้งโดยอัตโนมัติใน RP is_auto_selected จะแสดง "true" หรือ "false" ซึ่งจะเป็นประโยชน์ในการสนับสนุนฟีเจอร์ที่เกี่ยวข้องกับการรักษาความปลอดภัยมากขึ้น ตัวอย่างเช่น ผู้ใช้บางรายอาจต้องการระดับการรักษาความปลอดภัยที่สูงขึ้น ซึ่งกำหนดให้ต้องมีการสื่อกลางของผู้ใช้อย่างชัดเจนในการตรวจสอบสิทธิ์ หากผู้ให้บริการระบุตัวตนได้รับคําขอโทเค็นโดยไม่มีสื่อกลางดังกล่าว ผู้ให้บริการอาจจัดการคําขอในลักษณะอื่น เช่น แสดงรหัสข้อผิดพลาดเพื่อให้ RP สามารถเรียกใช้ FedCM API อีกครั้งด้วย mediation: required |
fields (ไม่บังคับ)
|
อาร์เรย์สตริงที่ระบุข้อมูลผู้ใช้ ("name", "email", "picture") ที่ RP ต้องการให้ IdP แชร์ เบราว์เซอร์จะส่ง fields, disclosure_text_shown และ disclosure_shown_for ที่แสดงรายการฟิลด์ที่ระบุในคำขอ POST ดังในตัวอย่างต่อไปนี้หมายเหตุ: Chrome 132 รองรับพารามิเตอร์ฟิลด์ |
params (ไม่บังคับ)
|
ออบเจ็กต์ JSON ที่ถูกต้องซึ่งอนุญาตให้ระบุพารามิเตอร์คีย์-ค่าที่กำหนดเองเพิ่มเติม เช่น
params เป็น JSON แล้วเข้ารหัสเป็นเปอร์เซ็นต์หมายเหตุ: Chrome 132 ขึ้นไปรองรับ Parameters API |
ตัวอย่างส่วนหัว HTTP
POST /assertion.example HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
// disclosure_text_shown is set to 'false', as the 'name' field value is missing in 'fields' array
// params value is serialized to JSON and then percent-encoded.
account_id=123&client_id=client1234&disclosure_text_shown=false&is_auto_selected=true¶ms=%22%7B%5C%22nonce%5C%22%3A%5C%22nonce-value%5C%22%7D%22.%0D%0A4&disclosure_text_shown=true&fields=email,picture&disclosure_shown_for=email,picture
เมื่อได้รับคําขอ เซิร์ฟเวอร์ควรทําดังนี้
- ตอบสนองต่อคําขอด้วย CORS (Cross-Origin Resource Sharing)
- ยืนยันว่าคำขอมีส่วนหัว
Sec-Fetch-Dest: webidentityHTTP - จับคู่ส่วนหัว
Originกับต้นทาง RP ที่ระบุโดยclient_idปฏิเสธหากไม่ตรงกัน - จับคู่
account_idกับรหัสของบัญชีที่ลงชื่อเข้าใช้แล้ว ปฏิเสธหากไม่ตรงกัน - ตอบกลับด้วยโทเค็น หากคำขอถูกปฏิเสธ ให้ตอบกลับด้วยการตอบกลับข้อผิดพลาด
โดยผู้ให้บริการระบุตัวตนจะเลือกวิธีออกโทเค็นได้ โดยทั่วไปแล้ว โทเค็นจะได้รับการรับรองด้วยข้อมูล เช่น รหัสบัญชี รหัสไคลเอ็นต์ ต้นทางของผู้ออกบัตร และ Nonce เพื่อให้ RP ยืนยันได้ว่าโทเค็นเป็นของจริง
เบราว์เซอร์คาดหวังว่าการตอบกลับ JSON จะมีพร็อพเพอร์ตี้ต่อไปนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
token |
โทเค็นคือสตริงที่มีการอ้างสิทธิ์เกี่ยวกับการตรวจสอบสิทธิ์ |
continue_on |
URL เปลี่ยนเส้นทางที่เปิดใช้ขั้นตอนการลงชื่อเข้าใช้แบบหลายขั้นตอน |
เบราว์เซอร์จะส่งโทเค็นที่แสดงผลไปยัง RP เพื่อให้ RP ตรวจสอบการตรวจสอบสิทธิ์ได้
{
// IdP can respond with a token to authenticate the user
"token": "***********"
}
ดำเนินการต่อในฟีเจอร์
IdP สามารถระบุ URL เปลี่ยนเส้นทางในการตอบกลับปลายทางการยืนยันผ่านบัตรประจำตัวเพื่อเปิดใช้ขั้นตอนการลงชื่อเข้าใช้แบบหลายขั้นตอน ซึ่งจะมีประโยชน์เมื่อ IdP จำเป็นต้องขอข้อมูลเพิ่มเติมหรือสิทธิ์เพิ่มเติม เช่น
- สิทธิ์เข้าถึงทรัพยากรฝั่งเซิร์ฟเวอร์ของผู้ใช้
- ยืนยันว่าข้อมูลติดต่อเป็นข้อมูลล่าสุด
- การควบคุมโดยผู้ปกครอง
ปลายทางการยืนยันผ่านบัตรประจำตัวสามารถแสดงผลพร็อพเพอร์ตี้ continue_on ซึ่งมีเส้นทางสัมบูรณ์หรือสัมพัทธ์ไปยังปลายทางการยืนยันผ่านบัตรประจำตัว
{
// In the id_assertion_endpoint, instead of returning a typical
// "token" response, the IdP decides that it needs the user to
// continue on a popup window:
"continue_on": "https://idp.example/continue_on_url"
}
หากการตอบกลับมีพารามิเตอร์ continue_on ระบบจะเปิดหน้าต่างป๊อปอัปใหม่และนําผู้ใช้ไปยังเส้นทางที่ระบุ
หลังจากผู้ใช้โต้ตอบกับหน้า continue_on แล้ว IdP ควรเรียก IdentityProvider.resolve() โดยส่งโทเค็นเป็นอาร์กิวเมนต์เพื่อให้ระบบสามารถแก้ไขสัญญาจากคําเรียก navigator.credentials.get() เดิมได้ ดังนี้
document.getElementById('example-button').addEventListener('click', async () => {
let accessToken = await fetch('/generate_access_token.cgi');
// Closes the window and resolves the promise (that is still hanging
// in the relying party's renderer) with the value that is passed.
IdentityProvider.resolve(accessToken);
});
จากนั้นเบราว์เซอร์จะปิดป๊อปอัปโดยอัตโนมัติและส่งคืนโทเค็นไปยังผู้เรียก API การเรียก IdentityProvider.resolve() แบบครั้งเดียวเป็นวิธีเดียวที่หน้าต่างหลัก (RP) และหน้าต่างป๊อปอัป (IdP) จะสื่อสารกันได้
หากผู้ใช้ปฏิเสธคําขอ IdP จะปิดหน้าต่างได้โดยเรียกใช้ IdentityProvider.close()
IdentityProvider.close();
Continuation API ต้องมีการโต้ตอบจากผู้ใช้อย่างชัดเจน (การคลิก) จึงจะทํางานได้ Continuation API ทำงานร่วมกับโหมดสื่อกลางต่างๆ ดังนี้
- ในโหมดพาสซีฟ
mediation: 'optional'(ค่าเริ่มต้น): Continuation API จะทํางานกับท่าทางสัมผัสของผู้ใช้เท่านั้น เช่น การคลิกปุ่มในหน้าเว็บหรือใน UI ของ FedCM เมื่อระบบทริกเกอร์การตรวจสอบสิทธิ์อีกครั้งโดยอัตโนมัติโดยไม่มีท่าทางสัมผัสของผู้ใช้ ระบบจะไม่เปิดหน้าต่างป๊อปอัปและปฏิเสธสัญญาmediation: 'required': ขอให้ผู้ใช้โต้ตอบเสมอเพื่อให้ Continuation API ทำงานได้เสมอ
- ในโหมดทำงาน
- ต้องเปิดใช้งานผู้ใช้เสมอ Continuation API ใช้งานร่วมกันได้
หากผู้ใช้เปลี่ยนบัญชีในป๊อปอัปด้วยเหตุผลบางอย่าง (เช่น IdP มีฟังก์ชัน "ใช้บัญชีอื่น" หรือในกรณีที่มีการมอบสิทธิ์) การเรียกใช้การแก้ไขจะใช้อาร์กิวเมนต์ที่ 2 ที่ไม่บังคับ ซึ่งอนุญาตให้ดำเนินการต่อไปนี้ได้
IdentityProvider.resolve(token, {accountId: '1234');
แสดงการตอบกลับที่มีข้อผิดพลาด
id_assertion_endpoint ยังแสดงผล "ข้อผิดพลาด" ในการตอบกลับได้ด้วย ซึ่งจะมีช่องที่ไม่บังคับ 2 ช่องดังนี้
code: IdP สามารถเลือกข้อผิดพลาดที่ทราบแล้วรายการใดรายการหนึ่งจากรายการข้อผิดพลาดที่ระบุของ OAuth 2.0 (invalid_request,unauthorized_client,access_denied,server_errorและtemporarily_unavailable) หรือใช้สตริงใดก็ได้ หากเป็นกรณีหลัง Chrome จะแสดงผล UI ข้อผิดพลาดพร้อมข้อความแสดงข้อผิดพลาดทั่วไปและส่งรหัสไปยัง RPurl: ระบุหน้าเว็บที่มนุษย์อ่านได้พร้อมข้อมูลเกี่ยวกับข้อผิดพลาดเพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับข้อผิดพลาดแก่ผู้ใช้ ช่องนี้มีประโยชน์ต่อผู้ใช้เนื่องจากเบราว์เซอร์ไม่สามารถแสดงข้อความแสดงข้อผิดพลาดแบบริชมีเดียใน UI ในตัว เช่น ลิงก์สำหรับขั้นตอนถัดไป หรือข้อมูลติดต่อฝ่ายบริการลูกค้า หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับรายละเอียดข้อผิดพลาดและวิธีแก้ไข ผู้ใช้สามารถไปที่หน้าเว็บที่ระบุจาก UI ของเบราว์เซอร์เพื่อดูรายละเอียดเพิ่มเติม URL ต้องเป็นของเว็บไซต์เดียวกับ IdPconfigURL
// id_assertion_endpoint response
{
"error" : {
"code": "access_denied",
"url" : "https://idp.example/error?type=access_denied"
}
}
ป้ายกำกับบัญชีที่กำหนดเอง
เมื่อใช้ป้ายกำกับบัญชีที่กำหนดเอง IdP จะใส่คำอธิบายประกอบบัญชีผู้ใช้ด้วยป้ายกำกับได้ และ RP จะเลือกดึงข้อมูลเฉพาะบัญชีที่มีป้ายกำกับที่เฉพาะเจาะจงได้โดยการระบุ configURL สำหรับป้ายกำกับนั้น ซึ่งจะมีประโยชน์เมื่อ RP ต้องกรองบัญชีตามเกณฑ์ที่เฉพาะเจาะจง เช่น เพื่อแสดงเฉพาะบัญชีที่เจาะจงบทบาท เช่น "developer" หรือ "hr"
คุณสามารถกรองข้อมูลในลักษณะที่คล้ายกันโดยใช้ฟีเจอร์คำแนะนำโดเมนและคำแนะนำการเข้าสู่ระบบ โดยระบุไว้ในการเรียกใช้ navigator.credentials.get() อย่างไรก็ตาม ป้ายกํากับบัญชีที่กําหนดเองสามารถกรองผู้ใช้ได้โดยระบุไฟล์การกําหนดค่า ซึ่งมีประโยชน์อย่างยิ่งเมื่อใช้ configURL หลายรายการ นอกจากนี้ ป้ายกำกับบัญชีที่กำหนดเองยังแตกต่างจากป้ายกำกับอื่นๆ ตรงที่มาจากเซิร์ฟเวอร์ IdP ไม่ใช่จาก RP เช่น คำแนะนำในการเข้าสู่ระบบหรือโดเมน
พิจารณาผู้ให้บริการระบุตัวตนที่ต้องการแยกความแตกต่างระหว่างบัญชี "developer" กับ "hr" โดย IdP ต้องรองรับ configURL 2 รายการสําหรับ "developer" และ "hr" ตามลําดับ
- ไฟล์การกําหนดค่าของนักพัฒนาซอฟต์แวร์
https://idp.example/developer/fedcm.jsonมีป้ายกํากับ"developer"และไฟล์การกําหนดค่าขององค์กรhttps://idp.example/hr/fedcm.jsonมีป้ายกํากับ"hr"ดังนี้
// The developer config file at `https://idp.example/developer/fedcm.json`
{
"accounts_endpoint": "https://idp.example/accounts",
"client_metadata_endpoint": "/client_metadata",
"login_url": "https://idp.example/login",
"id_assertion_endpoint": "/assertion",
"accounts": {
// Account label
"include": "developer"
}
}
// The hr config file at `https://idp.example/hr/fedcm.json`
{
"accounts_endpoint": "https://idp.example/accounts",
"client_metadata_endpoint": "/client_metadata",
"login_url": "https://idp.example/login",
"id_assertion_endpoint": "/assertion",
"accounts": {
// Account label
"include": "hr"
}
}
- เมื่อใช้การตั้งค่าดังกล่าว ไฟล์ .well-known ควรมี
accounts_endpointและlogin_urlเพื่ออนุญาตให้มี configURL หลายรายการ
{
"provider_urls": [ "https://idp.example/fedcm.json" ],
"accounts_endpoint": "https://idp.example/accounts",
"login_url": "https://idp.example/login"
}
- ปลายทางบัญชี IdP ทั่วไป (ในตัวอย่างนี้คือ
https://idp.example/accounts) จะแสดงรายการบัญชีที่มีพร็อพเพอร์ตี้labelsที่มีป้ายกำกับที่กำหนดไว้ในอาร์เรย์สำหรับแต่ละบัญชี
{
"accounts": [{
"id": "123",
"given_name": "John",
"name": "John Doe",
"email": "john_doe@idp.example",
"picture": "https://idp.example/profile/123",
"labels": ["developer"]
}], [{
"id": "4567",
"given_name": "Jane",
"name": "Jane Doe",
"email": "jane_doe@idp.example",
"picture": "https://idp.example/profile/4567",
"labels": ["hr"]
}]
}
เมื่อ RP ต้องการอนุญาตให้ผู้ใช้ "hr" ลงชื่อเข้าใช้ ให้ระบุ configURL https://idp.example/hr/fedcm.json ในคําเรียก navigator.credentials.get() ดังนี้
let { token } = await navigator.credentials.get({
identity: {
providers: [{
clientId: '1234',
nonce: '234234',
configURL: 'https://idp.example/hr/fedcm.json',
},
}
});
ด้วยเหตุนี้ ผู้ใช้จึงลงชื่อเข้าใช้ได้โดยใช้รหัสบัญชี 4567 เท่านั้น เบราว์เซอร์จะซ่อนรหัสบัญชี 123 โดยอัตโนมัติเพื่อไม่ให้ผู้ใช้ได้รับบัญชีที่ IdP ในเว็บไซต์นี้ไม่รองรับ
- ป้ายกํากับคือสตริง หากอาร์เรย์
labelsหรือช่องincludeมีสิ่งที่ไม่ใช่สตริง ระบบจะละเว้นรายการนั้น - หากไม่ได้ระบุป้ายกำกับใน
configURLบัญชีทั้งหมดจะแสดงในเครื่องมือเลือกบัญชี FedCM - หากไม่ได้ระบุป้ายกำกับสําหรับบัญชี บัญชีจะแสดงในเครื่องมือเลือกบัญชีก็ต่อเมื่อ
configURLไม่ได้ระบุป้ายกำกับเช่นกัน - หากไม่มีบัญชีที่ตรงกับป้ายกำกับที่ขอในโหมด Passive (คล้ายกับฟีเจอร์คำแนะนำโดเมน) กล่องโต้ตอบ FedCM จะแสดงข้อความแจ้งให้เข้าสู่ระบบ ซึ่งจะช่วยให้ผู้ใช้ลงชื่อเข้าใช้บัญชี IdP ได้ สำหรับโหมดที่ใช้งานอยู่ ระบบจะเปิดหน้าต่างป๊อปอัปการเข้าสู่ระบบโดยตรง
ยกเลิกการเชื่อมต่อปลายทาง
เมื่อเรียกใช้ IdentityCredential.disconnect() เบราว์เซอร์จะส่งคำขอ POST ข้ามแหล่งที่มาพร้อมคุกกี้ที่มี SameSite=None และประเภทเนื้อหา application/x-www-form-urlencoded ไปยังปลายทางการยกเลิกการเชื่อมต่อนี้พร้อมข้อมูลต่อไปนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
account_hint |
คำแนะนำสำหรับบัญชี IdP |
client_id |
ตัวระบุไคลเอ็นต์ของ RP |
POST /disconnect.example HTTP/1.1
Host: idp.example
Origin: rp.example
Content-Type: application/x-www-form-urlencoded
Cookie: 0x123
Sec-Fetch-Dest: webidentity
account_hint=account456&client_id=rp123
เมื่อได้รับคําขอ เซิร์ฟเวอร์ควรทําดังนี้
- ตอบสนองคําขอด้วย CORS (Cross-Origin Resource Sharing)
- ยืนยันว่าคำขอมีส่วนหัว HTTP
Sec-Fetch-Dest: webidentity - จับคู่ส่วนหัว
Originกับต้นทาง RP ที่ระบุโดยclient_idปฏิเสธหากไม่ตรงกัน - จับคู่
account_hintกับรหัสของบัญชีที่ลงชื่อเข้าใช้แล้ว - ยกเลิกการเชื่อมต่อบัญชีผู้ใช้กับ RP
- ตอบกลับเบราว์เซอร์ด้วยข้อมูลบัญชีผู้ใช้ที่ระบุในรูปแบบ JSON
ตัวอย่างเพย์โหลด JSON ของคำตอบมีลักษณะดังนี้
{
"account_id": "account456"
}
แต่หาก IdP ต้องการให้เบราว์เซอร์ยกเลิกการเชื่อมต่อบัญชีทั้งหมดที่เชื่อมโยงกับ RP ให้ส่งสตริงที่ไม่ตรงกับรหัสบัญชีใดๆ เช่น "*"
ปลายทางข้อมูลเมตาไคลเอ็นต์
ปลายทางข้อมูลเมตาไคลเอ็นต์ของผู้ให้บริการระบุตัวตนจะแสดงผลข้อมูลเมตาของฝ่ายที่เชื่อถือ เช่น นโยบายความเป็นส่วนตัว ข้อกำหนดในการให้บริการ และไอคอนโลโก้ของฝ่ายที่เชื่อถือ RP ควรส่งลิงก์ไปยังนโยบายความเป็นส่วนตัวและข้อกำหนดในการให้บริการของตนให้ IdP ล่วงหน้า ลิงก์เหล่านี้จะแสดงในกล่องโต้ตอบการลงชื่อเข้าใช้เมื่อผู้ใช้ยังไม่ได้ลงทะเบียนใน RP กับ IdP
เบราว์เซอร์ส่งคําขอ GET โดยใช้ client_id
navigator.credentials.get โดยไม่มีคุกกี้ เช่น
GET /client_metadata.example?client_id=1234 HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Accept: application/json
Sec-Fetch-Dest: webidentity
เมื่อได้รับคําขอ เซิร์ฟเวอร์ควรทําดังนี้
- กำหนด RP สำหรับ
client_id - ตอบกลับพร้อมข้อมูลเมตาของไคลเอ็นต์
พร็อพเพอร์ตี้สําหรับปลายทางข้อมูลเมตาของไคลเอ็นต์มีดังนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
privacy_policy_url (ไม่บังคับ) |
URL นโยบายความเป็นส่วนตัวของ RP |
terms_of_service_url (ไม่บังคับ) |
URL ของข้อกำหนดในการให้บริการของ RP |
icons (ไม่บังคับ) |
อาร์เรย์ของออบเจ็กต์ เช่น [{ "url": "https://rp.example/rp-icon.ico", "size": 40}] |
เบราว์เซอร์คาดหวังว่าจะได้รับการตอบกลับ JSON จากปลายทาง
{
"privacy_policy_url": "https://rp.example/privacy_policy.html",
"terms_of_service_url": "https://rp.example/terms_of_service.html",
"icons": [{
"url": "https://rp.example/rp-icon.ico",
"size": 40
}]
}
เบราว์เซอร์จะใช้ข้อมูลเมตาของไคลเอ็นต์ที่แสดงผลและ RP จะใช้ไม่ได้
URL เข้าสู่ระบบ
ปลายทางนี้ใช้เพื่อให้ผู้ใช้ลงชื่อเข้าใช้ IdP
เมื่อใช้ Login Status API แล้ว IdP จะต้องแจ้งสถานะการเข้าสู่ระบบของผู้ใช้ให้เบราว์เซอร์ทราบ อย่างไรก็ตาม สถานะอาจไม่ตรงกัน เช่น เมื่อเซสชันหมดอายุ ในกรณีเช่นนี้ เบราว์เซอร์จะอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ IdP ผ่าน URL หน้าเข้าสู่ระบบที่ระบุด้วย login_url ของไฟล์การกําหนดค่า IdP แบบไดนามิก
กล่องโต้ตอบ FedCM จะแสดงข้อความที่แนะนำให้ลงชื่อเข้าใช้ ดังที่แสดงในรูปภาพต่อไปนี้
เมื่อผู้ใช้คลิกปุ่มต่อไป เบราว์เซอร์จะเปิดหน้าต่างป๊อปอัปสำหรับหน้าเข้าสู่ระบบของผู้ให้บริการระบุตัวตน
กล่องโต้ตอบคือหน้าต่างเบราว์เซอร์ปกติที่มีคุกกี้ของบุคคลที่หนึ่ง ทุกอย่างที่เกิดขึ้นภายในกล่องโต้ตอบขึ้นอยู่กับ IdP และจะไม่มีแฮนเดิลหน้าต่างสำหรับส่งคำขอการสื่อสารข้ามแหล่งที่มาไปยังหน้า RP หลังจากผู้ใช้ลงชื่อเข้าใช้แล้ว IdP ควรทําดังนี้
- ส่งส่วนหัว
Set-Login: logged-inหรือเรียกใช้navigator.login.setStatus("logged-in")API เพื่อแจ้งให้เบราว์เซอร์ทราบว่าผู้ใช้ลงชื่อเข้าใช้แล้ว - กด
IdentityProvider.close()เพื่อปิดกล่องโต้ตอบ
แจ้งให้เบราว์เซอร์ทราบเกี่ยวกับสถานะการเข้าสู่ระบบของผู้ใช้
Login Status API เป็นกลไกที่เว็บไซต์ โดยเฉพาะ IdP แจ้งสถานะการเข้าสู่ระบบของผู้ใช้ใน IdP ไปยังเบราว์เซอร์ เมื่อใช้ API นี้ เบราว์เซอร์จะลดคำขอที่ไม่จำเป็นไปยัง IdP และลดการโจมตีตามเวลาที่อาจเกิดขึ้น
IdP สามารถส่งสัญญาณสถานะการเข้าสู่ระบบของผู้ใช้ไปยังเบราว์เซอร์โดยการส่งส่วนหัว HTTP หรือโดยการเรียกใช้ JavaScript API เมื่อผู้ใช้ลงชื่อเข้าใช้ IdP หรือเมื่อผู้ใช้ออกจากระบบบัญชี IdP ทั้งหมด สําหรับ IdP แต่ละรายการ (ระบุด้วย URL ของการกำหนดค่า) เบราว์เซอร์จะเก็บตัวแปรแบบ 3 สถานะซึ่งแสดงสถานะการเข้าสู่ระบบไว้โดยมีค่าที่เป็นไปได้ดังนี้
logged-inlogged-outunknown(ค่าเริ่มต้น)
| สถานะการเข้าสู่ระบบ | คำอธิบาย |
|---|---|
logged-in |
เมื่อตั้งค่าสถานะการเข้าสู่ระบบของผู้ใช้เป็น logged-in แล้ว RP ที่เรียกใช้ FedCM จะส่งคำขอไปยังปลายทางบัญชีของ IdP และแสดงบัญชีที่ใช้ได้ต่อผู้ใช้ในกล่องโต้ตอบ FedCM |
logged-out |
เมื่อสถานะการเข้าสู่ระบบของผู้ใช้คือ logged-out การเรียกใช้ FedCM จะดำเนินการไม่สำเร็จโดยไม่มีการส่งคำขอไปยังปลายทางบัญชีของ IdP |
unknown (ค่าเริ่มต้น) |
ระบบจะตั้งค่าสถานะ unknown ก่อนที่ IdP จะส่งสัญญาณโดยใช้ Login Status API เมื่อสถานะเป็น unknown เบราว์เซอร์จะส่งคำขอไปยังปลายทางบัญชีของ IdP และอัปเดตสถานะตามการตอบกลับจากปลายทางบัญชี |
หากต้องการส่งสัญญาณว่าผู้ใช้ลงชื่อเข้าใช้แล้ว ให้ส่งSet-Login: logged-inส่วนหัว HTTP ในการนำทางระดับบนสุดหรือคำขอทรัพยากรย่อยในเว็บไซต์เดียวกันที่ต้นทางของ IdP โดยทำดังนี้
Set-Login: logged-in
หรือเรียกใช้เมธอด JavaScript navigator.login.setStatus('logged-in')
จากต้นทาง IdP ในการนำทางระดับบนสุด ดังนี้
navigator.login.setStatus('logged-in')
ระบบจะตั้งค่าสถานะการเข้าสู่ระบบของผู้ใช้เป็น logged-in
หากต้องการส่งสัญญาณว่าผู้ใช้ออกจากระบบบัญชีทั้งหมดแล้ว ให้ส่งส่วนหัว Set-Login: logged-out HTTP ในการนําทางระดับบนสุดหรือคําขอทรัพยากรย่อยในเว็บไซต์เดียวกันที่ต้นทาง IdP โดยทำดังนี้
Set-Login: logged-out
หรือเรียกใช้ JavaScript API navigator.login.setStatus('logged-out')
จากต้นทาง IdP ในการนําทางระดับบนสุดโดยทำดังนี้
navigator.login.setStatus('logged-out')
ระบบจะตั้งค่าสถานะการเข้าสู่ระบบของผู้ใช้เป็น logged-out
ระบบจะตั้งค่าสถานะ unknown ก่อนที่ IdP จะส่งสัญญาณโดยใช้ Login Status API เบราว์เซอร์ส่งคําขอไปยังปลายทางบัญชีของผู้ให้บริการข้อมูลประจําตัวและอัปเดตสถานะตามคําตอบจากปลายทางบัญชี
- หากปลายทางแสดงรายการบัญชีที่ใช้งานอยู่ ให้อัปเดตสถานะเป็น
logged-inแล้วเปิดกล่องโต้ตอบ FedCM เพื่อแสดงบัญชีเหล่านั้น - หากปลายทางไม่แสดงบัญชี ให้อัปเดตสถานะเป็น
logged-outและดำเนินการเรียกใช้ FedCM ไม่สําเร็จ
อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ผ่านขั้นตอนการเข้าสู่ระบบแบบไดนามิก
แม้ว่า IdP จะแจ้งสถานะการเข้าสู่ระบบของผู้ใช้ไปยังเบราว์เซอร์อย่างต่อเนื่อง แต่สถานะดังกล่าวอาจไม่ซิงค์กัน เช่น เมื่อเซสชันหมดอายุ เบราว์เซอร์พยายามส่งคําขอที่มีข้อมูลเข้าสู่ระบบไปยังปลายทางของบัญชีเมื่อสถานะการเข้าสู่ระบบเป็นlogged-in แต่เซิร์ฟเวอร์ไม่แสดงบัญชีใดๆ เนื่องจากเซสชันไม่พร้อมใช้งานแล้ว ในกรณีเช่นนี้ เบราว์เซอร์จะอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ IdP ผ่านหน้าต่างป๊อปอัปได้แบบไดนามิก
ใช้ FedCM เป็น RP
เมื่อการกำหนดค่าและปลายทางของ IdP พร้อมใช้งานแล้ว RP สามารถเรียกใช้ navigator.credentials.get() เพื่อขออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ RP ด้วย IdP ได้
ก่อนเรียกใช้ API คุณต้องยืนยันว่า FedCM พร้อมใช้งานในเบราว์เซอร์ของผู้ใช้ หากต้องการตรวจสอบว่า FedCM พร้อมใช้งานหรือไม่ ให้ใส่โค้ดนี้ไว้รอบๆ การใช้งาน FedCM
if ('IdentityCredential' in window) {
// If the feature is available, take action
} else {
// FedCM is not supported, use a different identity solution
}
หากต้องการอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ IdP ใน RP โดยใช้ FedCM ทาง RP สามารถเรียกใช้ navigator.credentials.get() ดังนี้
const credential = await navigator.credentials.get({
identity: {
context: 'signin',
providers: [{
configURL: 'https://accounts.idp.example/config.json',
clientId: '********',
mode: 'active',
params: {
nonce: '******'
}
}]
}
});
const { token } = credential;
พร็อพเพอร์ตี้บริบท
เมื่อใช้พร็อพเพอร์ตี้ context (ไม่บังคับ) RP จะแก้ไขสตริงใน UI ของกล่องโต้ตอบ FedCM ได้ (เช่น "ลงชื่อเข้าใช้ rp.example…" "ใช้ idp.example…") เพื่อรองรับบริบทการตรวจสอบสิทธิ์ที่กำหนดไว้ล่วงหน้า เป็นต้น พร็อพเพอร์ตี้ context อาจมีค่าดังต่อไปนี้
signin(ค่าเริ่มต้น)signupuse
เช่น การตั้งค่า context เป็น use จะแสดงข้อความต่อไปนี้
เบราว์เซอร์จะจัดการกรณีการใช้งานการลงชื่อสมัครใช้และการลงชื่อเข้าใช้แตกต่างกันไปตามการมี approved_clients ในการตอบกลับจากปลายทางรายการบัญชี เบราว์เซอร์จะไม่แสดงข้อความการเปิดเผยข้อมูล "หากต้องการดำเนินการต่อกับ...." หากผู้ใช้ลงชื่อสมัครใช้ RP ไว้แล้ว
พร็อพเพอร์ตี้ providers จะใช้อาร์เรย์ของออบเจ็กต์ IdentityProvider ที่มีพร็อพเพอร์ตี้ต่อไปนี้
พร็อพเพอร์ตี้ผู้ให้บริการ
พร็อพเพอร์ตี้ providers จะใช้อาร์เรย์ของออบเจ็กต์ IdentityProvider ที่มีพร็อพเพอร์ตี้ต่อไปนี้
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
configURL (ต้องระบุ) |
เส้นทางแบบเต็มของไฟล์การกําหนดค่า IdP |
clientId (ต้องระบุ) |
ตัวระบุไคลเอ็นต์ของ RP ที่ออกโดย IdP |
nonce (ไม่บังคับ) |
สตริงแบบสุ่มเพื่อให้แน่ใจว่ามีการตอบกลับสําหรับคําขอที่เฉพาะเจาะจงนี้ ป้องกันการโจมตีด้วยการบันทึกซ้ำ |
loginHint (ไม่บังคับ) |
เมื่อระบุค่า login_hints ค่าใดค่าหนึ่งจากปลายทางของบัญชี กล่องโต้ตอบ FedCM จะแสดงบัญชีที่ระบุ |
domainHint (ไม่บังคับ) |
เมื่อระบุค่า domain_hints ค่าใดค่าหนึ่งจากปลายทางของบัญชี กล่องโต้ตอบ FedCM จะแสดงบัญชีที่ระบุ |
mode (ไม่บังคับ) |
สตริงที่ระบุโหมด UI ของ FedCM โดยอาจเป็นค่าใดค่าหนึ่งต่อไปนี้
หมายเหตุ: Chrome 132 รองรับพารามิเตอร์ mode
|
fields (ไม่บังคับ) |
อาร์เรย์สตริงที่ระบุข้อมูลผู้ใช้ ("name", "email", "picture") ที่ RP ต้องการให้ IdP แชร์ หมายเหตุ: Chrome เวอร์ชัน 132 ขึ้นไปรองรับ Field API |
parameters (ไม่บังคับ) |
ออบเจ็กต์ที่กำหนดเองซึ่งอนุญาตให้ระบุพารามิเตอร์คีย์-ค่าเพิ่มเติม
หมายเหตุ: Chrome 132 รองรับ parameters
|
โหมดทำงาน
FedCM รองรับการกำหนดค่าโหมด UX แบบต่างๆ โหมดนี้จะเป็นโหมดเริ่มต้นและนักพัฒนาแอปไม่จําเป็นต้องกําหนดค่า
วิธีใช้ FedCM ในโหมดทำงาน
- ตรวจสอบความพร้อมใช้งานของฟีเจอร์ในเบราว์เซอร์ของผู้ใช้
- เรียกใช้ API ด้วยท่าทางสัมผัสของผู้ใช้ชั่วคราว เช่น การคลิกปุ่ม
- ส่งพารามิเตอร์
modeไปยังการเรียก API
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
// Check if this Chrome version supports the Mode API.
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported. Call the API with mode property:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: 'https://idp.example/config.json',
clientId: '123',
}],
// The 'mode' value defines the UX mode of FedCM.
// - 'active': Must be initiated by user interaction (e.g., clicking a button).
// - 'passive': Can be initiated without direct user interaction.
mode: 'active'
}
});
}
ไอคอนที่กำหนดเองในโหมดทำงาน
โหมดที่ใช้งานอยู่ช่วยให้ผู้ให้บริการระบุตัวตนรวมไอคอนโลโก้อย่างเป็นทางการของ RP ในการตอบกลับปลายทางข้อมูลเมตาไคลเอ็นต์ได้โดยตรง โดย RP จะต้องส่งข้อมูลการสร้างแบรนด์ล่วงหน้า
เรียกใช้ FedCM จากภายใน iframe แบบข้ามต้นทาง
คุณสามารถเรียกใช้ FedCM จากภายใน iframe ข้ามแหล่งที่มาได้โดยใช้นโยบายสิทธิ์ identity-credentials-get หากเฟรมหลักอนุญาต โดยเพิ่มแอตทริบิวต์ allow="identity-credentials-get" ต่อท้ายแท็ก iframe ดังนี้
<iframe src="https://fedcm-cross-origin-iframe.glitch.me" allow="identity-credentials-get"></iframe>
คุณสามารถดูการใช้งานจริงได้ในตัวอย่าง
หากต้องการ (ไม่บังคับ) หากเฟรมหลักต้องการจํากัดต้นทางที่จะเรียกใช้ FedCM ให้ส่งส่วนหัว Permissions-Policy พร้อมรายการต้นทางที่อนุญาต
Permissions-Policy: identity-credentials-get=(self "https://fedcm-cross-origin-iframe.glitch.me")
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทํางานของนโยบายสิทธิ์ได้ที่การควบคุมฟีเจอร์ของเบราว์เซอร์ด้วยนโยบายสิทธิ์
Login Hint API
เมื่อใช้คำแนะนำในการเข้าสู่ระบบ RP สามารถแนะนำบัญชีที่ผู้ใช้ควรลงชื่อเข้าใช้ ซึ่งจะเป็นประโยชน์สำหรับการตรวจสอบสิทธิ์ผู้ใช้อีกครั้งในกรณีที่ไม่แน่ใจว่าใช้บัญชีใดก่อนหน้านี้
RP สามารถแสดงบัญชีที่เฉพาะเจาะจงได้โดยเรียกใช้ navigator.credentials.get() ด้วยพร็อพเพอร์ตี้ loginHint ที่มีค่า login_hints ค่าใดค่าหนึ่งซึ่งดึงมาจากปลายทางรายการบัญชี ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้
return await navigator.credentials.get({
identity: {
providers: [{
configURL: 'https://idp.example/manifest.json',
clientId: '123',
// Accounts endpoint can specify a 'login_hints' array for an account.
// When RP specifies a 'exampleHint' value, only those accounts will be
// shown to the user whose 'login_hints' array contains the 'exampleHint'
// value
loginHint : 'exampleHint'
}]
}
});
เมื่อไม่มีบัญชีที่ตรงกับ loginHint กล่องโต้ตอบ FedCM จะแสดงข้อความแจ้งให้เข้าสู่ระบบ ซึ่งจะช่วยให้ผู้ใช้เข้าสู่ระบบบัญชี IdP ที่ตรงกับคำแนะนำที่ RP ขอได้ เมื่อผู้ใช้แตะข้อความแจ้ง หน้าต่างป๊อปอัปจะเปิดขึ้นพร้อม URL เข้าสู่ระบบที่ระบุไว้ในไฟล์การกําหนดค่า จากนั้นระบบจะใส่คำแนะนำการเข้าสู่ระบบและพารามิเตอร์การค้นหาคำแนะนำโดเมนต่อท้ายลิงก์
Domain Hint API
RP จะเลือกแสดงเฉพาะบัญชีที่เชื่อมโยงกับโดเมนหนึ่งๆ ได้ ซึ่งจะเป็นประโยชน์สําหรับ RP ที่จํากัดอยู่ในโดเมนของบริษัท
หากต้องการแสดงเฉพาะบัญชีโดเมนที่เฉพาะเจาะจง RP ควรเรียกใช้ navigator.credentials.get()
ด้วยพร็อพเพอร์ตี้ domainHint ที่มีค่า domain_hints รายการใดรายการหนึ่งซึ่งดึงมาจากปลายทางรายการบัญชี ดังที่แสดงในตัวอย่างโค้ดต่อไปนี้
return await navigator.credentials.get({
identity: {
providers: [{
configURL: 'https://idp.example/manifest.json',
clientId: 'abc',
// Accounts endpoint can specify a 'domain_hints' array for an account.
// When RP specifies a '@domain.example' value, only those accounts will be
// shown to the user whose 'domain_hints' array contains the
// '@domain.example' value
domainHint : '@domain.example'
}]
}
});
เมื่อไม่มีบัญชีที่ตรงกับ domainHint กล่องโต้ตอบ FedCM จะแสดงข้อความแจ้งให้เข้าสู่ระบบ ซึ่งจะช่วยให้ผู้ใช้เข้าสู่ระบบบัญชี IdP ที่ตรงกับคำแนะนำที่ RP ขอได้ เมื่อผู้ใช้แตะข้อความแจ้ง หน้าต่างป๊อปอัปจะเปิดขึ้นพร้อม URL เข้าสู่ระบบที่ระบุไว้ในไฟล์การกําหนดค่า จากนั้นระบบจะใส่คำแนะนำการเข้าสู่ระบบและพารามิเตอร์การค้นหาคำแนะนำโดเมนต่อท้ายลิงก์
domainHintพารามิเตอร์ที่กำหนดเอง
ฟีเจอร์พารามิเตอร์ที่กำหนดเองช่วยให้ RP สามารถระบุพารามิเตอร์คีย์-ค่าเพิ่มเติมไปยังปลายทางการยืนยันผ่านบัตรประจำตัวได้ เมื่อใช้ Parameters API ผู้ให้บริการ RP สามารถส่งพารามิเตอร์เพิ่มเติมไปยัง IdP เพื่อขอสิทธิ์เข้าถึงทรัพยากรนอกเหนือจากการลงชื่อเข้าใช้ขั้นพื้นฐาน การส่งพารามิเตอร์เพิ่มเติมจะมีประโยชน์ในสถานการณ์ต่อไปนี้
- RP ต้องขอสิทธิ์เพิ่มเติมแบบไดนามิกที่ IdP มี เช่น ที่อยู่สำหรับการเรียกเก็บเงินหรือการเข้าถึงปฏิทิน ผู้ใช้สามารถให้สิทธิ์เหล่านี้ผ่านขั้นตอนการ UX ที่ควบคุมโดย IdP ซึ่งเปิดใช้งานโดยใช้ฟีเจอร์ "ดำเนินการต่อในฟีเจอร์" จากนั้น IdP จะแชร์ข้อมูลนี้
หากต้องการใช้ API RP จะเพิ่มพารามิเตอร์ลงในพร็อพเพอร์ตี้ params ในรูปแบบออบเจ็กต์ในการเรียกใช้ navigator.credentials.get()
let {token} = await navigator.credentials.get({
identity: {
providers: [{
clientId: '1234',
configURL: 'https://idp.example/fedcm.json',
// Key/value pairs that need to be passed from the
// RP to the IdP but that don't really play any role with
// the browser.
params: {
IDP_SPECIFIC_PARAM: '1',
foo: 'BAR'
}
},
}
});
เบราว์เซอร์จะแปลข้อมูลนี้ให้เป็นคําขอ POST ไปยัง IdP โดยอัตโนมัติ โดยมีพารามิเตอร์เป็นออบเจ็กต์ JSON ที่แปลงเป็นรูปแบบข้อความ JSON ที่เข้ารหัส URL รายการเดียว
// The assertion endpoint is drawn from the config file
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
// params are translated into urlencoded version of `{"IDP_SPECIFIC_PARAM":"1","foo":"bar"}`
account_id=123&client_id=client1234¶ms=%22%7B%5C%22IDP_SPECIFIC_PARAM%5C%22%3A1%2C%5C%22foo%5C%22%3A%5C%22BAR%5C%22%7D%22.
หาก RP ต้องการสิทธิ์เพิ่มเติม IdP สามารถระบุลิงก์เปลี่ยนเส้นทางได้ เช่น ใน node.js
if (rpRequestsPermissions) {
// Response with a URL if the RP requests additional permissions
return res.json({
continue_on: '/example-redirect',
});
}
ช่อง
RP สามารถระบุข้อมูลผู้ใช้ (ชุดค่าผสมของชื่อ อีเมล และรูปโปรไฟล์) ที่ต้องการให้ IdP แชร์ ข้อมูลที่ขอจะรวมอยู่ใน UI การเปิดเผยข้อมูลของกล่องโต้ตอบ FedCM ผู้ใช้จะเห็นข้อความแจ้งว่า idp.example จะแชร์ข้อมูลที่ขอกับ rp.example หากผู้ใช้เลือกลงชื่อเข้าใช้
หากต้องการใช้ฟีเจอร์ช่อง RP ควรเพิ่มอาร์เรย์ fields ในคอล navigator.credentials.get() ช่องอาจมีการเปลี่ยนลําดับ name, email และ picture อย่างไรก็ได้ ซึ่งสามารถขยายให้รวมค่าอื่นๆ เพิ่มเติมได้ในอนาคต
คำขอที่มี fields จะมีลักษณะดังนี้
let { token } = await navigator.credentials.get({
identity: {
providers: [{
// RP requests the IdP to share only user email and profile picture
fields: [ 'email', 'picture'],
clientId: '1234',
configURL: 'https://idp.example/fedcm.json',
},
}
});
จากนั้นเบราว์เซอร์จะแปลเป็นคำขอ HTTP โดยอัตโนมัติไปยังปลายทางการยืนยันผ่านบัตรประจำตัวซึ่งมีพารามิเตอร์ fields ที่ RP ระบุไว้ พร้อมกับช่องที่เบราว์เซอร์เปิดเผยต่อผู้ใช้ในพารามิเตอร์ disclosure_shown_for เบราว์เซอร์จะส่ง disclosure_text_shown=true ด้วยเพื่อใช้งานร่วมกับเวอร์ชันเก่าได้ในกรณีที่มีการแสดงข้อความการเปิดเผยข้อมูลและช่องที่ขอมีทั้ง 3 ช่อง ได้แก่ 'name', 'email' และ 'picture'
POST /id_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
// The RP only requested to share email and picture. The browser will send `disclosure_text_shown=false`, as the 'name' field value is missing
account_id=123&client_id=client1234&disclosure_text_shown=false&fields=email,picture&disclosure_shown_for=email,picture
หาก fields เป็นอาร์เรย์ว่าง User Agent จะข้าม UI การเปิดเผย
กรณีนี้จะเกิดขึ้นแม้ว่าการตอบกลับจาก endpoints ของบัญชีจะไม่มีรหัสไคลเอ็นต์ที่ตรงกับ RP ใน approved_clients
ในกรณีนี้ disclosure_text_shown ที่ส่งไปยังปลายทางการยืนยันผ่านบัตรประจำตัวเป็นเท็จใน HTTP Body
POST /id_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=234234&disclosure_text_shown=false
แสดงข้อความแสดงข้อผิดพลาด
บางครั้งผู้ให้บริการระบุตัวตนอาจไม่สามารถออกโทเค็นด้วยเหตุผลอันสมควร เช่น เมื่อไคลเอ็นต์ไม่ได้รับอนุญาต หรือเซิร์ฟเวอร์ไม่พร้อมใช้งานชั่วคราว หาก IdP ส่งการตอบกลับเป็น "ข้อผิดพลาด" RP จะจับข้อผิดพลาดได้ และ Chrome จะแจ้งให้ผู้ใช้ทราบโดยแสดง UI ของเบราว์เซอร์พร้อมข้อมูลข้อผิดพลาดที่ IdP ระบุ
try {
const cred = await navigator.credentials.get({
identity: {
providers: [
{
configURL: 'https://idp.example/manifest.json',
clientId: '1234',
},
],
}
});
} catch (e) {
const code = e.code;
const url = e.url;
}
ตรวจสอบสิทธิ์ผู้ใช้อีกครั้งโดยอัตโนมัติหลังจากการตรวจสอบสิทธิ์ครั้งแรก
การตรวจสอบสิทธิ์ด้วย FedCM อีกครั้งโดยอัตโนมัติ (หรือเรียกสั้นๆ ว่า "การตรวจสอบสิทธิ์อีกครั้งโดยอัตโนมัติ") ช่วยให้ผู้ใช้ตรวจสอบสิทธิ์อีกครั้งโดยอัตโนมัติได้เมื่อกลับมาหลังจากการตรวจสอบสิทธิ์ครั้งแรกโดยใช้ FedCM "การตรวจสอบสิทธิ์ครั้งแรก" ในที่นี้หมายถึงการที่ผู้ใช้สร้างบัญชีหรือลงชื่อเข้าใช้เว็บไซต์ของ RP โดยการแตะปุ่ม "ดำเนินการต่อในฐานะ..." ในกล่องโต้ตอบการลงชื่อเข้าใช้ของ FedCM เป็นครั้งแรกในอินสแตนซ์เบราว์เซอร์เดียวกัน
แม้ว่าประสบการณ์การใช้งานที่ชัดเจนของผู้ใช้จะเหมาะสมก่อนที่ผู้ใช้จะสร้างบัญชีที่รวมศูนย์เพื่อป้องกันการติดตาม (ซึ่งเป็นเป้าหมายหลักอย่างหนึ่งของ FedCM) แต่การดำเนินการนี้กลับยุ่งยากเกินความจำเป็นหลังจากที่ผู้ใช้ดำเนินการแล้ว 1 ครั้ง เนื่องจากหลังจากที่ผู้ใช้ให้สิทธิ์เพื่ออนุญาตให้มีการติดต่อระหว่าง RP กับ IdP แล้ว จะไม่มีประโยชน์ด้านความเป็นส่วนตัวหรือความปลอดภัยในการบังคับใช้การยืนยันที่ชัดเจนอีกรอบสำหรับสิ่งที่ผู้ใช้ได้ยอมรับไปแล้วก่อนหน้านี้
เมื่อใช้การขอสิทธิ์ใหม่อัตโนมัติ เบราว์เซอร์จะเปลี่ยนลักษณะการทำงานโดยขึ้นอยู่กับตัวเลือกที่คุณระบุสำหรับ mediation เมื่อเรียกใช้ navigator.credentials.get()
const cred = await navigator.credentials.get({
identity: {
providers: [{
configURL: 'https://idp.example/fedcm.json',
clientId: '1234',
}],
},
mediation: 'optional', // this is the default
});
// `isAutoSelected` is `true` if auto-reauthn was performed.
const isAutoSelected = cred.isAutoSelected;
mediation คือพร็อพเพอร์ตี้ใน Credential Management API ซึ่งทำงานในลักษณะเดียวกันกับ PasswordCredential และ FederatedCredential และ PublicKeyCredential รองรับเพียงบางส่วนเช่นกัน พร็อพเพอร์ตี้นี้ยอมรับค่า 4 ค่าต่อไปนี้
'optional'(ค่าเริ่มต้น): ตรวจสอบสิทธิ์ใหม่โดยอัตโนมัติหากเป็นไปได้ ต้องใช้สื่อกลางหากไม่สามารถทำได้ เราขอแนะนำให้เลือกตัวเลือกนี้ในหน้าลงชื่อเข้าใช้'required': ต้องใช้สื่อกลางเสมอเพื่อดําเนินการต่อ เช่น การคลิกปุ่ม "ต่อไป" ใน UI เลือกตัวเลือกนี้หากต้องการให้ผู้ใช้ให้สิทธิ์อย่างชัดเจนทุกครั้งที่ต้องมีการตรวจสอบสิทธิ์'silent': ตรวจสอบสิทธิ์ใหม่โดยอัตโนมัติหากเป็นไปได้ ไม่แสดงข้อความหากตรวจสอบสิทธิ์ใหม่ไม่สำเร็จ เราขอแนะนำให้เลือกตัวเลือกนี้ในหน้าเว็บที่ไม่ใช่หน้าลงชื่อเข้าใช้โดยเฉพาะ แต่คุณต้องการให้ผู้ใช้ลงชื่อเข้าใช้อยู่เสมอ เช่น หน้าสินค้าในเว็บไซต์การจัดส่งหรือหน้าบทความในเว็บไซต์ข่าว'conditional': ใช้สำหรับ WebAuthn และไม่พร้อมใช้งานสำหรับ FedCM ในขณะนี้
การเรียกใช้นี้จะทำให้เกิดการให้สิทธิ์ใหม่อัตโนมัติภายใต้เงื่อนไขต่อไปนี้
- FedCM พร้อมใช้งาน เช่น ผู้ใช้ไม่ได้ปิดใช้ FedCM ทั่วโลกหรือสำหรับ RP ในการตั้งค่า
- ผู้ใช้ใช้บัญชีเดียวที่มี FedCM API เพื่อลงชื่อเข้าใช้เว็บไซต์ในเบราว์เซอร์นี้
- ผู้ใช้ลงชื่อเข้าใช้ IdP ด้วยบัญชีดังกล่าว
- ไม่มีการขอสิทธิ์ใหม่อัตโนมัติในช่วง 10 นาทีที่ผ่านมา
- RP ไม่ได้โทรหา
navigator.credentials.preventSilentAccess()หลังจากการลงชื่อเข้าใช้ครั้งก่อนหน้า
เมื่อเป็นไปตามเงื่อนไขเหล่านี้ ระบบจะเริ่มพยายามตรวจสอบสิทธิ์ผู้ใช้อีกครั้งโดยอัตโนมัติทันทีที่เรียกใช้ FedCM navigator.credentials.get()
เมื่อเป็น mediation: optional การตรวจสอบสิทธิ์ใหม่อัตโนมัติอาจไม่พร้อมใช้งานเนื่องจากเหตุผลที่เบราว์เซอร์เท่านั้นที่ทราบ RP สามารถตรวจสอบได้ว่ามีการตรวจสอบสิทธิ์ใหม่อัตโนมัติหรือไม่โดยการตรวจสอบพร็อพเพอร์ตี้ isAutoSelected
ซึ่งจะเป็นประโยชน์ในการประเมินประสิทธิภาพของ API และปรับปรุง UX ให้เหมาะสม
นอกจากนี้ เมื่อฟีเจอร์นี้ไม่พร้อมใช้งาน ระบบอาจแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยสื่อกลางของผู้ใช้โดยตรง ซึ่งเป็นขั้นตอนที่มี mediation: required
บังคับใช้สื่อกลางด้วย preventSilentAccess()
การรับรองผู้ใช้อีกครั้งโดยอัตโนมัติทันทีหลังจากที่ผู้ใช้ออกจากระบบจะไม่เป็นประสบการณ์ที่ดีสำหรับผู้ใช้ ด้วยเหตุนี้ FedCM จึงมีระยะเวลาพัก 10 นาทีหลังจากการขอสิทธิ์ใหม่อัตโนมัติเพื่อป้องกันไม่ให้เกิดพฤติกรรมนี้ ซึ่งหมายความว่าการขอสิทธิ์ใหม่อัตโนมัติจะเกิดขึ้นไม่เกิน 1 ครั้งในทุกๆ 10 นาที เว้นแต่ผู้ใช้จะลงชื่อเข้าใช้อีกครั้งภายใน 10 นาที RP ควรเรียกใช้ navigator.credentials.preventSilentAccess() เพื่อขอให้เบราว์เซอร์ปิดใช้การขอสิทธิ์ใหม่อัตโนมัติอย่างชัดเจนเมื่อผู้ใช้ออกจากระบบ RP อย่างชัดแจ้ง เช่น โดยการคลิกปุ่มออกจากระบบ
function signout() {
navigator.credentials.preventSilentAccess();
location.href = '/signout';
}
ผู้ใช้สามารถเลือกไม่ใช้การขอสิทธิ์ใหม่อัตโนมัติได้ในการตั้งค่า
ผู้ใช้เลือกไม่ใช้การให้สิทธิ์ใหม่อัตโนมัติได้จากเมนูการตั้งค่า ดังนี้
- ใน Chrome บนเดสก์ท็อป ให้ไปที่
chrome://password-manager/settings> ลงชื่อเข้าใช้โดยอัตโนมัติ - ใน Chrome บน Android ให้เปิดการตั้งค่า > เครื่องมือจัดการรหัสผ่าน > แตะไอคอนรูปเฟืองที่มุมขวาบน > ลงชื่อเข้าใช้โดยอัตโนมัติ
การปิดใช้ปุ่มเปิด/ปิดนี้จะช่วยให้ผู้ใช้เลือกไม่ใช้ลักษณะการทำงานดังกล่าวได้ ระบบจะจัดเก็บและซิงค์การตั้งค่านี้ในอุปกรณ์ต่างๆ หากผู้ใช้ลงชื่อเข้าใช้บัญชี Google ในอินสแตนซ์ Chrome และเปิดใช้การซิงค์ไว้
ยกเลิกการเชื่อมต่อ IdP จาก RP
หากผู้ใช้เคยลงชื่อเข้าใช้ RP โดยใช้ IdP ผ่าน FedCM เบราว์เซอร์จะจดจำความสัมพันธ์ดังกล่าวไว้ในเครื่องเป็นรายการบัญชีที่เชื่อมต่อ RP อาจเริ่มยกเลิกการเชื่อมต่อโดยการเรียกใช้ฟังก์ชัน IdentityCredential.disconnect() ฟังก์ชันนี้เรียกได้จากเฟรม RP ระดับบนสุด RP ต้องส่ง configURL, clientId ที่ใช้ภายใต้ IdP และ accountHint เพื่อให้ IdP ตัดการเชื่อมต่อ คำแนะนำของบัญชีอาจเป็นสตริงที่กำหนดเองได้ ตราบใดที่อุปกรณ์ปลายทางสำหรับการยกเลิกการเชื่อมต่อสามารถระบุบัญชีได้ เช่น อีเมลหรือรหัสผู้ใช้ ซึ่งไม่จำเป็นต้องตรงกับรหัสบัญชีที่อุปกรณ์ปลายทางของรายการบัญชีระบุ
// Disconnect an IdP account 'account456' from the RP 'https://idp.com/'. This is invoked on the RP domain.
IdentityCredential.disconnect({
configURL: 'https://idp.com/config.json',
clientId: 'rp123',
accountHint: 'account456'
});
IdentityCredential.disconnect() แสดงผลเป็น Promise คำมั่นสัญญานี้อาจแสดงข้อยกเว้นด้วยเหตุผลต่อไปนี้
- ผู้ใช้ยังไม่ได้ลงชื่อเข้าใช้ RP โดยใช้ IdP ผ่าน FedCM
- เรียกใช้ API จากภายใน iframe โดยไม่มีนโยบายสิทธิ์ FedCM
- configURL ไม่ถูกต้องหรือไม่มีปลายทางการยกเลิกการเชื่อมต่อ
- การตรวจสอบนโยบายรักษาความปลอดภัยเนื้อหา (CSP) ไม่สําเร็จ
- มีคำขอยกเลิกการเชื่อมต่อที่รอดำเนินการ
- ผู้ใช้ปิดใช้ FedCM ในการตั้งค่าเบราว์เซอร์
เมื่อปลายทางการยกเลิกการเชื่อมต่อของ IdP ส่งการตอบกลับ ระบบจะยกเลิกการเชื่อมต่อ RP กับ IdP ในเบราว์เซอร์และดำเนินการตามสัญญา รหัสของบัญชีที่ยกเลิกการเชื่อมต่อจะระบุไว้ในการตอบกลับจากปลายทางการยกเลิกการเชื่อมต่อ