ข้อควรพิจารณาในการผสานรวม

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

ลงชื่อเข้าใช้ด้วย Google ในบทคัดย่อ

ด้านล่างนี้เป็นขั้นตอนทั่วไปสำหรับผู้ใช้ในการลงชื่อเข้าใช้ / ลงชื่อสมัครใช้ในเว็บไซต์ของคุณ

  1. ผู้ใช้ลงชื่อเข้าใช้เว็บไซต์ของ Google

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

  2. ผู้ใช้เรียกดูหน้าเว็บของคุณซึ่งมีปุ่ม One Tap, การลงชื่อเข้าใช้อัตโนมัติ หรือลงชื่อเข้าใช้ด้วย Google ฝังอยู่

  3. ผู้ใช้โต้ตอบกับด้วยการแตะเพียงครั้งเดียว ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และขั้นตอน UX ที่ตามมาเพื่อดำเนินการดังต่อไปนี้

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

    เมื่อมีเซสชัน Google ที่ทำงานอยู่เพียง 1 รายการในเบราว์เซอร์

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

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

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

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

  4. ข้อมูลเข้าสู่ระบบของ JSON Web Token (หรือที่เรียกว่าโทเค็นรหัส) ที่มีชื่อ อีเมล และรูปโปรไฟล์ของผู้ใช้จะแชร์โดยใช้ตัวแฮนเดิลโค้ดเรียกกลับของ JavaScript หรือการส่งโพสต์ไปยังบริการแบ็กเอนด์ของคุณ

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

  5. ทางฝั่งเซิร์ฟเวอร์ ข้อมูลเข้าสู่ระบบ JWT ที่ Google ออกให้ได้รับการตรวจสอบและใช้ในการสร้างบัญชีใหม่หรือจัดเซสชันที่ตรวจสอบสิทธิ์แล้วในเว็บไซต์

    คุณจะจัดการสถานะการลงชื่อเข้าใช้ของผู้ใช้ในเว็บไซต์ของคุณเอง

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

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

เข้าถึง Google APIs และบริการ

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

การแยก UX สำหรับการตรวจสอบสิทธิ์และการให้สิทธิ์

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

หากเว็บไซต์เคยขอโทเค็นการตรวจสอบสิทธิ์และการให้สิทธิ์ร่วมกันในอดีต เมื่อใช้ไลบรารี JavaScript ของ Google Identity Services คุณจะต้องปรับ UX เพื่อแยกช่วงเวลาการตรวจสอบสิทธิ์ออกจากช่วงการให้สิทธิ์

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

แนวทางปฏิบัติทั่วไปคือการแบ่งกระบวนการออกเป็น 2 ขั้นตอนเพื่อให้การเปลี่ยน UX เป็นไปอย่างราบรื่นและการลดความซับซ้อน

  1. เปลี่ยนโครงสร้างของ UX เพื่อแยกช่วงเวลาการตรวจสอบสิทธิ์และการให้สิทธิ์

  2. ย้ายข้อมูลไปยังไลบรารี JavaScript ของ Google Identity Services

HTML API กับ JavaScript API

คุณสามารถใช้ HTML API หรือ JavaScript API เพื่อผสานรวมปุ่ม "แตะครั้งเดียว" "ลงชื่อเข้าใช้โดยอัตโนมัติ" หรือ "ลงชื่อเข้าใช้ด้วย Google" ลงในหน้าเว็บ

เมื่อใช้ HTML API คุณจะมีฟีเจอร์ในตัวมากขึ้น ตัวอย่างเช่น

  • การแสดงผลด้วยการแตะเพียงครั้งเดียวหรือปุ่ม "ลงชื่อเข้าใช้ด้วย Google" เมื่อโหลดหน้าเว็บ
  • ส่งข้อมูลเข้าสู่ระบบที่ส่งคืนไปยังปลายทางฝั่งเซิร์ฟเวอร์ซึ่งมีการระบุโดยแอตทริบิวต์ data-login_uri หลังจากแตะครั้งเดียวแล้ว UX ลงชื่อเข้าใช้โดยอัตโนมัติหรือป๊อปอัป/เปลี่ยนเส้นทางปุ่ม
  • ป้องกันการโจมตี CSRF ด้วย double-submit-cookie
  • ใช้เครื่องมือสร้างโค้ดเพื่อสร้างโค้ด HTML จากนั้นเพียงคัดลอกลงในหน้า HTML ของคุณ

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

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

