ย้ายข้อมูลไปยัง FedCM

คู่มือนี้จะช่วยให้คุณเข้าใจการเปลี่ยนแปลงในเว็บแอปพลิเคชันซึ่งเกิดจาก Federated Credential Management API (FedCM)

เมื่อเปิดใช้ FedCM เบราว์เซอร์จะแสดงข้อความแจ้งให้ผู้ใช้ทราบและจะไม่ใช้คุกกี้ของบุคคลที่สาม

ภาพรวม

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

สําหรับเว็บไซต์ส่วนใหญ่ การย้ายข้อมูลจะทํางานได้อย่างราบรื่นผ่านการอัปเดตไลบรารี JavaScript ของ Google Identity Services ที่ใช้งานร่วมกันได้ย้อนหลัง

ข้อมูลอัปเดตเกี่ยวกับฟีเจอร์ลงชื่อเข้าใช้โดยอัตโนมัติ

Federated Credential Management (FedCM) เบต้าสำหรับ Google Identity Services ได้เปิดตัวไปเมื่อเดือนสิงหาคม 2023 นักพัฒนาแอปจำนวนมากได้ทดสอบ API และแสดงความคิดเห็นที่มีคุณค่า

คําตอบหนึ่งที่ Google ได้รับจากนักพัฒนาแอปเกี่ยวข้องกับข้อกําหนดเกี่ยวกับท่าทางสัมผัสของผู้ใช้สำหรับขั้นตอนการลงชื่อเข้าใช้อัตโนมัติของ FedCM Chrome กำหนดให้ผู้ใช้ต้องยืนยันอีกครั้งว่าต้องการลงชื่อเข้าใช้เว็บไซต์ด้วยบัญชี Google ในอินสแตนซ์ Chrome แต่ละรายการ แม้ว่าผู้ใช้จะอนุมัติเว็บไซต์ก่อนการเปิดตัว FedCM ก็ตาม เพื่อความเป็นส่วนตัวที่ดียิ่งขึ้น การยืนยันอีกครั้งแบบครั้งเดียวนี้ทำได้ด้วยการคลิกพรอมต์ One Tap เพียงครั้งเดียวเพื่อแสดงเจตนาของผู้ใช้ในการลงชื่อเข้าใช้ การเปลี่ยนแปลงนี้อาจทําให้อัตราการเกิด Conversion การลงชื่อเข้าใช้อัตโนมัติของบางเว็บไซต์ลดลงในช่วงแรก

เมื่อเร็วๆ นี้ใน M121 Chrome ได้เปลี่ยนแปลง UX ของขั้นตอนการลงชื่อเข้าใช้อัตโนมัติของ FedCM คุณจะต้องยืนยันอีกครั้งเมื่อมีการจํากัดคุกกี้ของบุคคลที่สามเท่านั้น ซึ่งหมายความว่า

  1. การลงชื่อเข้าใช้อัตโนมัติของ FedCM จะไม่กำหนดให้ผู้ใช้ที่กลับมาต้องยืนยันอีกครั้ง หากผู้ใช้ยืนยันอีกครั้งด้วย UI ของ FedCM การยืนยันอีกครั้งนี้จะนับรวมในข้อกำหนดเกี่ยวกับท่าทางสัมผัสของผู้ใช้สำหรับยุคหลัง 3PCD

  2. การลงชื่อเข้าใช้ FedCM โดยอัตโนมัติจะตรวจสอบสถานะการยืนยันอีกครั้งเมื่อผู้ใช้จํากัดคุกกี้ของบุคคลที่สามด้วยตนเองในปัจจุบัน หรือโดยค่าเริ่มต้นใน Chrome เวอร์ชันในอนาคต

ด้วยเหตุนี้ เราจึงขอแนะนำให้นักพัฒนาแอปการลงชื่อเข้าใช้อัตโนมัติทุกคนเปลี่ยนไปใช้ FedCM โดยเร็วที่สุด เพื่อลดการหยุดชะงักของอัตรา Conversion การลงชื่อเข้าใช้อัตโนมัติ

สําหรับขั้นตอนการลงชื่อเข้าใช้อัตโนมัติ JavaScript ของ GIS จะไม่ทริกเกอร์ FedCM ใน Chrome เวอร์ชันเก่า (ก่อน M121) แม้ว่าเว็บไซต์จะเลือกใช้ FedCM ก็ตาม

