ลงชื่อเข้าใช้และออกจากระบบโดยอัตโนมัติ

หน้านี้อธิบายวิธีใช้ฟีเจอร์ที่เกี่ยวข้องกับวิธีที่ผู้ใช้ลงชื่อเข้าใช้หรือออกจากระบบด้วย Google One Tap

ลงชื่อเข้าใช้ให้ผู้ใช้โดยอัตโนมัติ

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

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

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

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

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

คุณสามารถวัดอัตราความสำเร็จของการลงชื่อเข้าใช้โดยอัตโนมัติได้โดยใช้ค่า auto ในช่อง select_by ของออบเจ็กต์ CredentialResponse ที่แสดงผลเมื่อจัดการการตอบกลับใน Callback ของ JavaScript (callback หรือ data-callback) select_by ไม่รวมอยู่ในคำขอ HTTP POST ที่ส่งไปยัง login_uri หรือ data-login_uri

หากต้องการเปิดใช้การลงชื่อเข้าใช้โดยอัตโนมัติ ให้เพิ่ม data-auto_select="true" ลงในโค้ด ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-auto_select="true">
</div>

ออกจากระบบ

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

การใช้ FedCM

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

หากไม่มี FedCM

หากต้องการห้ามไม่ให้มีการเลือกอัตโนมัติหลังจากที่ผู้ใช้ออกจากระบบ ให้เพิ่มชื่อคลาส g_id_signout ลงในลิงก์และปุ่มออกจากระบบทั้งหมด ดูข้อมูลโค้ดต่อไปนี้

<div class="g_id_signout">Sign Out</div>

นอกจากนี้ คุณยังใช้ข้อมูลโค้ด JavaScript ต่อไปนี้เพื่อออกจากระบบได้ด้วย

const button = document.getElementById('signout_button');
button.onclick = () => {
  google.accounts.id.disableAutoSelect();
}

เพื่อป้องกันไม่ให้เกิด UX แบบวนซ้ำไม่รู้จบ ระบบจะจัดเก็บสถานะการออกจากระบบของผู้ใช้ไว้ในคุกกี้ชื่อ g_state ซึ่งตั้งค่าโดยไลบรารี Google Identity Services โดยค่าเริ่มต้น ระบบจะตั้งค่าโดเมนคุกกี้เป็นโดเมนของหน้าปัจจุบัน หาก One Tap แสดงในโดเมนหลักและโดเมนย่อย คุกกี้สถานะจะต้องมองเห็นได้ในทุกโดเมนของคุณ ใช้แอตทริบิวต์ data-state_cookie_domain เพื่อตั้งค่าโดเมนคุกกี้ g_state เป็นโดเมนหลัก เช่น เพิ่ม data-state_cookie_domain="example.com" ลงในองค์ประกอบ g_id_onload สำหรับโดเมนหลัก example.com และโดเมนย่อยชื่อ webapp.example.com

หากคุณมีบริการที่ตรวจสอบคุกกี้ทั้งหมดที่ใช้ในโดเมน คุณต้องแจ้งให้ผู้ให้บริการทราบเกี่ยวกับคุกกี้ g_state

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

  • เมื่อออกจากระบบ ให้เปลี่ยนเส้นทางผู้ใช้ไปยังหน้า (เช่น https://example.com/logged_out) ที่ไม่แสดง One Tap หรือหน้าที่ปิดใช้การลงชื่อเข้าใช้อัตโนมัติเสมอ
  • เมื่อออกจากระบบ ให้เพิ่มพารามิเตอร์ลงใน URL เช่น logged_out=1 เมื่อแสดงผล One Tap โดย JavaScript API ให้ตรวจสอบพารามิเตอร์ของ URL นั้นและปิดใช้การลงชื่อเข้าใช้อัตโนมัติเมื่อมีพารามิเตอร์ดังกล่าว

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

หน้าลงชื่อเข้าใช้โดยอัตโนมัติ

การใช้ FedCM

ป๊อปอัปการลงชื่อเข้าใช้โดยอัตโนมัติของ FedCM

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

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

หากไม่มี FedCM

ตัวอย่างป๊อปอัปการลงชื่อเข้าใช้โดยอัตโนมัติ

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

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

  • เซสชัน Google หลายรายการ

ตัวอย่างหน้าตัวเลือกบัญชีผู้ใช้

  • เซสชัน Google แบบครั้งเดียว

หน้าผู้ใช้ที่กลับมาของ One Tap