ย้ายข้อมูลไปยัง 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 การลงชื่อเข้าใช้อัตโนมัติ

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

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

การใช้งาน One Tap ที่ใช้ 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. เพิ่มแฟล็กบูลีนเพื่อเปิดใช้ 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

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

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 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 โดยจะทำงานด้วยการสแกนเว็บไซต์เพื่อหาฟีเจอร์ที่ได้รับผลกระทบและแสดงรายการการเปลี่ยนแปลงที่แนะนำ