ความแตกต่างของเส้นทางของผู้ใช้

ประสบการณ์การแตะครั้งเดียวที่ใช้ FedCM และไม่ใช้ FedCM จะคล้ายกันโดยมีความแตกต่างเพียงเล็กน้อยเท่านั้น

ผู้ใช้ใหม่ในเซสชันเดียว

เมื่อใช้ FedCM ฟีเจอร์แตะครั้งเดียวจะแสดงชื่อโดเมนระดับบนสุดแทนชื่อแอปพลิเคชัน

การใช้ FedCM ไม่มี FedCM
ผู้ใช้ใหม่ในเซสชันเดียวที่ใช้ FedCM ผู้ใช้ใหม่ในเซสชันเดียวที่ไม่มี FedCM

ผู้ใช้ที่กลับมาในเซสชันเดียว (ปิดใช้การลงชื่อเข้าใช้อัตโนมัติ)

เมื่อใช้ FedCM ฟีเจอร์แตะครั้งเดียวจะแสดงชื่อโดเมนระดับบนสุดแทนชื่อแอปพลิเคชัน

การใช้ FedCM ไม่มี FedCM
เส้นทางของผู้ใช้ที่กลับมาในเซสชันเดียวโดยใช้ FedCM (ปิดใช้การลงชื่อเข้าใช้อัตโนมัติ) เส้นทางของผู้ใช้ที่กลับมาแบบเซสชันเดียวโดยไม่มี FedCM (มีการปิดใช้การลงชื่อเข้าใช้อัตโนมัติ)

ผู้ใช้ที่กลับมาในเซสชันเดียว (เปิดใช้การลงชื่อเข้าใช้อัตโนมัติ)

เมื่อใช้ FedCM ผู้ใช้สามารถคลิก X เพื่อยกเลิกการลงชื่อเข้าใช้อัตโนมัติภายใน 5 วินาทีแทนการคลิกปุ่มยกเลิก

การใช้ FedCM ไม่มี FedCM
เส้นทางของผู้ใช้ที่กลับมาในเซสชันเดียวโดยใช้ FedCM (เปิดใช้การลงชื่อเข้าใช้โดยอัตโนมัติ) เส้นทางของผู้ใช้ที่กลับมาแบบเซสชันเดียวโดยไม่มี FedCM (เปิดใช้การลงชื่อเข้าใช้อัตโนมัติ)

หลายเซสชัน

เมื่อใช้ FedCM ฟีเจอร์แตะครั้งเดียวจะแสดงชื่อโดเมนระดับบนสุดแทนชื่อแอปพลิเคชัน

การใช้ FedCM ไม่มี FedCM
ผู้ใช้หลายเซสชันที่ใช้ FedCM ผู้ใช้หลายเซสชันที่ไม่มี FedCM

ก่อนเริ่มต้น

ตรวจสอบว่าการตั้งค่าเบราว์เซอร์และเวอร์ชันรองรับ FedCM API เราขอแนะนำให้อัปเดตเป็นเวอร์ชันล่าสุด

  • FedCM API พร้อมใช้งานใน Chrome เวอร์ชัน 117 ขึ้นไป

  • การตั้งค่าการลงชื่อเข้าใช้ของบุคคลที่สามเปิดใช้ใน Chrome

  • หากเบราว์เซอร์ Chrome เป็นเวอร์ชัน 119 หรือต่ำกว่า ให้เปิด chrome://flags และเปิดใช้ฟีเจอร์ FedCmWithoutThirdPartyCookies เวอร์ชันทดลอง คุณไม่จำเป็นต้องทำขั้นตอนนี้ในเบราว์เซอร์ Chrome เวอร์ชัน 120 ขึ้นไป

ย้ายข้อมูลเว็บแอป

ทําตามขั้นตอนต่อไปนี้เพื่อเปิดใช้ FedCM, ประเมินผลกระทบที่อาจเกิดขึ้นจากการย้ายข้อมูล และหากจําเป็นต้องทําการเปลี่ยนแปลงเว็บแอปพลิเคชันที่มีอยู่

1. เพิ่ม Flag บูลีนเพื่อเปิดใช้ FedCM เมื่อเริ่มต้นโดยใช้สิ่งต่อไปนี้

