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

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

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

หากปุ่มปรับตามโปรไฟล์ของผู้ใช้ปรากฏขึ้น ระบบจะแสดงข้อมูลต่อไปนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

เส้นทางผู้ใช้ใหม่ของ Has-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. หลังจากที่ผู้ใช้คลิกปุ่มถัดไป ระบบจะแชร์โทเค็นรหัสกับเว็บไซต์