ผสานรวม One Tap ผ่าน iframe

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

การผสานรวมจาก 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) และโดเมนย่อยที่เกี่ยวข้องกับเนื้อหาหลายรายการ (เช่น sports.example.com และ Games.example.com)

  • One Domains ที่แสดงโดเมน

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

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

  • การรองรับ AMP

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

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

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

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

    คุณใช้ iframe สื่อกลางเดียวกันซ้ําได้ทั้งในหน้า AMP และหน้า HTML ที่ไม่ใช่ AMP

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

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

(ไม่บังคับ) แสดงผล UX ที่ตามมาใน Iframe กลาง

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

คุณมีตัวเลือกในการปรับขนาด 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 สําหรับ One Tap UX

<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 แตะเพื่อแสดง

<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 ระดับกลาง