เมื่อใช้ JavaScript API คุณจะมีความยืดหยุ่นมากขึ้นในบางสถานการณ์ตามด้านล่าง

  • การแสดง One Tap และปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ในภายหลัง เช่น หลังจากผู้ใช้เลือกเข้าสู่ระบบจากเมนู
  • เรียกใช้ API หลายครั้ง ตัวอย่างเช่น ปุ่มลงชื่อเข้าใช้ด้วย Google จะต้องแสดงผลทุกครั้งที่กล่องโต้ตอบการเข้าสู่ระบบแสดงขึ้น
  • การสร้างหน้า HTML แบบไดนามิกทำให้ฝังโค้ดการเรียก API ไว้ได้ยาก
  • คุณจะโหลดไลบรารี JavaScript ของ Google Identity Services ในเวลาต่อมาได้

คุณจะเรียกใช้โค้ด HTML API ได้เพียงครั้งเดียวในเหตุการณ์ onload ในหน้าเว็บ หรือในเหตุการณ์ onload ของไลบรารี JavaScript ของ Google Identity Services ขึ้นอยู่กับว่ากรณีใดจะเกิดขึ้นภายหลัง คุณควรใช้ JavaScript API หากลักษณะการทำงานของ HTML API ไม่เป็นไปตามที่คุณคาดหวัง

อย่าใช้ HTML API กับ JavaScript API ในหน้าเว็บเดียวกันสำหรับเริ่มต้นหน้าเว็บหรือสำหรับการแสดงผลด้วยการแตะเพียงครั้งเดียวและปุ่ม ตรวจสอบโค้ด ทั้ง HTML และ JavaScript เพื่อหาตำแหน่งที่อาจทับซ้อนกัน โปรดทราบดังต่อไปนี้

  • คุณกำลังใช้ HTML API หากมีองค์ประกอบอย่างน้อย 1 รายการใน <div id='g_id_onload' ... ><id> หรือ <div class='g_id_signin' ...></div> ในโค้ด HTML
  • คุณกำลังใช้ JavaScript API หากมีการเรียกใช้เมธอดใน initialize(), prompt() หรือ render() อย่างน้อย 1 เมธอดในโค้ด JavaScript ของคุณ ไม่ว่าเมธอดเหล่านั้นจะเป็นแบบในบรรทัดหรือโหลดมาจากไฟล์ JavaScript ที่แยกไว้ก็ตาม

คุณสามารถใช้ JavaScript API ต่อไปนี้อย่างอิสระจากการเริ่มต้นหรือการแสดงการแตะเพียงครั้งเดียวและปุ่มกด และไม่มี HTML API ที่สอดคล้องกัน

ข้อควรพิจารณาเกี่ยวกับปุ่มลงชื่อเข้าใช้ด้วย Google

ป๊อปอัปและการเปลี่ยนเส้นทาง

ข้อกำหนด OAuth 2.0 พิจารณาการเปลี่ยนเส้นทาง HTTP แต่ไม่มีคำแนะนำเกี่ยวกับการแสดงผลกล่องโต้ตอบป๊อปอัป UX แบบป๊อปอัป โดยเฉพาะในเว็บบนเดสก์ท็อป อาจให้ UX ที่ดีกว่าสำหรับผู้ใช้ปลายทาง ทั้งนี้เนื่องจากระบบไม่ได้เปลี่ยนเส้นทางผู้ใช้ออกจากหน้าของบุคคลที่สาม และหน้าต่างป๊อปอัปที่มีลักษณะเหมือนกล่องโต้ตอบจะมอบประสบการณ์ในบริบทสำหรับการให้สิทธิ์

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

ปุ่มลงชื่อเข้าใช้ด้วย Google รองรับทั้ง UX ป๊อปอัปและการเปลี่ยนเส้นทาง โดยค่าเริ่มต้น ระบบจะใช้ UX แบบป๊อปอัป คุณจะเปลี่ยน UX ได้โดยการตั้งค่าแอตทริบิวต์ data-ux_mode

มีข้อแตกต่างระหว่างขั้นตอนการเปลี่ยนเส้นทางของปุ่มลงชื่อเข้าใช้ด้วย Google และขั้นตอนการเปลี่ยนเส้นทาง OAuth

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

สําหรับนักพัฒนาแอปที่ใช้ HTML API ไม่ว่าจะใช้ UX ใดก็ตาม ระบบจะส่งข้อมูลเข้าสู่ระบบไปยัง data-login_uri ด้วยเมธอด POST และพารามิเตอร์เดียวกันเสมอ วิธีนี้ช่วยให้คุณสลับโหมด UX ได้โดยไม่ต้องเปลี่ยนโค้ดอื่นๆ สำหรับ UX การเปลี่ยนเส้นทาง คุณต้องเพิ่ม data-login_uri ไปยัง URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับไคลเอ็นต์ในคอนโซล Google APIs

