ใช้โซลูชันข้อมูลประจำตัวกับ FedCM ฝั่งผู้ที่เชื่อถือ

ผู้ให้บริการ (RP) ต้องทำตามขั้นตอนต่อไปนี้เพื่อเปิดใช้ FedCM ในเว็บไซต์

• ตรวจสอบว่าปลายทาง FedCM ได้รับอนุญาตในเว็บไซต์ของ RP
• ใช้ JavaScript API ของ FedCM เพื่อเริ่มการตรวจสอบสิทธิ์ผู้ใช้
• ระบุข้อมูลเมตา (เช่น URL ของนโยบายความเป็นส่วนตัวและข้อกำหนดในการให้บริการ) ให้กับ IdP (หรือ IdP หลายรายการจาก Chrome 136)
• [ไม่บังคับ] ปรับแต่งประสบการณ์ของผู้ใช้โดยเลือกโหมด UX ระบุคำแนะนำในการเข้าสู่ระบบหรือคำแนะนำเกี่ยวกับโดเมน ส่งพารามิเตอร์ที่กำหนดเอง ขอข้อมูลผู้ใช้ที่เฉพาะเจาะจง ระบุข้อความแสดงข้อผิดพลาดที่กำหนดเอง หรือเลือกวิธีตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง

เรียกใช้ FedCM API ใน Relying Party

เมื่อการกำหนดค่าและปลายทางของ 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() ได้ ตั้งแต่ Chrome 136 เป็นต้นไป RP จะรองรับ IdP หลายรายการได้โดยการระบุอาร์เรย์ของผู้ให้บริการ ข้อมูลประจำตัวหลายรายในnavigator.credentials.get()การเรียกใช้ครั้งเดียว เช่น

  const credential = await navigator.credentials.get({
      identity: {
        // Specify the IdP (or multiple IdPs, supported from Chrome 136) this Relying Party supports
        providers: [
        {
              configURL: 'https://accounts.idp-1.example/config.json',
              clientId: '********'
        },
        {
          configURL: 'https://accounts.idp-2.example/config.json',
          clientId: '********'
        }]
      }
    },
  );
  const { token } = credential;
  
  // Get the current IdP's configURL to identify which provider the user is signed in with
  const currentIdpConfigUrl = credential.configURL;
  if (currentIdpConfigUrl === 'https://idp1.example/foo.json') {
    // handle the case where the user signed in with idp1
  } else if (currentIdpConfigUrl === 'https://idp2.example/bar.json') {
    // handle the case where the user signed in with idp2
    }

ลองใช้ฟีเจอร์ IdP หลายรายการโดย ลงชื่อเข้าใช้ด้วย IdP1 และ IdP2

พร็อพเพอร์ตี้บริบท

เมื่อใช้พร็อพเพอร์ตี้ context (ไม่บังคับ) RP จะแก้ไขสตริงใน UI ของกล่องโต้ตอบ FedCM (เช่น "ลงชื่อเข้าใช้ rp.example…", "ใช้ idp.example…") เพื่อรองรับบริบทการตรวจสอบสิทธิ์ที่กำหนดไว้ล่วงหน้าได้ เป็นต้น พร็อพเพอร์ตี้ context อาจมีค่าต่อไปนี้

• signin (ค่าเริ่มต้น)
• signup
• use

เช่น การตั้งค่า context เป็น use จะส่งผลให้แสดงข้อความต่อไปนี้

เบราว์เซอร์จะจัดการกรณีการใช้งานการลงชื่อสมัครใช้และการลงชื่อเข้าใช้แตกต่างกันไปตามการมีอยู่ของ approved_clients ในการตอบกลับจากปลายทางรายการบัญชี เบราว์เซอร์จะไม่แสดงข้อความเปิดเผย "หากต้องการดำเนินการต่อด้วย ...." หากผู้ใช้ลงชื่อสมัครใช้ RP แล้ว
พร็อพเพอร์ตี้ providers จะใช้อาร์เรย์ของออบเจ็กต์ IdentityProvider ที่มีพร็อพเพอร์ตี้ต่อไปนี้

พร็อพเพอร์ตี้ของผู้ให้บริการ

พร็อพเพอร์ตี้ providers จะใช้อาร์เรย์ของออบเจ็กต์ IdentityProvider ที่มีพร็อพเพอร์ตี้ต่อไปนี้

โหมดใช้งาน

FedCM รองรับการกำหนดค่าโหมด UX ที่แตกต่างกัน โหมดพาสซีฟเป็นโหมดเริ่มต้น และนักพัฒนาแอปไม่จำเป็นต้องกำหนดค่า

วิธีใช้ FedCM ในโหมดทำงาน

1. ตรวจสอบความพร้อมใช้งานของฟีเจอร์ในเบราว์เซอร์ของผู้ใช้
2. เรียกใช้ API ด้วยท่าทางของผู้ใช้ชั่วคราว เช่น การคลิกปุ่ม
3. ส่งพารามิเตอร์ 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'
      }
    });
  }