2. นําการใช้เมธอด isDisplayMoment(), isDisplayed(), isNotDisplayed() และ getNotDisplayedReason() ออกจากโค้ด

เพื่อปรับปรุงความเป็นส่วนตัวของผู้ใช้ ขณะนี้การเรียกกลับ google.accounts.id.prompt จะไม่แสดงการแจ้งเตือนการแสดงผลในออบเจ็กต์ PromptMomentNotication อีกต่อไป นําโค้ดที่ขึ้นอยู่กับเมธอดที่เกี่ยวข้องกับการแสดงผลออก ซึ่งได้แก่ isDisplayMoment(), isDisplayed(), isNotDisplayed() และgetNotDisplayedReason()

3. นําการใช้เมธอด getSkippedReason() ในโค้ดออก

แม้ว่าระบบจะยังคงเรียกใช้ช่วงเวลาข้าม isSkippedMoment() จากgoogle.accounts.id.prompt Callback ในแอบเจ็กต์ PromptMomentNotication แต่ระบบจะไม่ระบุเหตุผลโดยละเอียด นําโค้ดที่ขึ้นอยู่กับวิธี getSkippedReason() ออกจากโค้ด

โปรดทราบว่าการแจ้งเตือนช่วงเวลาที่ปิดไปแล้ว isDismissedMoment() และเมธอดเหตุผลโดยละเอียดที่เกี่ยวข้อง getDismissedReason() จะไม่มีการเปลี่ยนแปลงเมื่อเปิดใช้ FedCM

4. นำแอตทริบิวต์สไตล์ position ออกจาก data-prompt_parent_id และ intermediate_iframes

เบราว์เซอร์จะควบคุมขนาดและตําแหน่งของข้อความแจ้งผู้ใช้ โดยระบบไม่รองรับตําแหน่งที่กำหนดเองสําหรับการแตะครั้งเดียวบนเดสก์ท็อป

5. อัปเดตเลย์เอาต์หน้าเว็บหากจำเป็น

โดยเบราว์เซอร์จะควบคุมขนาดและตําแหน่งของข้อความแจ้งผู้ใช้ เนื้อหาบางอย่างอาจวางซ้อนกันเนื่องจากระบบไม่รองรับตำแหน่งที่กำหนดเองสำหรับฟีเจอร์แตะเดียวบนเดสก์ท็อปไม่ว่าในกรณีใดก็ตาม เช่น แอตทริบิวต์สไตล์, data-prompt_parent_id, intermediate_iframes, iframe ที่กําหนดเอง และวิธีอื่นๆ ที่สร้างสรรค์

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

6. เพิ่มแอตทริบิวต์ allow="identity-credentials-get" ลงในเฟรมหลักหากเว็บแอปเรียกใช้ One Tap API จาก iframe ข้ามแหล่งที่มา

ระบบจะถือว่า iframe เป็นข้ามต้นทางหากต้นทางไม่เหมือนกับต้นทางของรายการหลัก ตัวอย่างเช่น:

  • โดเมนต่างกัน: https://example1.com และ https://example2.com
  • โดเมนระดับบนสุดที่แตกต่างกัน: https://example.uk และ https://example.jp
  • โดเมนย่อย: https://example.com และ https://login.example.com

เมื่อใช้ One Tap ใน iframe ข้ามแหล่งที่มา ผู้ใช้อาจพบประสบการณ์การใช้งานที่สร้างความสับสน ข้อความแจ้งแบบแตะครั้งเดียวจะแสดงชื่อโดเมนระดับบนสุด ไม่ใช่ของ iframe เป็นมาตรการรักษาความปลอดภัยเพื่อป้องกันการเก็บรวบรวมข้อมูลเข้าสู่ระบบ อย่างไรก็ตาม ระบบจะออกโทเค็นระบุตัวตนไปยังต้นทางของ iframe ดูรายละเอียดเพิ่มเติมในปัญหา GitHub นี้

เนื่องจากความคลาดเคลื่อนนี้อาจทําให้เข้าใจผิด เราจึงแนะนําให้ใช้ One Tap ใน iframe แบบข้ามต้นทางเท่านั้น แต่ในเว็บไซต์เดียวกันเป็นวิธีที่รองรับ ตัวอย่างเช่น หน้าในโดเมนระดับบนสุด https://www.example.com ที่ใช้ iframe เพื่อฝังหน้าเว็บที่มี One Tap ใน https://login.example.com ข้อความแจ้งให้แตะครั้งเดียวจะแสดงขึ้น ดังนี้ "ลงชื่อเข้าใช้ example.com ด้วย google.com"