การปรับแต่งปุ่ม

ระบบไม่รองรับการใช้ปุ่มของคุณเอง เราไม่มี API สำหรับการเริ่มการทำงานของปุ่มแบบเป็นโปรแกรม

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

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

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

คุณสามารถใส่ปุ่มหลายปุ่มในหน้าเว็บเดียวกัน เครื่องมือสร้างโค้ดสามารถสร้าง ปุ่มได้ครั้งละ 1 ปุ่มเท่านั้น โดยสามารถเรียกใช้ได้หลายครั้ง แล้วคัดลอกโค้ด <div class='g_id_signin' ...></div> ที่สร้างไว้ลงในหน้าเว็บ

แนวทางปฏิบัติแนะนำสำหรับการแสดงปุ่ม

ปุ่มที่ปรับเปลี่ยนในแบบของคุณจะแสดงใน iframe จากโดเมนaccounts.google.com เนื่องด้วยเหตุผลด้านความเป็นส่วนตัว การโหลด iframe อาจใช้เวลานานบนเครือข่ายที่ช้า เพื่อลดปัญหาเวลาในการตอบสนองนี้ ปุ่มจะแสดงผลใน 2 ขั้นตอนดังนี้

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

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

  • โหลดไลบรารี JavaScript ของ Google Identity Services ให้เร็วที่สุด ลองโหลดไลบรารี JavaScript ก่อนไลบรารีขนาดใหญ่อื่นๆ โดยเฉพาะในเว็บบนอุปกรณ์เคลื่อนที่

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

ข้อควรพิจารณาด้วย One Tap

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

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

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

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

กรณีที่ควรแสดง UI ด้วย One Tap

เมื่อใช้ HTML API การแตะเพียงครั้งเดียวจะแสดงในการโหลดหน้าเว็บเสมอ ด้วย JavaScript

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

  • ไม่มีเซสชัน Google ที่ใช้งานอยู่ในเบราว์เซอร์
  • เซสชัน Google ที่ใช้งานอยู่ทั้งหมดถูกเลือกไม่ใช้
  • คูลดาวน์อยู่ระหว่างดำเนินการ

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

แนะนำ

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

ไม่แนะนำ

แตะครั้งเดียวบนเบราว์เซอร์ ITP

เนื่องด้วย Intelligent Tracking Prevention (ITP) One Tap UX ปกติจะไม่ทำงานในเบราว์เซอร์ ITP เช่น Chrome ใน iOS, Safari และ Firefox เบราว์เซอร์เหล่านี้จะใช้ UX อื่นที่ขึ้นต้นด้วยหน้ายินดีต้อนรับแทน

คุณจะปิดใช้ One Tap UX ในเบราว์เซอร์ ITP ได้หากต้องการ ดูรายละเอียดเพิ่มเติมได้ที่การรองรับ One Tap ในเบราว์เซอร์ ITP

ไม่มีวิธีเปิดใช้ UX นี้ในเบราว์เซอร์ที่ไม่ใช่ ITP เช่น Chrome ใน Android/macOS/Linux และ Edge

ยกเลิกข้อความแจ้งหากผู้ใช้คลิกออกจากหน้า

โดยค่าเริ่มต้น ข้อความแจ้งของ One Tap จะปิดโดยอัตโนมัติหากผู้ใช้คลิกนอกข้อความแจ้ง คุณเปลี่ยนลักษณะการทำงานนี้ได้หากต้องการ

เราขอแนะนำให้เปิดข้อความแจ้งของ One Tap ไว้ในเว็บบนเดสก์ท็อปเสมอ เนื่องจากหน้าจอมีขนาดใหญ่พอ

เปลี่ยนตำแหน่งของ One Tap UX

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

เปลี่ยนบริบทการลงชื่อเข้าใช้

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

บริบท
signin "ลงชื่อเข้าใช้ด้วย Google"
signup "ลงชื่อสมัครใช้ด้วย Google"
use "ใช้กับ Google"

ฟังสถานะ UI ด้วย One Tap

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

แตะครั้งเดียวข้ามโดเมนย่อย