ลองใช้โหมดแอ็กทีฟกับการสาธิตนี้

ไอคอนที่กำหนดเองในโหมดทำงาน

โหมดที่ใช้งานอยู่ช่วยให้ IdP สามารถรวมไอคอนโลโก้อย่างเป็นทางการของ 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 การเข้าสู่ระบบที่ระบุไว้ในไฟล์กำหนดค่า จากนั้นระบบจะ ต่อท้ายพารามิเตอร์การค้นหาคำแนะนำในการเข้าสู่ระบบและคำแนะนำโดเมน

ดูรายละเอียดเพิ่มเติมได้ในเดโม

พารามิเตอร์ที่กำหนดเอง

ฟีเจอร์พารามิเตอร์ที่กำหนดเองช่วยให้ RP ระบุพารามิเตอร์คีย์-ค่าเพิ่มเติมไปยังปลายทางการยืนยัน ID ได้ เมื่อใช้ 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 ที่แปลงเป็นอนุกรมและเข้ารหัส 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&params=%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 ร้องขอ ข้อความการเปิดเผยข้อมูลจะไม่รวมฟิลด์นี้ IdP จะเรียนรู้ฟิลด์ที่ขอทั้งหมดจากปลายทางการยืนยันรหัส และตัดสินใจว่าจะรวบรวมสิทธิ์เพิ่มเติมจากผู้ใช้เพื่อดำเนินการต่อหรือไม่

หากต้องการใช้ฟีเจอร์ฟิลด์ RP ควรเพิ่มอาร์เรย์ fields ในการเรียก navigator.credentials.get() ฟิลด์อาจมีพร็อพเพอร์ตี้ เช่น name, email, tel, username หรือ picture ซึ่งอาจขยายให้รวมค่าอื่นๆ เพิ่มเติมได้ในอนาคต คำขอที่มี fields จะมีลักษณะดังนี้

   let { token } = await navigator.credentials.get({
    identity: {
      providers: [{
        // RP requests the IdP to share only username and profile picture
        fields: [ 'username', 'picture'],
        clientId: '1234',
        configURL: 'https://idp.example/fedcm.json',
      },
    }
  });

เบราว์เซอร์จะแปลเป็นคำขอ HTTP ไปยังปลายทางการยืนยันตัวตนโดยอัตโนมัติ ซึ่งมีพารามิเตอร์ fields ที่ RP ระบุ พร้อมกับฟิลด์ที่เบราว์เซอร์เปิดเผยต่อผู้ใช้ในพารามิเตอร์ disclosure_shown_for เพื่อความเข้ากันได้แบบย้อนหลัง เบราว์เซอร์จะส่ง disclosure_text_shown=true ด้วยหากข้อความการเปิดเผยข้อมูลแสดงขึ้นและช่องที่ขอมีทั้ง 3 ช่อง ได้แก่ 'name', 'email' และ 'picture' ตั้งแต่ Chrome 141 เป็นต้นไป ค่าของ disclosure_text_shown จะไม่ระบุว่าข้อความเปิดเผยข้อมูลแสดงต่อผู้ใช้จริงหรือไม่

  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 การเปิดเผยข้อมูล

แม้ว่าการตอบกลับจากปลายทางของบัญชี จะไม่มีรหัสไคลเอ็นต์ที่ตรงกับ RP ใน approved_clients ก็ตาม

ในกรณีนี้ disclosure_text_shown ที่ส่งไปยังปลายทางการยืนยันตัวตน จะเป็นเท็จในเนื้อหา HTTP

  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 อาจออกโทเค็นไม่ได้ด้วยเหตุผลที่ถูกต้อง เช่น เมื่อไคลเอ็นต์ไม่มีสิทธิ์ หรือเซิร์ฟเวอร์ไม่พร้อมใช้งานชั่วคราว หาก 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 (เรียกสั้นๆ ว่า "auto-reauthn") ช่วยให้ผู้ใช้ตรวจสอบสิทธิ์อีกครั้งได้โดยอัตโนมัติ ต้องเป็นไปตามเงื่อนไขต่อไปนี้จึงจะตรวจสอบสิทธิ์ผู้ใช้ซ้ำโดยอัตโนมัติ

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

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

ขั้นตอนถัดไป

ติดตั้งใช้งาน FedCM ฝั่ง IdP

ดูวิธีใช้โซลูชันข้อมูลประจำตัวกับ FedCM ฝั่งผู้ให้บริการข้อมูลประจำตัว

การปรับแต่งและการไม่ใช้

สํารวจวิธีที่ผู้ใช้และนักพัฒนาแอปจัดการการเข้าร่วม FedCM รวมถึงการเลือกเข้าร่วมหรือไม่เข้าร่วมในแพลตฟอร์มและเว็บไซต์ต่างๆ