กรณีอื่นๆ ทั้งหมด เช่น โดเมนอื่น ไม่รองรับ แต่ให้พิจารณาใช้วิธีผสานรวมอื่นๆ แทน เช่น

  • การใช้ปุ่มลงชื่อเข้าใช้ด้วย Google
  • การใช้ One Tap ในโดเมนระดับบนสุด
  • การใช้ปลายทาง OAuth 2.0 ของ Google เพื่อผสานรวมที่ปรับแต่งได้มากขึ้น
  • หากคุณฝังเว็บไซต์ของบุคคลที่สามภายใน iframe และแก้ไขการใช้งาน One Tap ไม่ได้ คุณสามารถป้องกันไม่ให้ข้อความแจ้งแบบ One Tap ปรากฏภายใน iframe ได้ โดยให้นําแอตทริบิวต์ allow="identity-credentials-get" ออกจากแท็ก iframe ในเฟรมหลัก ซึ่งจะเป็นการปิดใช้ข้อความแจ้ง จากนั้นคุณก็แนะนําผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของเว็บไซต์ที่ฝังไว้ได้โดยตรง

เมื่อเรียกใช้ One Tap API จาก iframe ข้ามแหล่งที่มา คุณต้องเพิ่มแอตทริบิวต์ allow="identity-credentials-get" ในแท็ก iframe ของเฟรมหลักทุกแท็ก ดังนี้

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

หากแอปของคุณใช้ iframe ที่มี iframe อื่น คุณต้องตรวจสอบว่าได้เพิ่มแอตทริบิวต์ลงใน iframe ทุกรายการ รวมถึง iframe ย่อยทั้งหมดแล้ว

