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

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

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

• Embedded UX for One Tap และขั้นตอน UX ที่ตามมา

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

  

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

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

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

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

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

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

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

• การแสดงโดเมนด้วยการแตะเพียงครั้งเดียว

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

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

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

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

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

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

แสดงผลการแตะครั้งเดียวใน 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 ใดก็ได้ที่แสดงโค้ด 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 เป็น 1px เพียงเพื่อ มองเห็นได้ จากนั้นหลังจากที่ค่าแอตทริบิวต์ 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 Done

คุณต้องแจ้งให้หน้าเนื้อหาหลักนำ 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 ระดับกลาง