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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML API กับ JavaScript API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อใดที่ควรแสดง UI ของ One Tap

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

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

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

แนะนำ

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

ไม่แนะนำ

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

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

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

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

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

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

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

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

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

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

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

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

ฟังเมื่อมีสถานะ UI ของ One Tap

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

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

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

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

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

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

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

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

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

ในกรณีนี้ สถานะคุกกี้ของเซสชันจะเป็นผู้ควบคุมการทริกเกอร์โฟลว์ One Tap หรือไม่ แทนการมีโค้ด 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. สำหรับ One Tap หรือโหมดป๊อปอัปปุ่ม "ลงชื่อเข้าใช้ด้วย Google" หากใช้ JavaScript API หรือใช้ HTML API และมีฟังก์ชัน Callback ของ JavaScript ให้ใช้งาน

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

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

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

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

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

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

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

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

  • มีปุ่ม One Tap and Sign-In with Google ใน WebView ไหม

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

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

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

    • บุคคลบางกลุ่มไม่สามารถปฏิบัติตามหลักเกณฑ์นี้ ซึ่งทำให้ปุ่มลงชื่อเข้าใช้ด้วย 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 เมื่อทริกเกอร์ ผู้ฟังจะแยกวิเคราะห์และเรียกใช้โค้ด HTML API ของคุณ

    โปรดทราบว่าการแยกวิเคราะห์และเรียกใช้โค้ด HTML API เป็นแบบปิดใช้ครั้งเดียว

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