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

การแสดงปุ่ม

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

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

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

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

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

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

    ปุ่มที่ปรับเปลี่ยนในแบบของคุณซึ่งแสดงชื่อบัญชี Google บัญชีเดียว

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

    ปุ่มในแบบของคุณที่มีลูกศรรายการ

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

    ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" โดยไม่มีข้อมูลที่ปรับเปลี่ยนในแบบของคุณ

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

  • แอตทริบิวต์ data-type คือ icon
  • แอตทริบิวต์ data-size ตั้งค่าเป็น medium หรือ small
  • แอตทริบิวต์ data-width ตั้งค่าเป็นตัวเลขที่น้อยกว่า 200 พิกเซล

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

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

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

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

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

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

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

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

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

    ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" โดยไม่มีข้อมูลที่ปรับเปลี่ยนในแบบของคุณ

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

    หน้าตัวเลือกบัญชีสำหรับเซสชันเริ่มต้น

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

    ลงชื่อเข้าใช้ด้วยปุ่ม Google ให้ความยินยอมและลงชื่อเข้าใช้

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

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

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

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

    ปุ่มที่ปรับเปลี่ยนในแบบของคุณซึ่งแสดงชื่อบัญชี Google บัญชีเดียว

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

    ตัวเลือกบัญชี Google

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

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

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

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

    ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" โดยไม่มีข้อมูลที่ปรับเปลี่ยนในแบบของคุณ

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

    อีเมลของบัญชีผู้ใช้ Google

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

    การลงชื่อเข้าใช้บัญชี Google

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

    ลงชื่อเข้าใช้ด้วยปุ่ม Google ให้ความยินยอมและลงชื่อเข้าใช้

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

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

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

    ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" โดยไม่มีข้อมูลที่ปรับเปลี่ยนในแบบของคุณ

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

    อีเมลของบัญชีผู้ใช้ Google

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

    การลงชื่อเข้าใช้บัญชี Google

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