ข้อมูลอ้างอิง JavaScript API สำหรับการรองรับ iframe ระดับกลาง

หน้ารายการอ้างอิงนี้อธิบาย JavaScript API สำหรับการรองรับ iframe ระดับกลาง ซึ่ง One Tap ใช้เพื่อจัดการ iframe ระดับกลางใน UX ที่ตามมา

ดูวิธีใช้ iframe ระดับกลางได้ที่คู่มือผสานรวม One Tap โดยใช้ iframe

ตารางต่อไปนี้แสดงเมธอดทั้งหมดที่ใช้ได้และลักษณะการทำงานของเมธอดเหล่านั้น

เมธอด
verifyParentOrigin ทำการยืนยันต้นทางหลัก
notifyParentClose แจ้งเฟรมหลักว่าระบบข้ามขั้นตอน UX ของ One Tap
notifyParentDone แจ้งเฟรมหลักว่าขั้นตอน UX ของ One Tap เสร็จสมบูรณ์แล้ว
notifyParentResize แจ้งเฟรมระดับบนให้ปรับขนาด iframe ระดับกลาง
notifyParentTapOutsideMode แจ้งเฟรมหลักว่าจะยกเลิก iframe ระดับกลางหรือไม่เมื่อผู้ใช้คลิกนอก iframe ระดับกลาง

โหลดไลบรารี JavaScript สำหรับการรองรับ iframe ระดับกลาง

วางข้อมูลโค้ดต่อไปนี้ลงในหน้า HTML ที่ต้องการโหลด iframe ระดับกลาง

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>

เมธอด: google.accounts.id.intermediate.verifyParentOrigin

เมธอด google.accounts.id.intermediate.verifyParentOrigin จะทำการยืนยันต้นทางหลัก ดูตัวอย่างโค้ดของเมธอดต่อไปนี้

google.accounts.id.intermediate.verifyParentOrigin(
    origins, verifiedCallback, verificationFailedCallback)

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีแสดง UI หลังจากยืนยันต้นทางหลักแล้วเท่านั้น

<script>
  window.onload = () => {
    google.accounts.id.intermediate.verifyParentOrigin(
        "https://example.com", showUI, showError);
  };
</script>

ตารางต่อไปนี้แสดงพารามิเตอร์

พารามิเตอร์
origins ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง
verifiedCallback เมธอด Callback ของ JavaScript จะทริกเกอร์เมื่อต้นทางหลักปัจจุบันได้รับอนุญาตให้ฝัง iframe ระดับกลาง
verificationFailedCallback เมธอด Callback ของ JavaScript จะทริกเกอร์เมื่อต้นทางหลักปัจจุบันไม่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง

origins

ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง อาร์เรย์สตริง หรือฟังก์ชัน ไม่บังคับ allowed_parent_origin: "https://example.com"

ตารางต่อไปนี้แสดงประเภทค่าที่รองรับและคำอธิบาย

ประเภทค่า
string URI โดเมนเดียว "https://example.com"
string array อาร์เรย์ของ URI โดเมน "https://news.example.com,https://local.example.com"

verifiedCallback

ฟิลด์นี้เป็นเมธอด Callback ของ JavaScript ที่จะทริกเกอร์เมื่อต้นทางหลักปัจจุบันได้รับอนุญาตให้ฝัง iframe ระดับกลาง

verificationFailedCallback

ช่องนี้เป็นเมธอด Callback ของ JavaScript ที่จะทริกเกอร์เมื่อต้นทางหลักปัจจุบันไม่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง

เมธอด: google.accounts.id.intermediate.notifyParentClose

เมธอด google.accounts.id.intermediate.notifyParentClose จะแจ้งเฟรมหลักให้ปิด iframe ระดับกลางเมื่อข้ามขั้นตอน UX ของ One Tap ดูตัวอย่างโค้ดของเมธอดต่อไปนี้

google.accounts.id.intermediate.notifyParentClose()

เมธอด: google.accounts.id.intermediate.notifyParentDone

เมธอด google.accounts.id.intermediate.notifyParentDone จะแจ้งให้เฟรมหลักปิด iframe ระดับกลางและรีเฟรชสถานะการเข้าสู่ระบบ ดูตัวอย่างโค้ดต่อไปนี้ของเมธอด

google.accounts.id.intermediate.notifyParentDone()

เมธอด: google.accounts.id.intermediate.notifyParentResize

เมธอด google.accounts.id.intermediate.notifyParentResize จะแจ้งเฟรมหลักให้ปรับขนาด iframe ระดับกลาง ดูตัวอย่างโค้ดต่อไปนี้ของเมธอด

google.accounts.id.intermediate.notifyParentResize(height)

ความสูง

ความสูงใหม่เป็นพิกเซล นี่คือช่องที่ต้องกรอก ค่าต้องเป็นตัวเลขที่ไม่ติดลบ

หากพารามิเตอร์ความสูงมากกว่า 0 ระบบจะตั้งค่า iframe ระดับกลางเป็นความสูงใหม่ หากพารามิเตอร์ความสูงเป็น 0 iframe ระดับกลางจะมองไม่เห็น iframe ที่ซ่อนอยู่จะไม่ปิด ซึ่งจะแสดงในภายหลังได้โดยการเรียกใช้เมธอดการปรับขนาดอีกครั้ง

เมธอด: google.accounts.id.intermediate.notifyParentTapOutsideMode

เมธอด google.accounts.id.intermediate.notifyParentTapOutsideMode จะแจ้งเฟรมหลักว่าจะยกเลิก iframe ระดับกลางหรือไม่เมื่อผู้ใช้คลิกนอก iframe ระดับกลาง ดูตัวอย่างโค้ดของเมธอดต่อไปนี้

google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)

ยกเลิก

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