โดยค่าเริ่มต้น ระบบจะติดตามระยะเวลาพักของ One Tap และสถานะอื่นๆ ตามต้นทาง หากเว็บไซต์ของคุณแสดง One Tap ในโดเมนย่อยหลายโดเมน คุณต้องระบุไว้ในโค้ด API

แตะครั้งเดียวในหน้า HTML แบบคงที่

โดยค่าเริ่มต้น ไลบรารี GIS จะถือว่าหน้าเว็บของคุณถูกสร้างแบบไดนามิก เซิร์ฟเวอร์ HTTP ของคุณจะตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้เมื่อสร้างโค้ด HTML

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

ในกรณีนี้ เว็บเซิร์ฟเวอร์ของคุณมีหน้าที่เพิ่มหรือนำโค้ด HTML API ของ One Tap ออก

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

  • หากไม่มีคุกกี้เซสชันอยู่ ระบบจะทริกเกอร์ขั้นตอน One Tap
  • หากมีคุกกี้เซสชันอยู่ ระบบจะข้ามขั้นตอน One Tap

ในกรณีนี้ สถานะของคุกกี้เซสชันจะควบคุมการทริกเกอร์ขั้นตอน One Tap แทนที่จะเป็นโค้ด API ของ One Tap HTML ในหน้าเว็บของคุณ

การผสานรวมฝั่งเซิร์ฟเวอร์

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

ข้อควรพิจารณาเกี่ยวกับ UX

โดยปกติแล้วคุณต้องเพิ่มปลายทาง HTTP ในต้นทางของคุณเองเพื่อจัดการการตอบกลับในฝั่งเซิร์ฟเวอร์ ปัจจัยต่อไปนี้อาจมีผลกระทบต่อ UX ที่เป็นผลลัพธ์

UX จริงที่คุณได้รับมีคำอธิบายอยู่ด้านล่าง

  1. สำหรับโหมด UX สำหรับการเปลี่ยนเส้นทางของปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

    • ไม่ว่าคุณจะใช้ HTML API หรือ JavaScript API คุณจะต้องตั้งค่า URI สำหรับการเข้าสู่ระบบ จะใช้ฟังก์ชันเรียกกลับของ JavaScript เพื่อจัดการกับการตอบกลับไม่ได้เนื่องจากระบบเปลี่ยนเส้นทางผู้ใช้ออกจากหน้าเว็บของคุณแล้ว
    • ข้อมูลสรุป UX: หลังจากคลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ผู้ใช้จะเห็นการเปลี่ยนเส้นทางไปยัง UI ของ Google ทั้งหน้าสำหรับการเลือกและการอนุมัติเซสชัน เมื่อดำเนินการเสร็จแล้ว ระบบจะส่ง POST แบบเต็มหน้าไปยัง URI การเข้าสู่ระบบที่คุณระบุ

  2. สำหรับโหมด UX แบบป๊อปอัปของปุ่ม One Tap หรือปุ่มลงชื่อเข้าใช้ด้วย Google หากใช้ JavaScript API หรือมีการใช้ HTML API และมีฟังก์ชันเรียกกลับของ JavaScript ดังนี้

    • การตอบกลับการตรวจสอบสิทธิ์จะส่งกลับไปยังฟังก์ชันเรียกกลับของ JavaScript
    • สรุป UX: ข้อความแจ้ง One Tap หรือหน้าต่างป๊อปอัปจะแสดงอยู่เหนือหน้าเว็บ หลังจากที่ผู้ใช้ดำเนินการ UX ในข้อความแจ้งหรือหน้าต่างป๊อปอัปเพื่อเลือกเซสชันและการอนุมัติเสร็จแล้ว ฟังก์ชันเรียกกลับของ JavaScript จะได้รับการตอบกลับ UX ที่ตามมาจะตัดสินใจตามวิธีที่ฟังก์ชันเรียกกลับส่งการตอบกลับไปยังเซิร์ฟเวอร์

  3. หรือไม่เช่นนั้น (HTML API ที่มีรูปแบบ URI สำหรับเข้าสู่ระบบ) ให้ทำดังนี้

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

เราขอแนะนำให้ใช้วิธีที่สอดคล้องกันในการส่งการตอบกลับด้วย One Tap และการตอบกลับของปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

ข้อควรพิจารณาด้านความปลอดภัย

