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

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

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

ต่อไปนี้เป็นขั้นตอนทั่วไปที่ผู้ใช้ต้องทําเพื่อลงชื่อเข้าใช้ / ลงชื่อสมัครใช้ในเว็บไซต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. ปรับโครงสร้าง UX เพื่อแยกช่วงเวลาการตรวจสอบสิทธิ์และการให้สิทธิ์
  2. ย้ายข้อมูลไปยังไลบรารี JavaScript ของ Google Identity Services

HTML API กับ JavaScript API

คุณสามารถใช้ HTML API หรือ JavaScript API เพื่อผสานรวมปุ่ม One Tap, การลงชื่อเข้าใช้โดยอัตโนมัติ หรือฟีเจอร์ลงชื่อเข้าใช้ด้วย Google ลงในหน้าเว็บได้

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

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

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

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

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

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

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

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

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

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

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

ส่วนนี้จะกล่าวถึงข้อควรพิจารณาในการผสานรวมปุ่มลงชื่อเข้าใช้ด้วย 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 ระบบจะส่งข้อมูลเข้าสู่ระบบไปยัง data-login_uri ด้วยเมธอด POST และพารามิเตอร์เดียวกันเสมอ ไม่ว่าจะใช้ UX ใดก็ตาม ซึ่งจะช่วยให้คุณเปลี่ยนโหมด UX ได้โดยไม่ต้องเปลี่ยนแปลงโค้ดอื่นๆ สำหรับ UX การเปลี่ยนเส้นทาง คุณต้องเพิ่ม data-login_uri ลงในURI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับลูกค้าในคอนโซล Google APIs

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

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

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

Button Rendering 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 การแตะเพียงครั้งเดียวแสดงเมื่อใด โปรดทราบว่า UI การชำระเงินแบบรวมอาจไม่แสดงเสมอไปหลังจากเรียกใช้ API เนื่องจากสาเหตุต่อไปนี้

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

แนะนำ

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

ไม่แนะนำ

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

One Tap ในเบราว์เซอร์ ITP

การป้องกันการติดตามอัจฉริยะ (ITP) ทำให้ UX ของฟีเจอร์แตะครั้งเดียวแบบปกติไม่ทำงานในเบราว์เซอร์ ITP เช่น Chrome ใน iOS, Safari และ Firefox เบราว์เซอร์เหล่านี้จะมี UX ที่แตกต่างออกไปโดยเริ่มต้นด้วยหน้าต้อนรับ

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

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

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

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

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

เปลี่ยนตำแหน่งของ UX แบบแตะครั้งเดียว

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

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

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

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

สถานะ UI ของฟังใน One Tap

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

One Tap ในโดเมนย่อย

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

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

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

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

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

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

  • หากไม่มีคุกกี้เซสชัน ระบบจะเรียกใช้ขั้นตอนการชำระเงินแบบแตะครั้งเดียว
  • หากมีคุกกี้เซสชัน ระบบจะข้ามขั้นตอนการชำระเงินแบบแตะครั้งเดียว

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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