UX ของปุ่มลงชื่อเข้าใช้ด้วย Google

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

หน้านี้อธิบายประสบการณ์ของผู้ใช้ (UX) สำหรับปุ่มลงชื่อเข้าใช้ด้วย Google

การแสดงผลปุ่ม

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

หากปุ่มที่ปรับเปลี่ยนในแบบของคุณแสดงขึ้น ผู้ใช้จะทราบข้อมูลต่อไปนี้

• มีเซสชัน Google ที่ใช้งานอยู่อย่างน้อย 1 รายการ
• มีบัญชีที่เกี่ยวข้องในเว็บไซต์ของคุณ

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

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

• เซสชันเดียว: มีเซสชันเพียงเซสชันเดียวในฝั่งของ Google เซสชันนั้นจะอนุมัติไคลเอ็นต์ และมีบัญชีที่เกี่ยวข้องในเว็บไซต์ของคุณ

  

• เซสชันหลายรายการ: มีเซสชันหลายรายการในฝั่งของ Google เซสชันเหล่านั้นจะอนุมัติลูกค้า คุณจะทราบการอนุมัติได้จากลูกศรรายการข้างบัญชีที่แสดง เซสชันอย่างน้อย 1 รายการมีบัญชีที่สอดคล้องกับเว็บไซต์ของคุณ

  

• ไม่มีเซสชัน: ไม่มีเซสชันในฝั่ง Google หรือไม่มีเซสชันใดอนุมัติไคลเอ็นต์เลย

  

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

• แอตทริบิวต์ data-type คือ icon
• แอตทริบิวต์ data-size ตั้งค่าเป็น medium หรือ small
• แอตทริบิวต์ data-width ได้รับการตั้งค่าเป็นตัวเลขที่น้อยกว่า 200 พิกเซล
• คุกกี้ของบุคคลที่สามถูกบล็อก และไม่ได้เปิดใช้ปุ่มเวอร์ชัน FedCM

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

Federated Credential Manager (FedCM)

Privacy Sandbox สําหรับเว็บจะนําการเปลี่ยนแปลงที่สําคัญมาสู่บริการระบุตัวตนของ Google และการลงชื่อเข้าใช้ของผู้ใช้ โดยจะส่งผลต่อปุ่มลงชื่อเข้าใช้ด้วย Google ที่ปรับเปลี่ยนในแบบของคุณ แม้ว่าขั้นตอนการลงชื่อเข้าใช้จะไม่ได้รับผลกระทบจากปุ่ม แต่ผู้ใช้ที่กลับมาจะไม่เห็นปุ่มที่ปรับเปลี่ยนในแบบของคุณหากมีการบล็อกคุกกี้ของบุคคลที่สาม

การใช้ขั้นตอนปุ่ม Federated Credentials Management API (FedCM) จะช่วยให้ผู้ใช้เห็นปุ่มลงชื่อเข้าใช้ด้วย Google ที่ปรับเปลี่ยนในแบบของคุณบนเว็บไซต์ของคุณ โดยค่าเริ่มต้น ระบบจะปิดใช้ FedCM แต่คุณเปิดใช้ FedCM ได้โดยการเปลี่ยนแอตทริบิวต์ 1 รายการ (HTML/JavaScript) ประโยชน์ของปุ่ม FedCM มีดังนี้

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

• การผสานรวมฟีเจอร์ที่มีประสิทธิภาพยิ่งขึ้น: เราได้ผสานรวมฟังก์ชันการทำงาน One Tap และลงชื่อเข้าใช้อัตโนมัติ ซึ่งช่วยให้การลงชื่อเข้าใช้ด้วยการจัดการข้อมูลเข้าสู่ระบบแบบรวมศูนย์ (FedCM) ทั้งหมดกับฟีเจอร์ของ Google จากบุคคลที่สามที่เชื่อถือ (RP) รายเดียวทำงานร่วมกันได้ Chrome จะบันทึกและดำเนินการตามท่าทางสัมผัสของผู้ใช้ในขั้นตอนการลงชื่อเข้าใช้ด้วยปุ่ม FedCM เพื่อยืนยันอีกครั้งแบบครั้งเดียวสำหรับขั้นตอนการลงชื่อเข้าใช้อัตโนมัติด้วย One Tap วิธีนี้ช่วยให้คุณได้รับประสบการณ์การใช้งานที่ราบรื่นในฟีเจอร์ทั้งหมด

เส้นทางของผู้ใช้ที่สําคัญ

เส้นทางของผู้ใช้จะแตกต่างกันไปตามสถานะต่อไปนี้

• สถานะเซสชันในเว็บไซต์ของ Google ระบบใช้คําต่อไปนี้เพื่อระบุสถานะเซสชัน Google ที่แตกต่างกันเมื่อเส้นทางของผู้ใช้เริ่มต้น

  • Has-Google-session: มีเซสชันที่ใช้งานอยู่อย่างน้อย 1 รายการในเว็บไซต์ของ Google
  • No-Google-session: ไม่มีเซสชันที่ใช้งานอยู่ในเว็บไซต์ของ Google

• บัญชี Google ที่เลือกอนุมัติเว็บไซต์ของคุณหรือไม่เมื่อผู้ใช้เริ่มเส้นทาง ระบบใช้คําต่อไปนี้เพื่อระบุสถานะการอนุมัติที่แตกต่างกัน

  • ผู้ใช้ใหม่: บัญชีที่เลือกยังไม่ได้อนุมัติเว็บไซต์ของคุณ
  • ผู้ใช้ที่กลับมา: บัญชีที่เลือกได้อนุมัติเว็บไซต์ของคุณแล้วก่อนหน้านี้

เส้นทางของผู้ใช้ใหม่ที่มีเซสชัน Google

เส้นทางของผู้ใช้ที่กลับมาซึ่งมีเซสชัน Google

Has-Google-session ที่มีการเลือกเส้นทางของผู้ใช้ที่กลับมาโดยอัตโนมัติ

เส้นทางของผู้ใช้ใหม่ที่ไม่มีเซสชัน Google

เส้นทางของผู้ใช้ที่กลับมาซึ่งไม่มีเซสชัน Google

เส้นทางของผู้ใช้ที่สำคัญสำหรับบัญชี Family Link

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

ข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนการกดปุ่ม FedCM

• เพิ่มแอตทริบิวต์ allow="identity-credentials-get" ลงในเฟรมหลักหากเว็บแอปเรียกใช้ Button API จาก iframe ข้ามแหล่งที่มา ดูข้อมูลเพิ่มเติมได้ที่ขั้นตอนที่ 7

• ตั้งค่านโยบายรักษาความปลอดภัยเนื้อหา (CSP) ของเว็บไซต์อย่างเหมาะสม ดูข้อมูลเพิ่มเติมที่ขั้นตอนที่ 8

• สถานะระยะเวลาพักและการตั้งค่าการลงชื่อเข้าใช้ของบุคคลที่สามใน Chrome ไม่มีผลต่อขั้นตอนการลงชื่อเข้าใช้ FedCM สถานะ (ตามที่แสดงในภาพหน้าจอต่อไปนี้) จะมีผลต่อ UX ของการชำระเงินแบบไม่ต้องสัมผัสเท่านั้น