หากต้องการป้องกันการโจมตีโดยการปลอมแปลงคำขอแบบข้ามเว็บไซต์

  • สำหรับหลังการส่งที่ทริกเกอร์โดยไลบรารี JavaScript ของไคลเอ็นต์ Google Identity Service คุณสามารถใช้รูปแบบการส่งคุกกี้ซ้ำในตัวได้ โปรดดูรายละเอียดเพิ่มเติมในยืนยันโทเค็นรหัส Google ในฝั่งเซิร์ฟเวอร์
  • สำหรับการส่งไปยังต้นทางของคุณเองโดยใช้ XmlHttpRequest คุณสามารถใช้ส่วนหัว HTTP ที่กำหนดเอง หรือมาตรการรักษาความปลอดภัยอื่นๆ ที่ทีมความปลอดภัยของคุณอนุมัติ

หากต้องการยืนยันโทเค็นรหัสในการตอบกลับการตรวจสอบสิทธิ์ ขอแนะนำเป็นอย่างยิ่งให้ใช้ไลบรารีของไคลเอ็นต์ Google API สำหรับแพลตฟอร์ม หรือใช้ไลบรารี JWT อเนกประสงค์

คำถามที่พบบ่อย

  • ปุ่ม One Tap และลงชื่อเข้าใช้ด้วย Google มีให้ใช้งานใน WebView หรือไม่

    ไม่ เนื่องจากข้อกังวลด้านความปลอดภัย ผู้ใช้ไม่ควรเพิ่มเซสชันของ Google ลงใน WebView ด้วยเหตุนี้ เราจึงปิดใช้ GIS ใน WebView เพราะไม่น่าจะมีเซสชันของ Google อยู่

  • ฉันจะใช้ปุ่มลงชื่อเข้าใช้ด้วย Google ของตัวเองได้ไหม ไม่ เมื่อใช้โฟลว์ฝั่งเซิร์ฟเวอร์ OAuth หรือไลบรารี JavaScript ของ Google Sign In เวอร์ชันก่อนหน้า แต่ละฝ่ายสามารถใช้หลักเกณฑ์การใช้แบรนด์สำหรับการลงชื่อเข้าใช้เพื่อสร้างปุ่ม Google Sign-In เวอร์ชันของตัวเองได้

    อย่างไรก็ตาม ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google ได้นำฟีเจอร์นี้ออกแล้ว ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ทั้งหมดจะต้องสร้างขึ้นโดยไลบรารี JavaScript ของบริการ Google Identity Services การเปลี่ยนแปลงนี้มีเหตุผลสองประการ

    • ผู้ที่พึ่งพาบางฝ่ายไม่ปฏิบัติตามหลักเกณฑ์ ซึ่งทำให้ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ในเว็บไซต์ต่างๆ ไม่สอดคล้องกัน
    • เมื่อสร้างจากไลบรารี คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ เมื่อมีการเปลี่ยนแปลงหลักเกณฑ์การใช้แบรนด์สำหรับการลงชื่อเข้าใช้

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

  • จะเกิดอะไรขึ้นหากเว็บไซต์ของฉันเปิดใช้เพียงการแตะครั้งเดียว แต่ไม่ได้เปิดใช้ปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

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

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

  • เมื่อมีการแยกวิเคราะห์โค้ด HTML API ของฉัน ฉันจะเปลี่ยนโค้ด HTML API ในภายหลังได้ไหม

    ไลบรารี JavaScript ของ Google Identity Services จะแยกวิเคราะห์และเรียกใช้โค้ด HTML API ในเหตุการณ์การโหลดไลบรารี JavaScript หรือเหตุการณ์ DomContentLoaded ขึ้นอยู่กับว่ากรณีใดจะเกิดขึ้นภายหลัง

    • หากมีการทริกเกอร์เหตุการณ์ DomContentLoaded เมื่อโหลดไลบรารี JavaScript ระบบจะแยกวิเคราะห์โค้ด HTML API และเรียกใช้ทันที
    • หรือไม่เช่นนั้น ไลบรารี JavaScript จะเพิ่ม Listener สำหรับเหตุการณ์ DomContentLoaded เมื่อทริกเกอร์ Listener จะแยกวิเคราะห์และเรียกใช้โค้ด HTML API ของคุณ

    นอกจากนี้ โปรดทราบว่าการแยกวิเคราะห์และการดำเนินการของโค้ด HTML API นั้นปิดเพียงครั้งเดียว

    • หลังจากแยกวิเคราะห์และดำเนินการแล้ว ระบบจะไม่สนใจการเปลี่ยนแปลงโค้ด HTML API ที่ตามมา
    • ไม่มี API สำหรับนักพัฒนาแอปที่จะทริกเกอร์กระบวนการแยกวิเคราะห์หรือดำเนินการ