ตัวอย่างเช่น ลองพิจารณาสถานการณ์ต่อไปนี้

  • เอกสารด้านบน (https://www.example.uk) มี iframe ชื่อ "Iframe A" ซึ่งฝังหน้าเว็บ (https://logins.example.com)

  • หน้าเว็บที่ฝังนี้ (https://logins.example.com) ยังมี iframe ที่มีชื่อว่า "Iframe B" ซึ่งฝังหน้าเว็บ (https://onetap.example2.com) ที่โฮสต์ One Tap ไว้ด้วย

    คุณต้องเพิ่มแอตทริบิวต์ลงในทั้งแท็ก Iframe A และ Iframe B เพื่อให้ One Tap แสดงอย่างถูกต้อง

    เตรียมพร้อมสําหรับคําถามเกี่ยวกับพรอมต์การชำระเงินแบบไม่ต้องสัมผัสที่ไม่แสดง เว็บไซต์อื่นๆ ที่มีต้นทางอื่นอาจฝังหน้าเว็บของคุณที่โฮสต์ One Tap ไว้ภายใน iframe คุณอาจได้รับคำขอแจ้งปัญหาเกี่ยวกับ One Tap ไม่แสดงจากผู้ใช้ปลายทางหรือเจ้าของเว็บไซต์รายอื่นมากขึ้น แม้ว่าจะมีเพียงเจ้าของเว็บไซต์เท่านั้นที่อัปเดตหน้าเว็บได้ แต่คุณก็ดำเนินการต่อไปนี้เพื่อลดผลกระทบได้

  • อัปเดตเอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ให้รวมวิธีตั้งค่า iframe อย่างถูกต้องเพื่อเรียกใช้เว็บไซต์ คุณลิงก์ไปยังหน้านี้ได้ในเอกสารประกอบ

  • อัปเดตหน้าคำถามที่พบบ่อยสำหรับนักพัฒนาแอป (หากมี)

  • โปรดแจ้งให้ทีมสนับสนุนทราบถึงการเปลี่ยนแปลงที่กำลังจะเกิดขึ้นและเตรียมคำตอบสำหรับคำถามล่วงหน้า

  • ติดต่อพาร์ทเนอร์ ลูกค้า หรือเจ้าของเว็บไซต์ที่ได้รับผลกระทบเพื่อเตรียมพร้อมรับการเปลี่ยนแปลง FedCM อย่างราบรื่น

7. เพิ่มคําสั่งเหล่านี้ลงในนโยบายรักษาความปลอดภัยเนื้อหา (CSP)

คุณจะทำขั้นตอนนี้หรือไม่ก็ได้ เนื่องจากเว็บไซต์บางแห่งไม่ได้เลือกกำหนด CSP

  • หากไม่ได้ใช้ CSP ในเว็บไซต์ คุณก็ไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ

  • หาก CSP ของคุณใช้งานได้กับ One Tap ปัจจุบันและคุณไม่ได้ใช้ connect-src, frame-src, script-src, style-src หรือ default-src ก็ไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ

  • หรือทำตามคําแนะนํานี้เพื่อตั้งค่า CSP หากไม่มีการตั้งค่า CSP ที่ถูกต้อง FedCM One Tap จะไม่แสดงในเว็บไซต์

8. นําการรองรับการลงชื่อเข้าใช้ด้วย Accelerated Mobile Pages (AMP) ออก

การรองรับการลงชื่อเข้าใช้ของผู้ใช้สำหรับ AMP เป็นฟีเจอร์ที่ไม่บังคับของ GIS ที่เว็บแอปของคุณอาจติดตั้งใช้งาน ในกรณีนี้

ลบการอ้างอิงถึงสิ่งต่อไปนี้

  • องค์ประกอบที่กำหนดเอง amp-onetap-google และ 
  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    ลองเปลี่ยนเส้นทางคำขอลงชื่อเข้าใช้จาก AMP ไปยังขั้นตอนการลงชื่อเข้าใช้ HTML ของเว็บไซต์ โปรดทราบว่า Intermediate Iframe Support API ที่เกี่ยวข้องจะไม่ได้รับผลกระทบ

ทดสอบและยืนยันการย้ายข้อมูล

หลังจากทําการเปลี่ยนแปลงที่จําเป็นตามขั้นตอนก่อนหน้าแล้ว คุณสามารถยืนยันได้ว่าการย้ายข้อมูลสําเร็จ

  1. ยืนยันว่าเบราว์เซอร์รองรับ FedCM และคุณมีเซสชันบัญชี Google อยู่แล้ว

  2. ไปที่หน้า One Tap ในแอปพลิเคชัน

  3. ยืนยันว่าข้อความแจ้งให้แตะครั้งเดียวปรากฏขึ้นและวางซ้อนเนื้อหาที่อยู่เบื้องหลังอย่างปลอดภัย

  4. ยืนยันว่าข้อมูลเข้าสู่ระบบที่ถูกต้องแสดงในปลายทางหรือเมธอดการเรียกกลับเมื่อลงชื่อเข้าใช้แอปพลิเคชันโดยใช้ One Tap

  5. หากเปิดใช้การลงชื่อเข้าใช้อัตโนมัติ ให้ตรวจสอบว่าการยกเลิกใช้งานได้และข้อมูลเข้าสู่ระบบที่ถูกต้องจะแสดงในปลายทางหรือเมธอดการเรียกกลับ

ระยะเวลาพักของ One Tap

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

ระยะเวลาที่ไม่มีการลงชื่อเข้าใช้โดยอัตโนมัติ

เมื่อทดสอบการลงชื่อเข้าใช้โดยอัตโนมัติ One Tap โดยใช้ FedCM จะมีช่วงเวลาพัก 10 นาทีระหว่างที่พยายามลงชื่อเข้าใช้โดยอัตโนมัติแต่ละครั้ง รีเซ็ตระยะเวลาพักไม่ได้ คุณจะต้องรอ 10 นาทีหรือใช้บัญชี Google อื่นเพื่อทดสอบเพื่อเรียกให้ระบบลงชื่อเข้าใช้โดยอัตโนมัติอีกครั้ง

แหล่งข้อมูลที่เป็นประโยชน์

เครื่องมือวิเคราะห์ของ Privacy Sandbox (PSAT) คือส่วนขยายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อช่วยในการนำ API ทางเลือก เช่น FedCM มาใช้ โดยจะทำงานด้วยการสแกนเว็บไซต์เพื่อหาฟีเจอร์ที่ได้รับผลกระทบและแสดงรายการการเปลี่ยนแปลงที่แนะนํา