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 ของปุ่ม

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

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

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 และการลงชื่อเข้าใช้อัตโนมัติ เพื่อให้ฟีเจอร์การลงชื่อเข้าใช้ด้วย Google ทั้งหมดของ Federated Credential Management (FedCM) จาก Relying Party (RP) รายเดียวทํางานร่วมกัน Chrome จะบันทึกและดำเนินการตาม ท่าทางสัมผัสของผู้ใช้ในขั้นตอนปุ่ม FedCM เพื่อดำเนินการยืนยันซ้ำแบบครั้งเดียวสำหรับขั้นตอนการลงชื่อเข้าใช้อัตโนมัติด้วย One Tap ซึ่งจะช่วยให้ได้รับประสบการณ์การใช้งานที่ราบรื่นในทุกฟีเจอร์

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

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

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

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

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

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

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

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

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

ปุ่มที่ไม่มี FedCM

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

   

2. หน้าตัวเลือกบัญชี

   

3. หน้าความยินยอมของผู้ใช้ใหม่

   

4. หลังจากที่ผู้ใช้ยืนยันแล้ว ระบบจะแชร์โทเค็นรหัสกับเว็บไซต์ของคุณ

ผู้ใช้สามารถเพิ่มเซสชัน Google ใหม่ได้โดยคลิกปุ่มใช้บัญชีอื่น ดูส่วนเส้นทางของผู้ใช้ไม่มีเซสชัน Google

ปุ่มที่ใช้ FedCM

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

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

ปุ่มที่ไม่มี FedCM

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

   

2. หน้าตัวเลือกบัญชี

   

3. หลังจากที่ผู้ใช้เลือกบัญชีที่กลับมาใช้ใหม่แล้ว ระบบจะแชร์โทเค็นรหัสกับ เว็บไซต์ของคุณ

ผู้ใช้เพิ่มเซสชัน Google ใหม่ได้โดยคลิกปุ่มใช้บัญชีอื่น ดูส่วนเส้นทางของผู้ใช้ "ไม่มีเซสชัน Google"

ปุ่มที่ใช้ FedCM

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

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

ปุ่มที่ไม่มี FedCM

ปุ่มลงชื่อเข้าใช้ด้วย Google ที่ไม่มี FedCM จะไม่มีฟีเจอร์เลือกอัตโนมัติ

ปุ่มที่ใช้ FedCM

ระบบจะเลือกผู้ใช้ที่กลับมาซึ่งมีเซสชัน Google ที่ใช้งานอยู่โดยอัตโนมัติ หลังจากคลิกปุ่ม โดยไม่ต้องแสดงข้อความแจ้งตัวเลือกบัญชี ตั้งค่าแอตทริบิวต์ auto select เป็น true (HTML/JavaScript)

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

ปุ่มที่ไม่มี FedCM

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

   

2. หน้าแรกที่จะเพิ่มเซสชัน Google ใหม่

   

3. หน้าเว็บที่ 2 สำหรับเพิ่มเซสชัน Google ใหม่

   

4. หน้าความยินยอมของผู้ใช้ใหม่

   

5. หลังจากที่ผู้ใช้ยืนยันแล้ว ระบบจะแชร์โทเค็นรหัสกับเว็บไซต์ของคุณ

ปุ่มที่ใช้ FedCM

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

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

ปุ่มที่ไม่มี FedCM

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

   

2. หน้าแรกที่จะเพิ่มเซสชัน Google ใหม่

   

3. หน้าเว็บที่ 2 สำหรับเพิ่มเซสชัน Google ใหม่

   

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

ปุ่มที่ใช้ FedCM

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

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

ปุ่มที่ไม่มี FedCM

ไม่มีเซสชันของ Google

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

   

2. หน้าแรกสำหรับเพิ่มเซสชัน Google ใหม่ของบุตรหลาน (อีเมลของบัญชี Google ของบุตรหลาน)

   

3. หน้าที่ 2 สำหรับเพิ่มเซสชัน Google ใหม่ของบุตรหลาน (รหัสผ่านบัญชี Google ของบุตรหลาน)

   

4. หน้าแรกที่ต้องได้รับการอนุมัติจากผู้ปกครองเพื่อเพิ่มเซสชัน Google ใหม่สำหรับบุตรหลาน

   

5. หน้าที่ 2 เพื่อขออนุมัติจากผู้ปกครองในการเพิ่มเซสชัน Google ใหม่สำหรับบุตรหลาน

   

6. หน้าที่ 3 เพื่อรับการอนุมัติจากผู้ปกครองในการเพิ่มเซสชัน Google ใหม่สำหรับบุตรหลาน

   

7. หน้าแรกที่ต้องได้รับการอนุมัติจากผู้ปกครองเพื่อให้บุตรหลานลงชื่อเข้าใช้บัญชี Google ของเด็กในแอปพลิเคชัน

   

8. หน้าที่ 2 เพื่อรับการอนุมัติจากผู้ปกครองในการลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

9. หน้าเว็บที่ 3 เพื่อรับการอนุมัติจากผู้ปกครองในการลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

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

    

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

Has-Google-session

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

   

2. หน้าตัวเลือกบัญชี

   

3. หน้าแรกที่ต้องได้รับการอนุมัติจากผู้ปกครองเพื่อให้บุตรหลานลงชื่อเข้าใช้บัญชี Google ของเด็กในแอปพลิเคชัน

   

4. หน้าที่ 2 เพื่อรับการอนุมัติจากผู้ปกครองในการลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

5. หน้าเว็บที่ 3 เพื่อรับการอนุมัติจากผู้ปกครองในการลงชื่อเข้าใช้บัญชี Google ของบุตรหลานในแอปพลิเคชัน

   

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

   

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

ปุ่มที่ใช้ FedCM

ปุ่มลงชื่อเข้าใช้ด้วย Google ที่เปิดใช้ FedCM ไม่รองรับบัญชี Family Link ในขณะนี้

ข้อมูลเพิ่มเติมเกี่ยวกับโฟลว์ปุ่ม FedCM

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

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

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