ผสานรวม One Tap โดยใช้ iframe

Google One Tap สามารถแสดงภายใน iframe (ซึ่งต่อไปนี้จะเรียกว่า Iframe ตัวกลาง) ที่โฮสต์โดยเว็บไซต์ของคุณ เมื่อมีการใช้ iframe ตัวกลางจะไม่มีการเปลี่ยนแปลงใดๆ ที่รับรู้ได้บน One Tap UX

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

  • UX แบบฝังสำหรับ One Tap และขั้นตอน UX ที่ตามมา

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

    ตัวอย่าง UX แบบฝังที่มี iframe ตัวกลาง

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

  • ผสานรวมครั้งเดียวและแสดงได้ทุกที่

    โค้ดการผสานรวม One Tap ทั้งหมด (การเรียกใช้ One Tap API และการจัดการ UX ที่ตามมา) จะรวมอยู่ใน iframe ระดับกลาง ในหน้าเนื้อหาที่ One Tap อาจแสดง สิ่งที่คุณต้องทำคือฝัง iframe กลาง

    สถาปัตยกรรมนี้ช่วยให้แยกข้อกังวลออกไปได้ จึงช่วยลดค่าใช้จ่ายในการผสานรวมและการบำรุงรักษา

  • จำกัดขอบเขตการแสดงโทเค็นรหัส

    iframe ตัวกลางจะใช้โทเค็นรหัสโดยตรง พวกเขาจึงจะไม่เห็น หน้าเนื้อหาเลย สถาปัตยกรรมนี้อาจทำให้ขอบเขตการแสดงโทเค็นรหัส ลดลงอย่างมาก

    วิธี iframe ขั้นกลางยังทำงานได้ดีกับเว็บไซต์ที่มีโดเมนย่อยเกี่ยวกับการเข้าสู่ระบบโดยเฉพาะ (เช่นlogin.example.com) และโดเมนย่อยที่เกี่ยวข้องกับเนื้อหาหลายรายการ (เช่นsport.example.com และ games.example.com) อยู่แล้ว

  • โดเมนที่แสดงด้วย One Tap

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

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

  • การสนับสนุน AMP

    Google One Tap จะไม่แสดงในหน้า AMP โดยค่าเริ่มต้นเนื่องจากสาเหตุบางประการด้านล่าง

    1. ไม่อนุญาตให้ใช้โค้ดหรือไลบรารี JS ที่กำหนดเอง

    2. แคช AMP อาจแสดงผลหน้าเว็บจากโดเมนอื่น (โปรแกรมเปิด AMP)

    ปัญหานี้แก้ไขได้โดยใช้สถาปัตยกรรม iframe ระดับกลาง หลังจากผสานรวม One Tap ใน iframe ขั้นกลางแล้ว นักพัฒนาซอฟต์แวร์จะฝังไว้ในหน้า AMP ได้โดยการเพิ่มคอมโพเนนต์ <amp-onetap-google>

    iframe ขั้นกลางเดียวกันนี้สามารถนำมาใช้ซ้ำทั้งในหน้า AMP และหน้าที่ไม่ใช่ AMP HTML

  • ความเสี่ยงด้านความเป็นส่วนตัว

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

  • ความเสี่ยงด้านความปลอดภัย

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

แสดงผล One Tap ใน iframe ระดับกลาง

หากต้องการแสดง One Tap ใน iframe ตัวกลาง ให้วางข้อมูลโค้ดต่อไปนี้ลงในโค้ด HTML ของ iframe ตัวกลาง

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

หากใช้แอตทริบิวต์ data-allowed_parent_origin Google One Tap จะทำงานในโหมด iframe ระดับกลาง คุณตั้งค่าโดเมนเดียวหรือรายการโดเมนที่คั่นด้วยคอมมาเป็นค่าแอตทริบิวต์ได้ นอกจากนี้ ระบบยังรองรับโดเมนย่อยที่มีไวลด์การ์ดด้วย

(ไม่บังคับ) แสดงผล UX ลำดับต่อมาใน iframe ระดับกลาง

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

คุณสามารถปรับขนาด iframe ตัวกลางได้โดยทำดังนี้

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

กล่าวโดยสรุป การใช้ iframe แบบขั้นกลางจะทำให้ขั้นตอน UX ในการลงชื่อเข้าใช้หรือลงชื่อสมัครใช้เต็มรูปแบบเป็น UX แบบฝังได้

สำหรับหน้าแรกหลังจาก One Tap UX คุณต้องเรียกใช้เมธอด notifyParentResize() 2 ครั้งเนื่องจากเหตุผลต่อไปนี้

  1. iframe กลางจะซ่อนอยู่เมื่อ One Tap UX เสร็จสิ้น

  2. ค่าแอตทริบิวต์ offsetHeight ขององค์ประกอบคือ 0 เมื่อซ่อนอยู่

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

โค้ดตัวอย่างต่อไปนี้แสดงวิธีตรวจสอบต้นทางระดับบนสุดและปรับขนาด iframe กลางของ UI หลังจาก UX ของ One Tap

<script>
window.onload = () => {
  google.accounts.id.intermediate.verifyParentOrigin(
    ["https://example.com","https://example-com.cdn.ampproject.org"],
    () => {
      google.accounts.id.intermediate.notifyParentResize(1);
      window.setTimeout(() => {
        let h = document.getElementById('container').offsetHeight;
        google.accounts.id.intermediate.notifyParentResize(h);
      }, 200);
    },
    () => {
      document.getElementById('container').style.display = 'none';
      document.getElementById('warning').innerText = 'Warning: the page is displayed in an unexpected domain!';
    }
  );
};
</script>

นำ iframe ระดับกลางบน UX ที่เสร็จสิ้นออก

คุณต้องแจ้งให้หน้าเนื้อหาหลักนำ iframe ตัวกลางออกเมื่อขั้นตอน UX เสร็จสิ้น ในฝั่งนี้ คุณจะวางข้อมูลโค้ดต่อไปนี้ในโค้ดตอบกลับการเข้าสู่ระบบได้

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

หากข้ามขั้นตอน UX คุณต้องเรียกใช้เมธอด notifyParentClose แทน

ฝัง Iframe ระดับกลางลงในหน้า HTML

วางข้อมูลโค้ดต่อไปนี้ลงในหน้า HTML ที่ต้องการให้ Google One Tap แสดง

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

แอตทริบิวต์ data-src คือ URI ของ iframe ระดับกลาง